How to handle responsive positioning and scaling?

Welcome to our brand new Clickteam Community Hub! We hope you will enjoy using the new features, which we will be further expanding in the coming months.

A few features including Passport are unavailable initially whilst we monitor stability of the new platform, we hope to bring these online very soon. Small issues will crop up following the import from our old system, including some message formatting, translation accuracy and other things.

Thank you for your patience whilst we've worked on this and we look forward to more exciting community developments soon!

Clickteam.
  • Clearly there are tons of device aspects so I want my actives to be pinned to the edges/corners of the screen but not be stretched etc. At the same time I dont want any black bars. I'm runing on Android and I've tried all the display options available (Fit Inside and adjust window size etc) but none of them seem to do the desired effect. WHat is more is that there are settings in the main application tab like Change Resolution Mode/ Resize Display to fill window and Keep screen ratio which just confuse everything.

    Anyway, I think I've tried most combination on an actual android device but I cant get it to work.

    I don't mind programmatically positioning/scaling elements but its hard to know what base display I should be using. I don't want anything stretched by default unless I code an individual object to do so but I want to be able to access in code the
    entire device frame.

    Anyone know best practice? Cheers

  • The options under the main display - doesn't apply to Android - except for the Heading part - so what you tick there is ignored.

    On the Android side I don't think you're going to fit correctly without stretching or black bars on every single device - especially now with the foldable screens and odd resolutions.

    It depends on your app and how many frames you have. If it's just one frame, then you could have a startup frame that reads the the width / display and then jump to the frame that best matches that. i.e. if width < 1080 - goto frame 2 etc. I think the Android and the Android+ objects can do that. And each frame can be its own size. If you have lots of frames, you'll have to decide on a compromise. You're either going to make the game to fit the smallest size - with empty space around it on larger devices - or you'll have to stretch it / use black bars.

    To give you an idea - Amazon accepts these sizes as screenshots:

    800 x 480 px
    1024 x 600 px
    1280 x 720 px,
    1280 x 800 px
    1920 x 1080 px
    1920 x 1200 px,
    2560 x 1600 px

    I use 1280 x 720 and then stretch to fit - that also covers 1920 x 1080 because it's the same ratio. So a circle on my cell phone is an oval on my tablet. But the players don't know that. They would think that I designed it that way - the screenshots show it that way at Google - because they give you different options for cell phone screenshots and tablet screenshots.

    Casual games: Please login to see this link.

  • This site may help you decide: Please login to see this link. .

    I'm no expert on phones (foldable screens? never heard of such a thing! :o). But my guess is that if you focus on 90% of users without fretting about every outlier, you'll probably find that there are just a few basic aspect ratios in use, most of which are relatively similar. If you "sort by popularity" on the above link, it seems like 16:9 will cover you for the top 10 or so most popular phones. They're all either 16:9 or ones that look weird but are actually very similar (eg. 40:71 = 16:9.01)

    So I'd say use 16:9 as your base. Then worry about the outliers after.

    Please login to see this link.
    My Fusion Tools: Please login to see this link. | Please login to see this link. | Please login to see this link.

    Edited 2 times, last by Volnaiskra (March 3, 2020 at 6:42 AM).

  • 640x360 is the most flexible resolution for 16:9. It scales in multiples easily to all major resolutions:

    640x360 1x
    1280x720 2x
    1920x1080 3x
    2560x1440 4x

    etc.

    In the event of an odd resolution, you would default to closest multiple base resolution, then just stretch out the borders of your window without changing the scaling. Some graphics outside of the regular play area would make this look natural. Here's an article about how ludicrous did it: Please login to see this link.

    It's for unreal 4 but the same idea could be used in fusion.

    Best person at writing incomprehensible posts. Edits are a regularity.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!