Floating layout for different aspect ratios

Author

Message

Xaron

10

Years of Service

User Offline

Joined: 3rd May 2014

Location: Germany

Posted: 31st May 2017 13:44

Link

Hey there,

I have a question regarding different aspect ratios for mobile devices. We all now we have everything from 4:3 (iPad) up to 16:9.
Usually I use a 16:9 background which always start at the top left position and is just cropped for lower aspect ratios to avoid black borders.

So here's an example. You see I set a 16:9 window size but a 4:3 virtual resolution as this is the minimum view area that is available over all possible devices.

The code below works fine I just want to ask if this is the right way of doing it by using SetViewOffset and then paint everything normally?

+ Code Snippet

// show all errors
SetErrorMode(2)

// set window properties
SetWindowTitle( "agktest" )
SetWindowSize( 640, 360, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window

CreateSprite ( 1, LoadImage ( "background.png" ) )

// set display properties
SetVirtualResolution( 480, 360 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 30, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts

do
    SetViewOffset( -GetScreenBoundsLeft(), 0 )
    SetSpritePosition( 1, 0, 0 ) 

    Sync()
loop

Attachments

Login to view attachments

Back to top

Profile PM Website

PSY

Developer

8

Years of Service

User Offline

Joined: 3rd Jul 2016

Location: Laniakea Supercluster

Posted: 1st Jun 2017 23:58

Link

Hey Xaron,

SetWindowSize doesn't have any effect on mobile devices, just on Windows / Mac

SetViewOffset is rather used for scrolling through a level or stuff like that. If you plan on using it your way, I wouldn't put it in the main loop.

With SetScissor, there are no black borders, so drawing your 16:9 background at negative values on a 4:3 mobile device should do the trick.
I think a good way would be to find out the aspect ratio of the device and draw your gfx accordingly.

I only have experience with the AppGameKit percentage system yet, but I'll be using the virtual resolution for my next game, so I'll have to deal with this problem soon, too

PSY LABS Games
Coders don't die, they just gosub without return

Back to top

Profile PM Website

easter bunny

11

Years of Service

User Offline

Joined: 20th Nov 2012

Playing: Dota 2

Posted: 2nd Jun 2017 03:37

Link

Hey Xaron,

There are two ways in AppGameKit to draw to the entire screen on mobile. Either use the percentage system (which I don't recommend), or call SetScissor(0,0,0,0) which will allow your to draw to the entire screen regardless of the screen size.

Once you call SetScissor(0,0,0,0), you should call SetVirtualResolution( 100, 100) and SetOrientationAllowed( 1, 1, 0, 0 ) (for portrait, invert those bits for landscape). This will basically set your default drawing area to a square box in the centre of the screen and give it a virtual resolution of 100x100. This means if you call SetSpritePosition(ID,0,0), it will place the sprite somewhere on the middle left part of the screen (the top left of that box). However since we called SetScissor(0,0,0,0), you can move that sprite anywhere on the screen and it will still show (as opposed to normal where you can display anything past the black borders).

You can use the commands GetScreenBoundsTop() (and Bottom/Left/Right) to find the virtual resolution location of the screen bounds. So if you want to place something at the top of the screen, instead of placing it at (0,0), you would place it at (GetScreenBoundsLeft() ,GetScreenBoundsTop()). In fact, when using this method, you should never position an object absolutely, always place it relative to the ScreenBounds.

It's a pain to constantly type out those commands, so I recommend you put the following (or similar) lines at the top of you init file:

+ Code Snippet

#constant sbT (GetScreenBoundsTop())
#constant sbB (GetScreenBoundsBottom())
#constant sbR (GetScreenBoundsRight())
#constant sbL (GetScreenBoundsLeft())
#constant sbH (GetScreenBoundsBottom()-GetScreenBoundsTop())
#constant sbcX (GetScreenBoundsLeft()+((GetScreenBoundsRight()-GetScreenBoundsLeft())/2))
#constant sbW (GetScreenBoundsRight()-GetScreenBoundsLeft())
#constant sbcY (GetScreenBoundsTop()+((GetScreenBoundsBottom()-GetScreenBoundsTop())/2))

Because of the way constants work in AppGameKit, you can call "sbT " instead of typing out "GetScreenBoundsTop()" every single time. sbcX=ScreenBoundsCenterX, sbH=ScreenBoundsHeight etc.
So if you want to place a sprite in the middle of the screen, you would do it as such: SetSpritePosition(ID,sbcX,sbcY) (subtracting half the sprite width of course).

Alternatively you can simply set the game aspect ration to 16:9, and just fade the edges of your background image out to black so it doesn't look strange having black borders. It's much easier this way

My Games - Latest WIP - My Website: Immortal.Digital - FB - Twitter
130,000 installs with AppGameKit and counting

Back to top

Profile PM Email

Xaron

10

Years of Service

User Offline

Joined: 3rd May 2014

Location: Germany

Posted: 2nd Jun 2017 08:25

Link

Thanks guys, will check it! I'm just curios about this 100x100 virtual resolution but will play a bit with it!

Back to top

Profile PM Website

Xaron

10

Years of Service

User Offline

Joined: 3rd May 2014

Location: Germany

Posted: 2nd Jun 2017 15:05 Edited at: 2nd Jun 2017 15:26

Link

Hi there,

ok I've played a bit. Working landscape as my example above works fine but for portrait the same(!) code fails, is there a bug?

Landscape working example:

+ Code Snippet

// show all errors
SetErrorMode(2)
 
// set window properties
SetWindowTitle( "agktest" )
SetWindowSize( 640, 360, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window
 
CreateSprite ( 1, LoadImage ( "background.png" ) )
 
// set display properties
SetVirtualResolution( 480, 360 ) // doesn't have to match the window
SetOrientationAllowed( 0, 0, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 30, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts
 
do
    SetSpritePosition( 1, GetScreenBoundsLeft(), 0 ) 
 
    Sync()
loop

Portrait NOT working example:

+ Code Snippet

// show all errors
SetErrorMode(2)
 
// set window properties
SetWindowTitle( "agktest" )
SetWindowSize( 360, 640, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window
 
CreateSprite ( 1, LoadImage ( "background2.png" ) )
 
// set display properties
SetVirtualResolution( 360, 480 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 0, 0 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 30, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts
 
do
    SetSpritePosition( 1, 0,  GetScreenBoundsTop() ) 
 
    Sync()
loop

I'm totally lost now. I mean the second example is exactly the same like for landscape but the floating layout simply doesn't work the same way!

When you look at the attached image you see that square. For portrait mode this is stretched even though this should not happen!

edit: I see that's the case for landscape too... Well back to drawing board.

Another question: When using a virtual resolution of 100x100 doesn't this mean that everything is pretty blurred when it comes to sprites?

Attachments

Login to view attachments

Back to top

Profile PM Website

Xaron

10

Years of Service

User Offline

Joined: 3rd May 2014

Location: Germany

Posted: 2nd Jun 2017 15:36

Link

Ok, so back to the drawing board as I said. Here's a simplified example:

+ Code Snippet

// show all errors
SetErrorMode(2)
  
// set window properties
SetWindowTitle( "agktest" )
SetWindowSize( 640, 360, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window
  
CreateSprite ( 1, LoadImage ( "background.png" ) )
  
// set display properties
SetVirtualResolution( 640, 360 ) // doesn't have to match the window
SetOrientationAllowed( 0, 0, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 30, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts
  
do
    SetSpritePosition( 1, 0, 0 ) 
  
    Sync()
loop

I create a windows with 640x360 and create a virtual resolution with 640x360 and load a background image with 640x360... Why on earth is the result not the same as the background itself?

Attachments

Login to view attachments

Back to top

Profile PM Website

Markus

Valued Member

20

Years of Service

User Offline

Joined: 10th Apr 2004

Location: Germany

Posted: 2nd Jun 2017 19:24

Link

try the sprite load after initialising the screen, any maybe set the the sprite size.
GetVirtualWidth () GetVirtualHeight () + size of screenbounds.

AGK (Steam) V2017.05.15 : Windows 10 Pro 64 Bit : AMD (17.4.4) Radeon R7 265 : Mac mini OS Sierra (10.12.2)

Back to top

Profile PM Email

Xaron

10

Years of Service

User Offline

Joined: 3rd May 2014

Location: Germany

Posted: 2nd Jun 2017 19:41

Link

Markus, you're a genius! Creating the sprite after initialising the screen solved that issue.

Back to top

Profile PM Website

Sorry your browser is not supported!

AppGameKit Classic Chat / Floating layout for different aspect ratios

Attachments

Attachments

Attachments