266 lines
9.0 KiB
JavaScript
266 lines
9.0 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();
|
||
}
|
||
};
|
||
})();
|