DOM Element(s) as Message

Discussion in 'JS Plugins In Development' started by mogwai, Mar 30, 2017.

  1. mogwai

    mogwai 1984 Veteran

    Messages:
    876
    Likes Received:
    568
    Location:
    Bassett Nebraska
    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.
    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(commandargs) {
            
    _Game_Interpreter_pluginCommand.call(thiscommandargs);
            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"filetrue);
       
    xhr.onreadystatechange = function () {
               if(
    xhr.readyState === && 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 !== 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(xy) {
        return 
    document.getElementById("DOMElementWithText") === null &&
              (
    >= && this._width && >= && 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.
    [​IMG]
    [​IMG]
    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.
     
    Last edited: Apr 9, 2017
    #1
    shinichi999 and CriticalGames like this.
  2. CriticalGames

    CriticalGames Veteran Veteran

    Messages:
    217
    Likes Received:
    59
    Location:
    Australia
    First Language:
    English
    Wow! Well, as you can probably guess, I'm all for it haha =D As you say, it's pretty insane to have to do this to fix such a small issue (I imagine it would be an incredible amount of work), but if it solved the issue then that'd be fantastic. It's up to you (and how much time you have), but thanks for considering it and for these first steps!
     
    #2
  3. mogwai

    mogwai 1984 Veteran

    Messages:
    876
    Likes Received:
    568
    Location:
    Bassett Nebraska
    First Language:
    English
    Primarily Uses:
    RMMV
    @CriticalGames Thanks for your support.

    I really thought this script would be way over of my comprehension at first, but so far it's going swimmingly.

    I've just aliased a few function and I've made the Window_Base create a DIV node/element and the Bitmap.blt function now does _canvas.toDataURL("image/png") to set the CSS background for that DIV, and I can't believe I got this far in about 20 minutes.

    Lol, this screenshot looks ridiculous,
    [​IMG]

    EDIT: Here is another when I learned I'll need to do multiple backgrounds.
    [​IMG]

    EDIT EDIT: Instead of monkeying around with multiple backgrounds and blt, I just now changed it to grab the dataURL of the window's PIXI.container instead.
    [​IMG]

    EDIT 3:
    I really need to pretty up the text, but as proof of concept here is some fullscreen side by side.
    [​IMG]
    [​IMG]
    but this is the little green stem peaking through the soil that will become a tree that is a fully functional plugin.

    It doesn't look special, but it freaks me out knowing that is an element over the canvas instead.
    ----------------------------------------------------------------------

    EDIT 4: Well, I've completely crippled the Base_Window, but I'm getting it to appendChild textNodes instead of Bitmap fillText.
    Here are some pretty fullscreen comparisons.

    Before
    [​IMG]
    After
    [​IMG]



    Before
    [​IMG]
    pixel perfect
    [​IMG]
    This is a start. Now I've got to get all the Base_Window functionality into my element.

    Forgive my text stroke; it's not very good, but it's CSS so I'm going to make it work eventually.
     
    Last edited: Apr 5, 2017
    #3
  4. CriticalGames

    CriticalGames Veteran Veteran

    Messages:
    217
    Likes Received:
    59
    Location:
    Australia
    First Language:
    English
    Oh wow! That's amazing - so it definitely *can* be done then. I'm not going to pretend that I understand everything that you said, but the results speak for themselves haha. Fantastic work mogwai! =D You're honestly the first person I've seen make any headway on this.
     
    #4
  5. Nelderson

    Nelderson Coding Bitch Veteran

    Messages:
    156
    Likes Received:
    146
    Location:
    Rhode Island
    First Language:
    English
    Primarily Uses:
    RMMV
    Let me know how you make out with this. I'm currently trying to make a chat window for my MV online system, and the only way I can pull it off is using DOM elements over Windows and then make the DOM elements transparent. The main reason I have to use DOM elements is similar to what you mentioned above with overflow and text input as well.

    Even though you're more focused on blurring with bitmaps as the primary issue, there are other reasons to pursue this. Keep up the good work!
     
    #5
  6. mogwai

    mogwai 1984 Veteran

    Messages:
    876
    Likes Received:
    568
    Location:
    Bassett Nebraska
    First Language:
    English
    Primarily Uses:
    RMMV
    @Nelderson
    That's essentially what this is too though. It's an element. This is merely positioned from the x and y that would otherwise position the window sprite and the CSS backgroundImage is the base64 url of the window sprite canvas. This is going to be a whole Window_Base rewrite (and other Window_Base siblings?) using elements instead of the canvas.

    I'll attach the nonfunctional under development script if you want to see my aliases.

    When I get this finished down the road, it's not going to play well with any other message plugins, but look at it this way, we will be able to put html right in the message. Why not a <script> tag or even a fancy styled <a> tag that links to your blog? That will be handier than the event script for debugging because it won't rely on eval. I'll have to figure out how to parse the nodes yet. I'm just using createTextNode right now.

    -----------------------------------------

    EDIT: Day #3. Hour of tinkering and I finally got something similar to the text squeeze effect and the text outline in full CSS (no longer that nasty 360 shadow thing). The outline uses a psuedo element so I was scared that the text squeeze wasn't going to work, but it sure did!
    [​IMG]

    EDIT2: And now all elements are separately style sheet applicable. If you don't like an outline in your game, you will be able to alter/remove it without overwriting the engine javascript things.
    [​IMG]

    EDIT #3:
    This CSS is prettier and easier than canvas fillText, but I really need to work on the rest of the Window_Base that I crippled.
    [​IMG]

    EDIT: Day #4.
    I just learned an interesting thing about about how the Window Base draws the cursor with PIXI which might be considered for a micro-optimization using default Window Base... I mean the thing draws a new Window and a new Sprite every time the cursor moves instead of moving the one sprite.

    As proof of this, here is what it is doing to my HTML cursor which gets drawn on all these multiple _windowCursorSprite each time I move it up.
    [​IMG]
    Now I have to optimize how the system draws cursors before I can get the HTML cursor to work.

    EDIT 2: I just got the cursor to work. It is now an element just like the Window and its opacity is animated with CSS style.opacity instead of canvas PIXI alpha or whatever.
    Here is another side by side.
    [​IMG][​IMG]

    This attachment isn't the download. It was just the first workings of this, to show how I'm making the elements.

    EDIT : Day #5 and a half.
    This is going to take a long time. 5 days and I'm still on just the title screen.

    I realized I was grabbing only a texture instead of the whole window sprite, so now I grab the whole PIXI container canvas for the CSS background. That's how to get it in color.

    I've scrapped the DOM manipulation style.opacity for a cool CSS3 transition too.

    [​IMG]

    Here is just the CSS snippet.

    PHP:
    (function(){
       var 
    stroke "0.22ex rgba(0, 0, 0, 0.5)";
       var 
    title_stroke "0.20ex rgb(0, 0, 0)";
       var 
    window_transition "All 0.2s ease";
       var 
    fade_transition "All 0.5s ease";
       var 
    mar0pad0 document.createElement("style");
           
    mar0pad0.type "text/css";
           
    mar0pad0.appendChild(
               
    document.createTextNode([
                   
    // a little CSS reset
                   
    '*{padding:0;margin:0;}',
                   
    'html,body{width:100%;height:100%;overflow:hidden;}',
                   
    //  and some user CSS
                   
    '.Window_DOM{',
                       
    'background-repeat:no-repeat;',
                       
    'background-attachment:scroll;',
                       
    'background-size:100% 100%;',
                       
    'background-position:0 0;',
                       
    'position:absolute;',
                       
    'overflow:visible;',
                       
    'transform:scale(1,1);',
                       
    '-webkit-transition: ' window_transition ';',
                       
    '-moz-transition: ' window_transition ';',
                       
    '-ms-transition: ' window_transition ';',
                       
    '-o-transition: ' window_transition ';',
                       
    'transition: ' window_transition ';',
                   
    '}',
                   
    '.Window_DOM .Window_DOM.Element_Background,',
                   
    '.Window_DOM .Window_DOM.Element_Animated{',
                       
    'width:100%;',
                       
    'height:100%;',
                   
    '}',
                   
    '.Window_DOM .Text_Line{',
                       
    'overflow:visible;',
                       
    'position:absolute;',
                       
    'vertical-align:alphabetic;',
                       
    'top:0;',
                       
    'left:0;',
                       
    'right:0;',
                       
    'z-index:2;',
                       
    'width:100%;',
                   
    '}',
                   
    '.Window_DOM .Text_Cursor{',
                       
    'z-index:1;',
                   
    '}',
                   
    '.Window_DOM .Text_Line::before{',
                       
    'content:attr(data-self);',
                       
    'vertical-align:alphabetic;',
                       
    '-webkit-text-stroke:' stroke ";",
                       
    '-moz-text-stroke:'stroke ";",
                       
    '-ms-text-stroke:' stroke ";",
                       
    '-o-text-stroke:' stroke ";",
                       
    'text-stroke:' stroke ";",
                       
    'position:absolute;',
                       
    'top:0;',
                       
    'left: 0;',
                       
    'right: 0;',
                       
    'color:red;',
                       
    'z-index:-1;',
                   
    '}',
                   
    '.Window_DOM.gameTitleSprite .Text_Line::before{',
                       
    '-webkit-text-stroke:' title_stroke ";",
                       
    '-moz-text-stroke:'title_stroke ";",
                       
    '-ms-text-stroke:' title_stroke ";",
                       
    '-o-text-stroke:' title_stroke ";",
                       
    'text-stroke:' title_stroke ";",
                   
    '}',
                   
    '.Window_DOM .Text_Line.left, .Window_DOM .Text_Line.left::before{',
                       
    'text-align:left;',
                   
    '}',
                   
    '.Window_DOM .Text_Line.right, .Window_DOM .Text_Line.right::before{',
                       
    'text-align:right;',
                   
    '}',
                   
    '.Window_DOM .Text_Line.center, .Window_DOM .Text_Line.center::before{',
                       
    'text-align:center;',
                   
    '}',
                   
    '.Window_DOM .Text_Line.right::before{',
                       
    'right:0;',
                   
    '}',
                   
    '.Base_Window.Window_DOM.closed{',
                       
    'overflow:hidden;',
                       
    'transform:scaleY(0);',
                       
    'opacity:0;',
                       
    '-webkit-transition:' window_transition ';',
                       
    '-moz-transition:' window_transition ';',
                       
    '-ms-transition: ' window_transition ';',
                       
    '-o-transition: ' window_transition ';',
                       
    'transition:' window_transition ';',
                   
    '}',
                   
    '.Window_DOM.blur{',
                       
    '-webkit-filter:blur(2px);',
                       
    '-moz-filter:blur(2px);',
                       
    '-ms-filter:blur(2px);',
                       
    '-o-filter:blur(2px);',
                       
    'filter:blur(2px);',
                       
    'z-index:-1;',
                       
    '-webkit-transition:' window_transition ';',
                       
    '-moz-transition:' window_transition ';',
                       
    '-ms-transition: ' window_transition ';',
                       
    '-o-transition: ' window_transition ';',
                       
    'transition:' window_transition ';',
                   
    '}',
                   
    '.Text_Cursor.Element_Animated{',
                       
    'opacity:1;',
                       
    '-webkit-transition:' fade_transition ';',
                       
    '-moz-transition:' fade_transition ';',
                       
    '-ms-transition:' fade_transition ';',
                       
    '-o-transition:' fade_transition ';',
                       
    'transition:' fade_transition ';',
                   
    '}',
                   
    '.Text_Cursor.Element_Animated.dim{',
                       
    'opacity:0.3;',
                       
    '-webkit-transition:' fade_transition ';',
                       
    '-moz-transition:' fade_transition ';',
                       
    '-ms-transition:' fade_transition ';',
                       
    '-o-transition:' fade_transition ';',
                       
    'transition:' fade_transition ';',
                   
    '}',
                   
    '#DIV_Nodes_Container{',
                       
    'z-index:999;',
                   
    '}',
                   
    '.Base_Window{',
                       
    'opacity:1;',
                       
    'top:0;',
                       
    'left:0;',
                       
    'right:0;',
                       
    'bottom:0;',
                   
    '}',
                   
    /* put special css here ^           * /
                   '#DIV_Nodes_Container *{',
                       'border:1px solid rgba(255,0,255,0.5);', // debug
                   '}'
                   /**/
               
    ].join(""))
           );
       
    document.head.appendChild(mar0pad0);
    })();

    EDIT: Day #6. I was going to use vw, vh, or vmin and vmax and pure css animations, instead of px and DOM manipulation animations, and I kinda got it to work too, but I've decided to revert my source to the DOM manipulation version. Resizing the window won't be often throughout a game I hope and I really don't trust that this newer CSS will work with everything. For instance I had to declare a @keyframes and a @-webkit-keyframes... and that's a sign it's not going to work on everything.

    EDIT 2: This PIXI renderer is a mystery. If I don't render it before I convert in to a base64 image, then it comes out this color.
    [​IMG]
    And if I render it before I convert it to a base64 image, it comes out this color.
    [​IMG]
    But it's supposed to be this color.
    [​IMG]

    EDIT #3
    The Bitmap.clearRect that erases contents fillText intuitively by x, y, width, and height is a new snag. I don't know how I'm going to get around this conundrum without a good night's sleep and a cup of coffee in the morning.
    [​IMG]

    EDIT: I deleted the attached JS, because I keep updating it and I don't want to keep uploading a nonfunctional version, but take my word for it: I've perfected the cursor animation and the menu open/close animation in pure CSS, and the first menu is done. 6 days... I've also created a better parent element / child element system for easier CSS menu/Window styling.
     
    Last edited: Apr 6, 2017
    #6
    CriticalGames likes this.
  7. mogwai

    mogwai 1984 Veteran

    Messages:
    876
    Likes Received:
    568
    Location:
    Bassett Nebraska
    First Language:
    English
    Primarily Uses:
    RMMV

    I've made a video demonstrating the superior design/debugging capabilities of HTML elements as opposed to one flat canvas (you can't do this in GameCanvas), using the Dev Tools element inspector. I hope to make designing menus/messages as easy as designing a blog theme

    This script is progressing like molasses, but I'm working on it and learning every day.

    EDIT: Day #7 - I'm still on the title menu. Now it's finally done. I tore down the whole element system and created relative containers. As you see in this video every thing was absolute positioned, which based on the Sprite x/y, this was harder to get every Element into the exact right place. As you know with CSS a tucked relative container, will hold the x/y top/left exact to it's Sprite location. This is a score for accuracy, but I'm still on the title menu after a week.
    [​IMG]
    [​IMG]

    EDIT 2: And I'm now just appending the extracted PIXI container and Bitmap._canvas into the Window background container instead of converting to a base64 dataURL. I had the big nasty background-image in the dev tools element inspector in mind when I did this. That giant dataURL tends to get in the way for web design purposes.
     
    Last edited: Apr 7, 2017
    #7
    CriticalGames likes this.
  8. mogwai

    mogwai 1984 Veteran

    Messages:
    876
    Likes Received:
    568
    Location:
    Bassett Nebraska
    First Language:
    English
    Primarily Uses:
    RMMV
    I made a video in HD to show the quality difference in the text. I hope Youtube doesn't fub the quality.

    I solved the contents.clearRect conundrum and I'm am now fully done with at least two menus.

    The window opacity is still a mystery. It seems to come out of the _windowSpriteContainer with slightly less translucency. All in a days work; still doing things.
    ________________________________________________________
    EDIT: It's Friday. Week#2 Day#9...
    I'm done with the continue saved game list and the game settings menu... Now I'm breaking into the in-game menus. My positioning is a little screwed up because I'm using a container system of
    PHP:
    Absolute
       
    Relative
            
    Absolute
                
    Relative
                    
    Absolute
    And this gets all the contents in perfect position based on where the sprite Windows would otherwise appear, except I didn't take into account the >Relative positions honor the other >Relative elements even though they have different parents. This is all web design stuff. I can fix it easy, but look at the mess these multiple >Relative menus make.

    What a mess right now!
    It looks like I absolute-ly need just one more relative container...
    The light blue rectangle is just from the Dev Tools element inspector.

    [​IMG]

    I also need to clear that game title when I pop scene, but that's no problem.

    EDIT 2: Thankfully, it wasn't relative positioned divs responding to relative divs in other containers, and my CSS understanding has not been rocked afterall. It was just that I was setting style.left for this.x on the child bitmap and the this.x on the parent sprite and it was going double left, and top and so forth.

    Day #10. I spent all morning renaming my CSS classNames because it looked ugly in the element inspector, too big; took up too much room. I also realized that my CSS was using too many * wildcards as it easily breaks it when you try to make new classNames. So I cleaned up my CSS. It's no more functional now, but it's really pretty. Also, for identification purposes, each window has the classNames of its window classes.
    [​IMG]
    [​IMG]

    EDIT: I tackled the game menu. It doesn't look like much, because it's pretty much the same game menu, but I hope the text quality and and the element inspector scream the possibilities about this plugin.

    Screenshots of today's progress.
    [​IMG]
    [​IMG]

    EDIT: #3
    I'm going to have trouble with the dimmerSprite, so I'm playing around with some CSS filters. As I'm doing this it occurred to me that I've made a className for all the window and its properties, like "blur" and "inactive" so just to show the power of DOM and CSS with one line of CSS I created a darker style for the inactive window.
    [​IMG]
    MV doesn't do that without a complicated plugin. I'm a web designer so my plugin is simple.

    This makes me want to include a custom CSS file for the plugin user to write their own window styles for menus and messages and stuff. I'm going to need to include dummy elements for each layer of which you will be able to add your own background or whatever.

    EDIT: at the end of the day everything is mostly... I still have problems like a mysterious empty gold window element hovering over the game. I'll have to figure that out.

    The biggest mystery is how to get the pixi shader into CSS. I just played around with CSS and it is possible to emulate it.
    [​IMG]
    But now I have to find it out what the saturate and brightness is.
     
    Last edited: Apr 9, 2017
    #8
    CriticalGames likes this.
  9. CriticalGames

    CriticalGames Veteran Veteran

    Messages:
    217
    Likes Received:
    59
    Location:
    Australia
    First Language:
    English
    As usual, I don't understand half of what you said, but the results speak for themselves. It's ridiculous that you've basically got to incorporate a whole new system (CSS) to get pixel perfect text, but bravo for getting it working so far! =D
     
    #9
  10. mogwai

    mogwai 1984 Veteran

    Messages:
    876
    Likes Received:
    568
    Location:
    Bassett Nebraska
    First Language:
    English
    Primarily Uses:
    RMMV
    @CriticalGames The pixel perfect text is just plain ol' system/browser vector/otf/ttf drawn text instead poorly scaling rendered image text. The CSS style is just the icing on the cake. I needed to html the window backgrounds or else the background text would be on the inappropriate layer above them.

    Here's a neat thing I discovered. https://css-tricks.com/snippets/css/gradient-text/
    You can create text gradient like RM2K3 had. MV uses a webkit browser, but I've played with this nonstandard and it also works in Firefox.
     
    Last edited: Apr 10, 2017
    #10
  11. CriticalGames

    CriticalGames Veteran Veteran

    Messages:
    217
    Likes Received:
    59
    Location:
    Australia
    First Language:
    English
    @mogwai - Aha, right. Okay thanks - that makes more sense now!

    Oh cool, I remember messing around with that in 2K3. Obviously this method opens up a ton of new possibilities and options for text then =D
     
    #11
  12. mogwai

    mogwai 1984 Veteran

    Messages:
    876
    Likes Received:
    568
    Location:
    Bassett Nebraska
    First Language:
    English
    Primarily Uses:
    RMMV
    I've decided to hand in a nonfunctional pre-Beta for your inspection. I realized I've been posting all these samples with no proof (it looks like it could be Photoshopped for all anyone knows)

    Test this plugin if you'd like, and it should work on the main-menu, saved-game menu, game-message?, and game-menu.

    TODO list
    • text clearRect (partially nonfunctional)
    • battle menus (still nonfunctional)
    • loads of fancy custom CSS
    • stores/inns (still nonfunctional?)
    It's a rewrite of the Base_Window so don't try it on a game with message/menu plugins (it will break); better yet just create a new project as a slug to test with.

    Best feature so-far: Press F8 and use the element inspector.
    Coolest feature so-far: Crisp browser text in full screen.
     

    Attached Files:

    Last edited: Apr 26, 2017
    #12
    CriticalGames likes this.
  13. CriticalGames

    CriticalGames Veteran Veteran

    Messages:
    217
    Likes Received:
    59
    Location:
    Australia
    First Language:
    English
    That's awesome mogwai - thank you very much for the test plugin! I've been giving it a quick test drive, and it definitely works...at a basic level, anyway haha. Unfortunately, even testing it on a new, fresh project, it doesn't remove the anti-aliasing on text. And when I take it into full-screen mode (using F4), the windows don't resize from when I was in windowed mode. So when I initially go into full-screen, everything is too small. And then when I leave full-screen and go back to windowed mode, everything is giant haha.

    On the bright side, though, even when I imported this plugin into my actual project (which contains several message plugins, such as Yanfly's Message Core), it still worked; the message commands were still functional and everything displayed normally. So it may not break things quite as much as you think =D

    In regards to the previous issues, it's quite possible that I've done something horribly wrong (it wouldn't be the first time!), but those are my initial impressions. It's a good first step, that seems to integrate pretty well with my other plugins. You've done a great job so far mogwai!
     
    #13
  14. mogwai

    mogwai 1984 Veteran

    Messages:
    876
    Likes Received:
    568
    Location:
    Bassett Nebraska
    First Language:
    English
    Primarily Uses:
    RMMV
    @CriticalGames
    Odd that the anti-aliasing doesn't disappear.... =/
    Would you test something for me and paste this in your F8 dev tools console at the title screen, and post a screenshot of the text?
    PHP:
    document.body.innerHTML '<h1 style="color:#fff;font-size:600px;">Hi!</h1>';
     
    #14
  15. CriticalGames

    CriticalGames Veteran Veteran

    Messages:
    217
    Likes Received:
    59
    Location:
    Australia
    First Language:
    English
    Sure thing! Here's the picture:

    Hi Anti-Aliasing Test.png

    Please just let me know if you need me to test anything else =)
     
    #15
  16. mogwai

    mogwai 1984 Veteran

    Messages:
    876
    Likes Received:
    568
    Location:
    Bassett Nebraska
    First Language:
    English
    Primarily Uses:
    RMMV
    There is a nonstandard CSS option for super crisp anti-smoothing.
    PHP:
    document.body.innerHTML '<h1 style="color:#fff;font-size:600px;-webkit-font-smooth:none;font-smooth:none;">Hi!</h1>';
    That should be as crisp as any renderer will draw fonts, of which vector TTF will always have subpixel guesswork based on the math.

    Food for thought: I'm a child of the 80's and classic Nintendo and arcade games weren't pixelated because it was on a low-res TV blurred into round shapes. If the pixels were going out, Mario left red streaks when he ran.

    I still think it's better than this canvas fillText on zoom.
     

    Attached Files:

    #16
  17. CriticalGames

    CriticalGames Veteran Veteran

    Messages:
    217
    Likes Received:
    59
    Location:
    Australia
    First Language:
    English
    I have to apologise, actually - I just did a direct comparison in an image-editing program, and the text *does* look significantly clearer and cleaner than it did before in full-screen mode. So it is a definite improvement there, like you said =D

    Thanks for the code! I tried it, and I agree; when the text is giant like that, it looks quite good (and your screenshot provides a very stark comparison). But there is still anti-aliasing going on. I actually find the anti-aliasing much more noticeable on normal-sized text in windowed mode. Just out of interest, is there a way I can make it so that the text windows aren't partially transparent? I tried looking for a window opacity setting in the plugin, but I couldn't find exactly how to do it. Simply because that's how my text windows are done; they're a flat black background.

    I do think that's a valid point about CRT screens never delivering a pixel-perfect image (I know that several games were designed with that streak effect/blurriness in mind). But for me, everything else in my game is pixel-perfect, and that's a big part of the aesthetic. So that's what I'm personally trying to achieve. I'm also using fonts which just look better/more readable when they're displayed correctly, and that means pixel-perfect. But that's just me =)
     
    #17
  18. mogwai

    mogwai 1984 Veteran

    Messages:
    876
    Likes Received:
    568
    Location:
    Bassett Nebraska
    First Language:
    English
    Primarily Uses:
    RMMV
    I will need to make many bonus features and settings since I'm replacing Window_Base and it will break other message/menu plugins.
    These are elements, so the most easy way to customize is with CSS.
    style="background:blue;" for instance is solid and won't have transparency; it's easy as that.

    Without the DOM plugin, you can already do...
    PHP:
    Object.defineProperty(Window.prototype'opacity', {
        
    get: function() {
            return 
    this._windowSpriteContainer.alpha 255;
        },
        
    set: function(value) {
            
    this._windowSpriteContainer.alpha 1// value.clamp(0, 255) / 255;
        
    },
        
    configurabletrue
    });
    Object.defineProperty(Window.prototype'backOpacity', {
        
    get: function() {
            return 
    this._windowBackSprite.alpha 255;
        },
        
    set: function(value) {
            
    this._windowBackSprite.alpha =  1// value.clamp(0, 255) / 255;
        
    },
        
    configurabletrue
    });
    Object.defineProperty(Window.prototype'contentsOpacity', {
        
    get: function() {
            return 
    this._windowContentsSprite.alpha 255;
        },
        
    set: function(value) {
            
    this._windowContentsSprite.alpha =  1// value.clamp(0, 255) / 255;
        
    },
        
    configurabletrue
    });
     
    #18
    CriticalGames likes this.
  19. CriticalGames

    CriticalGames Veteran Veteran

    Messages:
    217
    Likes Received:
    59
    Location:
    Australia
    First Language:
    English
    Oh, I'm sorry - I just meant in regards to the DOM plugin. I always have it set to a flat colour with no transparency normally, but once I added the plugin, it (naturally) took priority over Window_Base like you said. Thanks for the code though =)

    I tried using the CSS command in the F8 window, and it was accepted, but didn't seem to do anything. I'm probably putting it in the wrong place, but it doesn't really matter - I just asked because I figured it would be simple, and would let me test out how the text looks under my normal configuration. But that's probably not a concern anyway at this stage haha. Thanks again!
     
    #19
  20. mogwai

    mogwai 1984 Veteran

    Messages:
    876
    Likes Received:
    568
    Location:
    Bassett Nebraska
    First Language:
    English
    Primarily Uses:
    RMMV
    I'm sorry. That's actually just an element attribute so it will only make a string named style in the console.

    I'm going to make my thing accept custom CSS full-game and window-selectively, and of course options to override window translucency at the canvas level.

    I don't recommend making this pre beta version part of your game as it's just an example, and much yet is still not functional.
     
    #20
    CriticalGames likes this.

Share This Page