RPG Maker Forums

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.
  1. 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.
  2. The quality-
    Canvas fillText looks ok small size, but it's fuzzy/blurry on fullscreen/zoom.
So this is the plugin me and @shinichi999 buffered out in this thread: Text Plugin Doubt It was his idea/request

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.
Code:
loadTXTfile anyTextFile.txt
or by event script
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);
};
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.

Latest Threads

Latest Profile Posts

Frostorm wrote on Featherbrain's profile.
Hey, so what species are your raptors? Any of these?
... so here's my main characters running around inside "Headspace", a place people use as a safe place away from anxious/panic related thinking.
Stream will be live shortly! I will be doing some music tonight! Feel free to drop by!
Made transition effects for going inside or outside using zoom, pixi filter, and a shutter effect
I have gathered enough feedback from a few selected people. But it is still available if you want to sign up https://forums.rpgmakerweb.com/index.php?threads/looking-for-testers-a-closed-tech-demo.130774/

Forum statistics

Threads
105,992
Messages
1,018,189
Members
137,771
Latest member
evoque
Top