AGK - allow users to set a custom resolution?

[hosch]

Hi,

I've recently joined a game jam and made my game with Blitz3D. The whole game was designed around the resolution of 1920x1080. Not having 'published' a game before, I unfortunately didn't take into account that some (especially laptop) PCs don't support this resolution - my mistake, but it locked out a good portion of the player base. Since Blitz3D's 2D commands don't support any resolution handling out of the box, I would either have to create assets for each resolution, write my own scaling routine, or go 2D in 3D.

I am planning to port my game to AKG, which I purchased just recently, as a project to get to know it better, but I don't want to repeat the same mistake. How do you guys tackle this subject? Which options does AGK offer for this/which one worked best for your game? Do you design it around a fixed resolution and then scale it up?

I generally feel I am having trouble to wrap my head around this whole topic, simply due to my inexperience in making games available to the public. So many design aspects are tied to the resolution (levelsize/tilesize, asset size, menu screens). I know it's important to keep the aspect ratio during the creation of the assets, but that's about it.

I would really appreciate your help/if you'd share your experience or the options in AGK you use, since I am in a weird state of not starting the project, because I don't want to change everything later down the line and lack the info of making an informed decision.

Thank you!

[GaborD]

AGK has some helper functionality for this:
https://www.appgamekit.com/documentation/Reference/Core/SetVirtualResolution.htm
https://www.appgamekit.com/documentation/guides/0_display.htm
Should hopefully do the trick for 2D stuff.

[Steve Elliott]

AGK handles that for you with Virtual Resolutions.  The window is scaled automatically, and if it's impossible to scale to an exact screen ratio it adds small bars (you can set the colour of these bars).  Bars should be small if you set to a more modern screen ratio like 1920 X 1080, and users with that resolution will see no bars.  Where as bars will be bigger if you use a more square ratio like 1024 X 768.

Code: [Select]

Global xwin = 1920
Global ywin = 1080

SetDisplayAspect( xwin / ywin )    // set aspect ratio
SetVirtualResolution( xwin, ywin ) // set VR ( if lower than window size it will scale up )
SetScissor( 0, 0, xwin, ywin )     // use the maximum available screen space, no borders
SetClearColor( 0, 0, 0 )           // dark background
SetBorderColor( 0, 0, 15 )         // some systems might need a border so set a colour

SetWindowSize( xwin, ywin, 1 )     // set resolution - 0 for a windowed game


[blinkok]

A good tutorial on resolution

[hosch]

Thanks so much for your input! It helped me a great bunch already. I will check out the tutorial as well and then I'll try to set up a small demo first, and make sure it works correctly, before starting to port my game over.

[Steve Elliott]

You're welcome, that code works perfectly on my systems.  I've tested various resolutions on the PC (the general resolution being 1920 X 1080) and on MacBook Pro the resolution is very different (2560 X 1600) but still works correctly so you shouldn't have any problems.  On the mac I get very small bars on top and bottom only, and the game is scaled correctly.

[hosch]

That's good news. I don't want to put in the effort and notice mid way I need to redo all assets or code   

[Steve Elliott]

That's good news. I don't want to put in the effort and notice mid way I need to redo all assets or code   

Yes that was my goal too so I tested AGK's commands and they work as expected.  I would just target 1920 X 1080 and let AGK take care of the rest.

[hosch]

That's good news. I don't want to put in the effort and notice mid way I need to redo all assets or code   

Yes that was my goal too so I tested AGK's commands and they work as expected.  I would just target 1920 X 1080 and let AGK take care of the rest.

Yep, I've tested it this afternoon, works like a charm and as expected. Thank you for pointing me in the right direction, it was a relief to grasp this. I've done it the other way round, though. Setting a smaller resolution and scaling up, because my pixelart is small. I've read some more on this topic and a lot of indie devs seem to do it this way when they are using small art. However, I've noticed some serious screen tearing, despite setting vsync to 1. Did you have similar experiences?

I don't believe it's my code (which actually, is yours  )

Code: [Select]

//SET UP GRAPHICS
//game is optimized for 480x270
global resX as integer = 480
global resY as integer = 270
global gameResX as integer = 1920
global gameResY as integer = 1080
global fullscreen as integer = 1
SetUpGraphics()

function SetUpGraphics()
//calculate correct aspect ratio
SetDisplayAspect(resX / resY)
//set the optimized resolution
SetVirtualResolution(resX,resY)
//this can be set however you/the user likes it
SetWindowSize(gameResX,gameResY,fullscreen)
//60 fps
SetSyncRate(60,1)
endfunction
Might look smoother with delta time movement in place, but I believe its screen tearing.

[Steve Elliott]

No I don't get any tearing, are you using Sync() more than once?  This works without tearing.

Code: [Select]

// Project: Test
// Created: 20-06-13

#Constant KEY_ESC 27
#Constant IN_PLAY 1
#Constant QUIT 2

//SET UP GRAPHICS
//game is optimized for 480x270
global resX as integer = 480
global resY as integer = 270
global gameResX as integer = 1920
global gameResY as integer = 1080
global fullscreen as integer = 1
SetUpGraphics()

function SetUpGraphics()
//calculate correct aspect ratio
SetDisplayAspect(resX / resY)
//set the optimized resolution
SetVirtualResolution(resX,resY)
//this can be set however you/the user likes it
SetWindowSize(gameResX,gameResY,fullscreen)
// background colour
SetClearColor( 147, 168, 172 )
//60 fps
SetSyncRate(60,1)
// turn on vsync
SetVSync(1)
endfunction

SetUpGraphics()

pot_image  = LoadImage( "Pot.png" )
pot_sprite = CreateSprite( pot_image )
x As Float = -16.0
y As Float = 100.0
SetSpritePosition( pot_sprite, x, y )

game_mode = IN_PLAY
Repeat
If( GetRawKeyState(KEY_ESC) ) Then game_mode = QUIT

SetSpritePosition( pot_sprite, x, y )
If( x < 480.0 - 45.0 ) Then x = x + 0.5

    Sync()
Until game_mode = QUIT


[c0d3r9]

SetSyncRate and SetVsync shouldn´t work both together.

[hosch]

No I don't get any tearing, are you using Sync() more than once?  This works without tearing.

It sure does. Nice project files btw  Looks like it's because I didn't use

Code: [Select]

SetVSync(1). I've read in the AGK files that Vsync is turned on by default, so I didn't use it, but apparently, I should have. Thanks!

[hosch]

SetSyncRate and SetVsync shouldn´t work both together.

Yeah, if I use

Code: [Select]

SetVSync(1), I get 75 FPS and with

Code: [Select]

SetSyncRate(60,1) the 60 I aim for.

[c0d3r9]

like here described https://www.appgamekit.com/documentation/Reference/Core/SetVSync.htm

[Steve Elliott]

Yes if you want to cap the FPS (as was requested) do as I suggested, but also think about adding delta time.

One thing I forgot to mention was if you're scaling up your pixel art everything will be blurred - so I suggest you turn off filtering.  Replace the SetUpGraphics() function:

Code: [Select]

function SetUpGraphics()
//calculate correct aspect ratio
SetDisplayAspect(resX / resY)
//set the optimized resolution
SetVirtualResolution(resX,resY)
//this can be set however you/the user likes it
SetWindowSize(gameResX,gameResY,fullscreen)
// background colour
SetClearColor( 147, 168, 172 )
// turn off smoothing filter
SetDefaultMinFilter( 0 )
SetDefaultMagFilter( 0 )
//60 fps
SetSyncRate(60,1)
// turn on vsync
SetVSync(1)
endfunction