0 Favourites

How do I set a perfect aspect ratio/resolution for my game?

  • I have found many articles regarding this issue but do I really have to do all these things or there is a perfect aspect ratio that could somehow work on most of the devices? Which resolution/aspect ratio is the best?

    My game has a fixed layout and white background. The objects are bouncing of the layout "walls" (end of the layout) and I'm not sure what will my game look like on different devices.

    I assume that if my aspect ratio is larger than the one on the device, my objects will sometimes go off screen (dissapear). If my aspect ratio is smaller that the one on the device, the black screen will appear around my white layout. Am I right?

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • there are no ratio/resolution that will fit every screen, especially if you need something to bounce exactly on the "wall"..

    so you have to decide how it will "cut" it. read more about the settings. scale inner, scale outer, letterbox etc etc.

  • So I assume that I have to choose smaller aspect ratio and the rest of the screen will be black?

  • So I assume that I have to choose smaller aspect ratio and the rest of the screen will be black?

    Take a quick look at

    Subscribe to Construct videos now

    or this.

    There is no 'perfect' resolution. Can you imagine how many different versions of your game you would have to create to design for every mobile screen.

    Yes, your game may not display perfectly on a htc one s screen as it does on an samsung galaxy s8, but that's a trade off. You have to design so it appears to be perfect for that screen it's currently on.

  • no ratio fits all screens. to have "to low" or "to high" ratio just tells where the black area will be. it depends on where you prefer.

    but read more in the manual. it might be possible to have a perfect solution for you if you redesign your game a bit maybe search for fullscreen scaling

  • Okay, it's too early for me...I just got what you were asking.

    So i think you're gonna need the windowwidth expressions. Or is it viewport?

    Search the manual and google for these. This will return the boundary for each device. Problem with that is, it may not be perfect. May be off a few pixels.

    Another thing you could do is have rectangle objects that are invisible along all 4 sides of the game's screen. Make them a bit longer and wider, and then create them at the co-ordinates of the phone's screen.

    Yes, it does seem like a lot, but there are some very experienced users on here that could do it no problem. It's all about trial and error.

  • But if I target 3:2 aspect ratio, my game should work an almost all devices, but a user will see black bars around my game if device aspect ratio is different. Am I right?

  • But if I target 3:2 aspect ratio, my game should work an almost all devices, but a user will see black bars around my game if device aspect ratio is different. Am I right?

    First, did you look at the links i posted before?

    Basically, if your layout is....say 600x300, and your window is....say 400x200, you want your layout, that 600x300 to be a bit larger. Say 700x400.

    Then when you add objects, make sure NOTHING important is close to the edges.

    Again, i can not remember the exact expression you need here.

    Its either viewport or window expressions. And there will be A LOT of trial and error here.

    I do not know if you could actually bounce the ball off the edges of the screen. As i said, adding plain objects to your game then making them transparent and rectangle and placing them at the edges of the screen by way of the viewport or window expression.

    (This is wrong, only adding it for an example)

    create object - X position.viewport.left +30

    Again, that is not the expression but its something like that.

    Search the manual for viewport and windowwidth and or do a forum search. Take some time to read through.

  • I did go through the links you posted...I did it a few times, but I'm not sure where to go next and my game is almost complete, so I want to avoid too many changes. The problem is that both of these articles suggest a game with 3:2 aspect ratio for a safe zone. But I can't find any newer Android device with this aspect ratio. My game has 1280x720 resolution (16:9 aspect ratio) and a letterbox scale and I tried it on at least 10 devices (phones and tablets) and it works fine. Only on tablets it has these black edges but I'm fine with that.

  • ...but I'm fine with that.

    First, i wouldn't add tablets to the list of available devices if the game does not play well. IMO it looks amateurish.

    Second, if you're fine with that, then...okay.

  • To solve this problem on my project (Resolution 1920x1080, Fullscreen scale inner) i did like this :

    On start of the menu layout i added a "sensor" to let the game know if it's cutted down (4:3) or normal (16:9), so this way if it's 4:3 i just had to move some objects inside the viewable area, or in your case you could just move the point to bounce at. A couple image that may help : http://prnt.sc/dxm5b3 http://prnt.sc/dxm2qz

    Doing like this you should even be able to set more aspect ratio if setted up properly.

  • > ...but I'm fine with that.

    >

    First, i wouldn't add tablets to the list of available devices if the game does not play well. IMO it looks amateurish.

    Second, if you're fine with that, then...okay.

    1. Would you then publish the game for smartphones only?

    2. Instead of having a black bars, I can add some kind of background. Do you suggest that? Although, I don't understand why would I do it because my game doesn't have a background...it does, but it's simply white

  • So, here is some game that has layout just like my game. What would you do?

    Would you add a background to it?

    Which aspect ratio would you use for layout?

    Would you live black bars on devices with larger aspect ratio or you would add some good-looking background?

    http://www.nosytapir.com/testgame/

  • sivricmarijan

    With a game like that, if it's on desktop, there's really no way around the black bars. With the game at fullscreen/scale outer it would be like trying to watch a football game on a 60" tv, when your eyes are only a foot away from the screen.

    However, on a mobile phone/tablet the screens are pretty close in relation to their screen size (not resolution). A galaxy tab 10 is huge, but still not that far from a normal mobile phone screen. Yes, your objects need to be designed to be able to scale up to that higher resolution without losing its sharpness, but it can still be done.

    http://s349.photobucket.com/user/MackMackStudios/media/screen resolution_001_zpspdvihohj.jpg.html

    http://s349.photobucket.com/user/MackMackStudios/media/screen resolution_002_zps08bqdxsv.jpg.html

    if your game's layout is 1280x720, i'm assuming your window is too. Make your window 1024x576 (that's still a 16:9 resolution) and this should give you enough room to display on a variety of devices. Phones AND tablets.

    And what happens when new smart phones come out with a 4:3 aspect?

    No problem. Your larger layout with the smaller window will cover them too.

    You just need to do some homework to learn how to move those walls to the edge of the viewport when it changes from 16:9 to 4:3.

    There are expressions you need....get the viewport size > set walls to viewportleft, viewportright, etc. etc.

    That is rudimentary, and not at all the expression. It's been awhile since i had tyo know it. And haven't used it in a LONG time.

    I am not experienced as a lot of folks on here, and they may know a better way to do it, but that's probably the way i would try to go.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread sticky
763 305,713
asikanddestroy's avatar
asikanddestroy
Unread hot topic
232 177,689
Tetriser's avatar
Tetriser
Unread hot topic
266 15,907
GameeApp's avatar
GameeApp