Dynamic game resolution sizing

Discussion in 'RPG Maker MV' started by KuroyukiDevGames, Sep 1, 2019.

  1. KuroyukiDevGames

    KuroyukiDevGames Silver Kyuubi Sage Member

    Messages:
    7
    Likes Received:
    0
    First Language:
    English
    Primarily Uses:
    RMMV
    I'm using Yanfly's Core Engine plugin and i was wondering if there was a way to dynamically set the game's resolution (the height and width values of the game content) to stretch to the max dimensions of the game window instead of setting it as static values like 1920 x 1080 or 1280 x 720? I'd like to avoid the issue of having a massive black gap around a shrunken map view on offbeat PC resolutions. I have a friend who's laptop has a max default resolution of 1366 x 768 and the game looks fine on my 1080 x 1920 PC but the game maps and content look quite shrunken on his laptop even though the game window is correctly sized.

    I am a JavaScript programmer, so if you know any solutions that use that, I'm cool with that or if there's a different way please let me know. Thanks for your time.
     
    #1
  2. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,586
    Likes Received:
    1,365
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    hack css and the canvas

    PHP:
        requestFullScreen() {
            var 
    element document.body;
            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();
            }
            
    this._fullScreen true;
        };

        
    cancelFullScreen() {
            if (
    document.cancelFullScreen) {
                
    document.cancelFullScreen();
            } else if (
    document.mozCancelFullScreen) {
                
    document.mozCancelFullScreen();
            } else if (
    document.webkitCancelFullScreen) {
                
    document.webkitCancelFullScreen();
            } else if (
    document.msExitFullscreen) {
                
    document.msExitFullscreen();
            }
            
    this._fullScreen false;
        };
       

        
    scaleToWindow() {
            const 
    canvas this.view;
            
    let scaleXscaleYscalecenter;
            
    scaleX window.innerWidth canvas.offsetWidth;
            
    scaleY window.innerHeight canvas.offsetHeight;
            
    scale Math.min(scaleXscaleY);
            
    canvas.style.transformOrigin "0 0";
            
    canvas.style.transform "scale(" scale ")";
            if (
    canvas.offsetWidth canvas.offsetHeight) {
            if (
    canvas.offsetWidth scale window.innerWidth) { center "horizontally" }
            else { 
    center "vertically" };
            } else {
            if (
    canvas.offsetHeight scale window.innerHeight) { center "vertically" }
            else { 
    center "horizontally"; };
            };
            
    let margin;
            if (
    center === "horizontally") {
                
    margin = (window.innerWidth canvas.offsetWidth scale) / 2;
                
    canvas.style .marginTop "px";canvas.style .marginBottom "px";
                
    canvas.style .marginLeft margin "px";canvas.style .marginRight margin "px";
            };
            if (
    center === "vertically") {
                
    margin = (window.innerHeight canvas.offsetHeight scale) / 2;
                
    canvas.style .marginTop  margin "px";canvas.style .marginBottom margin "px";
                
    canvas.style .marginLeft 0      "px";canvas.style .marginRight  0      "px";
            };
            
    canvas.style.paddingLeft "px";canvas.style.paddingRight  "px";
            
    canvas.style.paddingTop  "px";canvas.style.paddingBottom "px";
            
    canvas.style.display "-webkit-inline-box";
            return 
    scale;
        }; 
    in this case, this extend pixi application
     
    #2
    KuroyukiDevGames likes this.
  3. KuroyukiDevGames

    KuroyukiDevGames Silver Kyuubi Sage Member

    Messages:
    7
    Likes Received:
    0
    First Language:
    English
    Primarily Uses:
    RMMV
    I understand that JS code, but where do I inject/add it to make it work? Do I need to create a new plugin using that solution or is there a specific preexisting .js file to add it to?
     
    #3
  4. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,586
    Likes Received:
    1,365
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    yes and no, it will depend on how you hack your rmmv projet.
    but yes you can made a new js plugin and experiment.
    Just don't forget to replace in this case the event
    `
    document.body.onresize = () => { this.scaleToWindow() };
    `
    So when nwjs detect a resize, you hack and apply new css setup
     
    #4
  5. KuroyukiDevGames

    KuroyukiDevGames Silver Kyuubi Sage Member

    Messages:
    7
    Likes Received:
    0
    First Language:
    English
    Primarily Uses:
    RMMV
    Oh i get it now. the engine will see the document.body.onresize and then the arrow function its set equal to will trigger which will trigger the entire block of code? how are the individual functions supposed to trigger without a function call? do the function calls o inside the body of the arrow function? that seems like it might work.... your thoughts?
     
    #5
  6. KuroyukiDevGames

    KuroyukiDevGames Silver Kyuubi Sage Member

    Messages:
    7
    Likes Received:
    0
    First Language:
    English
    Primarily Uses:
    RMMV
    Oh never mind that above question i just asked. I understand how that code works now. Thanks for your help!
     
    #6
  7. KuroyukiDevGames

    KuroyukiDevGames Silver Kyuubi Sage Member

    Messages:
    7
    Likes Received:
    0
    First Language:
    English
    Primarily Uses:
    RMMV
    On second thought.... this code you gave me might take some extensive experimenting to get it to work. Is there a currently working solution for this that I can simply "drop in" and have it working right out of the box? My game's release date is on September 30th and I have more work to do on it. I don't really have time to be inventing a custom solution... after the game's demo is released and the full version is closer to deployment status, I'll go back to experimenting with that code.
     
    #7

Share This Page