Support different mobile screen sizes

0 favourites
  • 3 posts
From the Asset Store
Comprehensive localization solution for Construct 3 projects, no addons required!
  • It's been a while since I started using Construct, and it's still not very clear to me how to properly set up my game so that it's perfectly adaptable to any kind of screen on mobile.

    If I want to create a UI like this (see image below), how should I set up my design and place the various instances of each layout?

    I've tried setting the aspect ratio of the project to "Scale outer" (so the view is increased to match the screen size), but if I do a test in the browser, all my instances remain aligned to the left side of the window, while I would like everything to remain centered. What method should I use to solve this?

    If the method I'm using is wrong, how do you suggest I proceed to get a perfect mobile screen fit?

  • There's dozens of different scale ratios for phones so there's no way to do that for all of them. You can pick a popular ratio, and go that way or not use any ratio and size the contents appropriately at runtime.

    Obviously the second one is much more complex, but it is doable if your app is of the minimal type of design.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • To design UI for multiple aspect ratios, you first have to decide which direction is "flexible". Usually this is the direction you expect scrolling to be allowed. In your case, I'm going to guess its vertical. So your horizontal width will be fixed as far as your UI design is concerned.

    So use scale outer, design for the width of the viewport, and understand that the vertical portion may get cut off depending on the aspect ratio, but it's ok because they can scroll.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)