Dynamic game resolution sizing

KuroyukiDevGames

Silver Kyuubi Sage
Member
Joined
Aug 18, 2019
Messages
9
Reaction score
2
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.
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,606
Reaction score
1,399
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 scaleX, scaleY, scale, center;
        scaleX = window.innerWidth / canvas.offsetWidth;
        scaleY = window.innerHeight / canvas.offsetHeight;
        scale = Math.min(scaleX, scaleY);
        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 = 0 + "px";canvas.style .marginBottom = 0 + "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 = 0 + "px";canvas.style.paddingRight  = 0 + "px";
        canvas.style.paddingTop  = 0 + "px";canvas.style.paddingBottom = 0 + "px";
        canvas.style.display = "-webkit-inline-box";
        return scale;
    };
in this case, this extend pixi application
 

KuroyukiDevGames

Silver Kyuubi Sage
Member
Joined
Aug 18, 2019
Messages
9
Reaction score
2
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?
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,606
Reaction score
1,399
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
 

KuroyukiDevGames

Silver Kyuubi Sage
Member
Joined
Aug 18, 2019
Messages
9
Reaction score
2
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?
 

KuroyukiDevGames

Silver Kyuubi Sage
Member
Joined
Aug 18, 2019
Messages
9
Reaction score
2
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!
 

KuroyukiDevGames

Silver Kyuubi Sage
Member
Joined
Aug 18, 2019
Messages
9
Reaction score
2
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.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

redrawing one of three my VNM protags
I'm making my game in both English and Portuguese. I wonder if I should add Spanish too? :v
Thinking about picking up Luna Engine, but also wondering if I should wait to see if it goes on sale.
So looks like the last Star Wars movie sucked. We feared George would kill his own legacy after Episode 1. But look like he handed off to others to put it out of its misery. Does that count as assisted suicide?
Brother made thumbnails for my Lets Plays. He's a swood dude.

Forum statistics

Threads
93,703
Messages
914,796
Members
123,309
Latest member
PeachParfait
Top