Low resolution, scaled game

Uhfgood

Member
So basically I've been looking at various scaling tutorials and a lot of it seems a bit over my head. I'm creating a non-scrolling (static screen) game. I'm going to use a resolution of 135x240 (16:9 or technically 9:16 aspect in portrait mode). I don't mind if there are black bars on the left/right sides (ie pillar/pill boxing). I would like my game to scale the largest height that can fit on the display. It might not be very easy to make it scale on an html5 game as well as a phone game. A web page can be any length pretty much and obviously don't want it to run off the screen. Really just planning for html5 and android. I'm not really sure where I should start.

Like I said I've looked at a number of scaling tutorials and they're a little bit... hmm... thinking heavy. You could say I'm not really that great in the thinking department ;-)

So any ideas on how I should go about scaling my game? Or maybe a tutorial that's simple to understand? or even just suggestions and tips (for instance, just plan on scaling 2x for html5 or whatever)
 

Hyomoto

Member
Scaling can be a huge pain in the butt, but here's the script I personally use:

Code:
/// null resolution_set( width, height, aspect, fullscreen)
//   sysObj_main :: script; sets up the selected resolution.  If aspect is false, it will adjust the
// screen size to match the screen while maintaining scaling.  Otherwise it will simply scale
// it normally.  If fullscreen is false, it will also scale the game window and center it on the
// display.  You can adjust _screenScaleBuffer to decide what percent of the display
// it should attempt to fill.  Scaling the window is always to the nearest pixel to avoid artifacts.
var _id, _scale, _ratio, _displayW, _displayH, _viewW, _viewH, _fullscreen, _aspect;
var _screenScaleBuffer = 2;

// # script start
// ------------------------------------------------------------------
var _displayW = display_get_width();
var _displayH = display_get_height();

var _aspect     = argument2;
var _fullscreen = argument3;
var _ratio, _scale;

// # aspect ratio correction
switch ( _aspect ) {
    case true :
        _ratio = min( argument0 / _displayW, argument1 / _displayH );
        _viewW = argument0;
        _viewH = argument1;
        break;
   
    case false :
        switch ( _displayW / argument0 > _displayH / argument1 ) {
            case true :
                _ratio = argument0 / _displayW;
                _viewW = argument0;
                _viewH = floor( _displayH * _ratio );
                break;
           
            case false :
                _ratio = argument1 / _displayH;
                _viewW = floor( _displayW * _ratio );
                _viewH = argument1;
                break;
           
        }
        break;

}
// # surface and room resize
surface_resize( application_surface, _viewW, _viewH );

room_width = _viewW; room_height = _viewH;

// # window scaling / fullscreen
switch ( _fullscreen ) {
    case true :
        window_set_fullscreen( true );
        break;
   
    case false :
        _scale = max( 1, floor( 1 / _ratio * _screenScaleBuffer ) );
   
        window_set_rectangle( ( display_get_width() - _viewW * _scale ) div 2, ( display_get_height() - _viewH * _scale ) div 2, _viewW * _scale, _viewH * _scale );
        break;
   
}
You asked for an explanation so I'll post that next.
 
Last edited:

Hyomoto

Member
In order to scale your screen you simply must change the shape of the display, and the size of the application surface. So, that's really all this script does. The purpose of all the other stuff is basically to handle scaling the game window and changing the aspect ration to match that of the monitor. It will also scale the game window to fit more of the screen if it is too small, and you can adjust _screenScaleBuffer to decide by how many times it can scale. The script is a bit unfinished since there are tons of edge cases that it doesn't account for but most my projects recently have been simple and so this suits my needs. However, that's hardly a good learning reference is it? So let's look at how it works a bit more in-depth:

The first thing, and importantly, is I always include a header on my scripts. This allows me, and by extension you, to see what exactly this script does. The first line lets me know it won't return any values (null) followed by the script name and it's expected arguments. If you don't know, the benefit of using "///" this way means this function will be added to auto-complete just like the built-in functions. Next I label what object I expect this to be called in and in what capacity, this is a personal preference but I follow it with a description so later on I'll remember what it should be doing.

Now we get to the script itself. I set some variables to the display width and height, as well as give names to the arguments I've passed, these are use for scaling the game window or matching the display ratio. Now, if I want to maintain my aspect ratio, it simply scales the game up normally (in fullscreen you'd get black bars), but if I don't then the game first decides if the screen is longer or taller (essentially portrait or landscape) and use that to have the other measurement scaled to match the ratio of the screen. The purpose of this is when you go fullscreen it will completely fill the display, but it will also have that aspect ratio in windowed mode.

After that it sets the application surface to match my new width and height, and lastly checks if I wanted it to go fullscreen. If yes, it does, and if not it scales the window and centers it on the display.

Hopefully that helps you out a bit! Have fun, and keep coding!

EDIT: Ah, sorry, I also noticed you wanted it to scale as much as possible to fit the display. You'll notice at the bottom where it decides no to go fullscreen it sets a _scale variable. I use this to limit how much scaling it will do, you can play with that line to see how it affects the outcome and get your desired result.
 

Uhfgood

Member
Thanks for the detailed explanation. Apparently I'm using it wrong. I've created a separate "init" room, and then called the script in the creation code. Size of my project is 135x240 -- I set aspect to true, fulscreen to false. Nothing shows up on the screen when I call it, otherwise it will show a blank gray 'window' (because there's nothing in the game yet).

So what am I doing wrong? Also I"m assuming the width/height params are the desired width and height? Was also hoping for a more automatic scaling. Where I'd call it, and it would do it all. (in other words it would ideally automatically start up and scale the window to the largest size it can fit. But maybe this is too much work, and if so in that case I'll have to read through those tutorials again.

Thanks again for your time.
 
Top