285 lines
8.5 KiB
JavaScript
285 lines
8.5 KiB
JavaScript
//=============================================================================
|
||
// ConfigureRootElement.js
|
||
// Version: 1.0.0
|
||
//----------------------------------------------------------------------------
|
||
// Copyright (c) 2016 DeNA
|
||
// RPGMV 1.0.0
|
||
//=============================================================================
|
||
|
||
//=============================================================================
|
||
/*:
|
||
* @plugindesc v1.00 任意のroot要素にゲーム本体の要素を追加できるようにするpluginです
|
||
* @author DeNA
|
||
*
|
||
* @param ---General---
|
||
* @default
|
||
*
|
||
* @param Root Element Id
|
||
* @default
|
||
*
|
||
* @help
|
||
* ============================================================================
|
||
* Introduction
|
||
* ============================================================================
|
||
*
|
||
* このpluginはgameの要素を追加するroot要素を指定できます。
|
||
*
|
||
* # ConfigureRootElement.js
|
||
*
|
||
* ## 使い方
|
||
* * GUI上からConfigureRootElement の"Root Element Id"に任意のDOMのidを指定する * ことでゲームが表示される領域をコントロールすることができます。
|
||
*
|
||
* ## 実装
|
||
*
|
||
* ### RootElementの指定
|
||
* 以下の部分を参照ください。
|
||
*
|
||
* ```
|
||
* var Parameters = PluginManager.parameters('ConfigureRootElement');
|
||
* var RootElementId = String(Parameters['Root Element Id']);
|
||
* var GAME_ROOT_ELEMENT_NODE_KEY = 'ConfigureRootElement_Root_Element_Node_Key';
|
||
* try {
|
||
* if (RootElementId) {
|
||
* PluginManager.setParameters(GAME_ROOT_ELEMENT_NODE_KEY, document.getElementById(RootElementId));
|
||
* } else if (!(PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY) instanceof HTMLElement)) {
|
||
* PluginManager.setParameters(GAME_ROOT_ELEMENT_NODE_KEY, document.body);
|
||
* }
|
||
* } catch (e) {
|
||
* console.info('Caution! set default root element, document.body.');
|
||
* PluginManager.setParameters(GAME_ROOT_ELEMENT_NODE_KEY, document.body);
|
||
* }
|
||
* ```
|
||
*
|
||
* ### 表示位置のコントロール
|
||
*
|
||
* * rpg_core.jsのGraphicsの以下の関数をオーバーライドすることで表示位置をコントロールしています。（rpg_core.jsに変更が入った場合はご注意ください。）
|
||
* * Graphics.pageToCanvasX
|
||
* * Graphics._createErrorPrinter
|
||
* * Graphics._createCanvas
|
||
* * Graphics._createVideo
|
||
* * Graphics._createUpperCanvas
|
||
* * Graphics._createModeBox
|
||
* * Graphics._createFontLoader
|
||
* * Graphics._disableTextSelection
|
||
* * Graphics._disableContextMenu
|
||
* * Graphics._requestFullScreen
|
||
*
|
||
* ============================================================================
|
||
* Changelog
|
||
* ============================================================================
|
||
*
|
||
* Version 1.00:
|
||
* - Finished plugin!
|
||
*/
|
||
//=============================================================================
|
||
|
||
(function () {
|
||
//-----------------------------------------------------------------------------
|
||
// setup
|
||
|
||
var Parameters = PluginManager.parameters("ConfigureRootElement");
|
||
var RootElementId = String(Parameters["Root Element Id"]);
|
||
var GAME_ROOT_ELEMENT_NODE_KEY = "ConfigureRootElement_Root_Element_Node_Key";
|
||
try {
|
||
if (RootElementId) {
|
||
PluginManager.setParameters(
|
||
GAME_ROOT_ELEMENT_NODE_KEY,
|
||
document.getElementById(RootElementId)
|
||
);
|
||
} else if (
|
||
!(
|
||
PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY) instanceof
|
||
HTMLElement
|
||
)
|
||
) {
|
||
PluginManager.setParameters(GAME_ROOT_ELEMENT_NODE_KEY, document.body);
|
||
}
|
||
} catch (e) {
|
||
console.info("Caution! set default root element, document.body.");
|
||
PluginManager.setParameters(GAME_ROOT_ELEMENT_NODE_KEY, document.body);
|
||
}
|
||
|
||
//-----------------------------------------------------------------------------
|
||
// override Graphics
|
||
|
||
/**
|
||
* Converts an x coordinate on the page to the corresponding
|
||
* x coordinate on the canvas area.
|
||
*
|
||
* @static
|
||
* @method pageToCanvasX
|
||
* @param {Number} x The x coordinate on the page to be converted
|
||
* @return {Number} The x coordinate on the canvas area
|
||
*/
|
||
Graphics.pageToCanvasX = function (x) {
|
||
if (this._canvas) {
|
||
var left = this._canvas.getBoundingClientRect().left;
|
||
return Math.round((x - left) / this._realScale);
|
||
} else {
|
||
return 0;
|
||
}
|
||
};
|
||
|
||
/**
|
||
* @static
|
||
* @method _createErrorPrinter
|
||
* @private
|
||
*/
|
||
Graphics._createErrorPrinter = function () {
|
||
this._errorPrinter = document.createElement("p");
|
||
this._errorPrinter.id = "ErrorPrinter";
|
||
this._updateErrorPrinter();
|
||
PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY).appendChild(
|
||
this._errorPrinter
|
||
);
|
||
};
|
||
|
||
/**
|
||
* @static
|
||
* @method _createCanvas
|
||
* @private
|
||
*/
|
||
Graphics._createCanvas = function () {
|
||
this._canvas = document.createElement("canvas");
|
||
this._canvas.id = "GameCanvas";
|
||
this._updateCanvas();
|
||
PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY).appendChild(
|
||
this._canvas
|
||
);
|
||
};
|
||
|
||
/**
|
||
* @static
|
||
* @method _createVideo
|
||
* @private
|
||
*/
|
||
Graphics._createVideo = function () {
|
||
this._video = document.createElement("video");
|
||
this._video.id = "GameVideo";
|
||
this._video.style.opacity = 0;
|
||
this._updateVideo();
|
||
PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY).appendChild(
|
||
this._video
|
||
);
|
||
};
|
||
|
||
/**
|
||
* @static
|
||
* @method _createUpperCanvas
|
||
* @private
|
||
*/
|
||
Graphics._createUpperCanvas = function () {
|
||
this._upperCanvas = document.createElement("canvas");
|
||
this._upperCanvas.id = "UpperCanvas";
|
||
this._updateUpperCanvas();
|
||
PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY).appendChild(
|
||
this._upperCanvas
|
||
);
|
||
};
|
||
|
||
/**
|
||
* @static
|
||
* @method _createModeBox
|
||
* @private
|
||
*/
|
||
Graphics._createModeBox = function () {
|
||
var box = document.createElement("div");
|
||
box.id = "modeTextBack";
|
||
box.style.position = "absolute";
|
||
box.style.left = "5px";
|
||
box.style.top = "5px";
|
||
box.style.width = "119px";
|
||
box.style.height = "58px";
|
||
box.style.background = "rgba(0,0,0,0.2)";
|
||
box.style.zIndex = 9;
|
||
box.style.opacity = 0;
|
||
|
||
var text = document.createElement("div");
|
||
text.id = "modeText";
|
||
text.style.position = "absolute";
|
||
text.style.left = "0px";
|
||
text.style.top = "41px";
|
||
text.style.width = "119px";
|
||
text.style.fontSize = "12px";
|
||
text.style.fontFamily = "monospace";
|
||
text.style.color = "white";
|
||
text.style.textAlign = "center";
|
||
text.style.textShadow = "1px 1px 0 rgba(0,0,0,0.5)";
|
||
text.innerHTML = this.isWebGL() ? "WebGL mode" : "Canvas mode";
|
||
|
||
PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY).appendChild(box);
|
||
box.appendChild(text);
|
||
|
||
this._modeBox = box;
|
||
};
|
||
|
||
/**
|
||
* @static
|
||
* @method _createFontLoader
|
||
* @param {String} name
|
||
* @private
|
||
*/
|
||
Graphics._createFontLoader = function (name) {
|
||
var div = document.createElement("div");
|
||
var text = document.createTextNode(".");
|
||
div.style.fontFamily = name;
|
||
div.style.fontSize = "0px";
|
||
div.style.color = "transparent";
|
||
div.style.position = "absolute";
|
||
div.style.margin = "auto";
|
||
div.style.top = "0px";
|
||
div.style.left = "0px";
|
||
div.style.width = "1px";
|
||
div.style.height = "1px";
|
||
div.appendChild(text);
|
||
PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY).appendChild(div);
|
||
};
|
||
|
||
/**
|
||
* @static
|
||
* @method _disableTextSelection
|
||
* @private
|
||
*/
|
||
Graphics._disableTextSelection = function () {
|
||
var body = PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY);
|
||
body.style.userSelect = "none";
|
||
body.style.webkitUserSelect = "none";
|
||
body.style.msUserSelect = "none";
|
||
body.style.mozUserSelect = "none";
|
||
};
|
||
|
||
/**
|
||
* @static
|
||
* @method _disableContextMenu
|
||
* @private
|
||
*/
|
||
Graphics._disableContextMenu = function () {
|
||
var elements = PluginManager.parameters(
|
||
GAME_ROOT_ELEMENT_NODE_KEY
|
||
).getElementsByTagName("*");
|
||
var oncontextmenu = function () {
|
||
return false;
|
||
};
|
||
for (var i = 0; i < elements.length; i++) {
|
||
elements[i].oncontextmenu = oncontextmenu;
|
||
}
|
||
};
|
||
|
||
/**
|
||
* @static
|
||
* @method _requestFullScreen
|
||
* @private
|
||
*/
|
||
Graphics._requestFullScreen = function () {
|
||
var element = PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY);
|
||
if (element.requestFullScreen) {
|
||
element.requestFullScreen();
|
||
} else if (element.mozRequestFullScreen) {
|
||
element.mozRequestFullScreen();
|
||
} else if (element.webkitRequestFullScreen) {
|
||
element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
|
||
} else if (element.msRequestFullscreen) {
|
||
element.msRequestFullscreen();
|
||
}
|
||
};
|
||
})();
|