- Joined
- Jun 10, 2014
- Messages
- 875
- Reaction score
- 591
- First Language
- English
- Primarily Uses
- RMMV
DOM elements aren't typically webgame friendly. I guess they are more resource intensive than what goes on in a canvas element (phones maybe? Don't computers have at least 800 megahertz anymore?), but I've been beating around a few concepts.
EDIT: I'm now working on a second plugin that makes all the game text/Windows into DOM elements. This 1st plugin only creates one DOM message from a txt file.
This is the final; that thread has about 5 incomplete versions.
What it does is creates an element above the canvas, but to the average game player it just looks like a big message and it can be dressed up with HTML and CSS. It can be as pretty as any website you've ever seen.
Thanks to shinichi's help debugging, this element is cancel-able by button or mouse/touch outside the element, just like a message, but this is all that it does: creates one element from different text files.
I'm thinking why stop there? There is another thread by @CriticalGames about the blur of canvas fillText in fullscreen. I was unable to remove it. Removing Font Blur ... I think it's impossible in all browsers on browser scale with fillText. EDIT: I'm now making this a new plugin.
So my goal for this plugin, is ultimately to replace all of the game fillText with DOM text. It's a bit of an insane measure and it will be a huge project and only to merely remove anti-aliasing about 1 pixel big.
But for another member, I spent a week and wrote over 1000 lines, just to give her 1 special random game actor for her game.
EDIT: This 2nd plugin is going to be in the works for a while. I'll keep posting about my progress to keep me motivated.
- The style-
CSS can dress up any text without delving deep into the rpg_windows.js, etc.
Overflow:auto can give natural touch/mouse/mouse-wheel/keyboard scrolling.
- The quality-
Canvas fillText looks ok small size, but it's fuzzy/blurry on fullscreen/zoom.
EDIT: I'm now working on a second plugin that makes all the game text/Windows into DOM elements. This 1st plugin only creates one DOM message from a txt file.
This is the final; that thread has about 5 incomplete versions.
Call by plugin command.
or by event script
Code:
loadTXTfile anyTextFile.txt
Code:
loadTXTfile("anyTextFile.txt");
PHP:
var _Game_Interpreter_pluginCommand = Game_Interpreter.prototype.pluginCommand;
Game_Interpreter.prototype.pluginCommand = function(command, args) {
_Game_Interpreter_pluginCommand.call(this, command, args);
if (command.toLowerCase() === "loadtxtfile") {
loadTXTfile(args);
}
};
var loadTXTfile = function(file){
if($gamePlayer.canMoveAfterTxt === undefined){
$gamePlayer.canMoveAfterTxt = $gamePlayer.canMove;
Input._shouldPreventDefaultAfterTxt = Input._shouldPreventDefault;
}
var xhr = new XMLHttpRequest();
xhr.open("GET", file, true);
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.responseText.length > 0) {
removeTXTelement();
$gamePlayer.canMove = function(){
return false;
};
Input._shouldPreventDefault = function(){
return false;
};
// create element
var div = document.createElement("div");
// style element
var css = {
width:"420px",
maxHeight:"420px",
overflow:"auto",
background:'url("img/pictures/paper.png") 0 0 scroll #fff',
color:"#000",
fontFamily:'"Lucida Console", Monaco, monospace',
fontSize:"18px",
position:"fixed",
left:"50%",
borderRadius:"5px",
padding:"15px",
border:"3px solid #000",
boxShadow:"-3px 3px 50px #000",
top:"50%",
marginLeft:"-210px",
marginTop:"-210px",
zIndex:99999
};
for(sty in css){
div.style[sty] = css[sty];
}
div.id = "DOMElementWithText";
// give the element the text of the text file
div.innerHTML = xhr.responseText.replace(/\n/g, "<br>");
document.body.appendChild(div);
document.getElementById("DOMElementWithText").focus();
window.addEventListener("keyup", removeTXTelement);
Input._isEscapeCompatible = function(){
return false;
}
}
};
xhr.send();
};
Input._isEscapeCompatibleOnAgain = Input._isEscapeCompatible;
var txtOpenInAction = false;
var removeTXTelement = function(e){
var ok = e !== undefined &&
(
Input.keyMapper[e.keyCode] === "ok" ||
Input.keyMapper[e.keyCode] === "escape"
);
if(ok && !txtOpenInAction){
txtOpenInAction = true; // prevents from closing right when open
} else if(ok && txtOpenInAction){
txtOpenInAction = false;
window.removeEventListener("keyup", removeTXTelement);
$gamePlayer.canMove = $gamePlayer.canMoveAfterTxt;
Input._isEscapeCompatible = Input._isEscapeCompatibleOnAgain;
Input._shouldPreventDefault = Input._shouldPreventDefaultAfterTxt;
if(document.getElementById("DOMElementWithText") !== null)
document.getElementById("DOMElementWithText").parentNode.removeChild(
document.getElementById("DOMElementWithText")
);
}
};
Scene_Map.prototype.updateCallMenu = function() {
if (this.isMenuEnabled() && (document.getElementById("DOMElementWithText") === null)) {
if (this.isMenuCalled()) {
this.menuCalling = true;
}
if (this.menuCalling && !$gamePlayer.isMoving()) {
this.callMenu();
}
} else {
this.menuCalling = false;
}
};
TouchInput._setupEventHandlers = function() {
document.addEventListener('mousedown', this._onMouseDown.bind(this));
document.addEventListener('mousemove', this._onMouseMove.bind(this));
document.addEventListener('mouseup', this._onMouseUp.bind(this));
// document.addEventListener('wheel', this._onWheel.bind(this));
document.addEventListener('touchstart', this._onTouchStart.bind(this));
document.addEventListener('touchmove', this._onTouchMove.bind(this));
document.addEventListener('touchend', this._onTouchEnd.bind(this));
document.addEventListener('touchcancel', this._onTouchCancel.bind(this));
document.addEventListener('pointerdown', this._onPointerDown.bind(this));
};
var cancelElementOnClick = function(e){
var target = e.target;
while(target.parentNode !== null && target.id !== "DOMElementWithText")
target = target.parentNode;
if(document.getElementById("DOMElementWithText") !== null && target.id !== "DOMElementWithText"){
txtOpenInAction = true;
removeTXTelement({keyCode:13});
}
};
window.addEventListener('touchstart', cancelElementOnClick);
window.addEventListener('mouseup', cancelElementOnClick);
Graphics.isInsideCanvas = function(x, y) {
return document.getElementById("DOMElementWithText") === null &&
(x >= 0 && x < this._width && y >= 0 && y < this._height);
};I'm thinking why stop there? There is another thread by @CriticalGames about the blur of canvas fillText in fullscreen. I was unable to remove it. Removing Font Blur ... I think it's impossible in all browsers on browser scale with fillText. EDIT: I'm now making this a new plugin.
So my goal for this plugin, is ultimately to replace all of the game fillText with DOM text. It's a bit of an insane measure and it will be a huge project and only to merely remove anti-aliasing about 1 pixel big.
But for another member, I spent a week and wrote over 1000 lines, just to give her 1 special random game actor for her game.
EDIT: This 2nd plugin is going to be in the works for a while. I'll keep posting about my progress to keep me motivated.
Last edited:
