Translations

Know another language? Translate this tutorial!

Stats

8.6K visitors
55K page views
440 translation visitors
2,208 translation page views

Multiple screen sizing for all mobile devices

Favourite 84 favourites
Tutorial written by FronneOriginally published on 19th, August 2014 - 9 revisions

About six months ago I had an idea for a (mobile) game. I have programming skills in a dozen different programming languages but was a complete NOOB with Apps. After reading some articles on the world wide web I figured out the easiest way to achieve my goal was to write the App with Construct 2 because I was not limited publishing a game for just one platform. John Bura's article convinced me to use C2 instead of GameMaker, GameSalad or Stencyl...

After a short learning period I wrote the basic game in about three or four days but one thing kept me from publishing. I wanted to publish just one game (free and paid) on the App Stores from Apple and Google and the www that was able to handle all screen sizes in an elegant way. Ashley's tutorial named Supporting multiple screen sizes gave me some insight about the matter but unfortunately not a solution...

I finally found the solution on YouTube, looking for something else. Ed Farias made a Vid named Construct 2 - Screen Resolution as the first part of his course named Construct 2 Mobile Monetization where other NOOBS like me are being told how to make money with their Construct 2 game. The price of the course (I was one of the students) is $29 but you get $5 discount if you follow the link from the YouTube vid. I would like to strongly recommend all beginners to follow this course. Thanks a lot Ed...

So why a tutorial about this matter you might think if there's a solution on YouTube available. Well, actually I made some refinements making it a little bit easier to use this technique. As a matter of fact, I excluded one of the dimensions (height) and with just a variable width and Ed's safe zone the game will be scaled perfectly (tested) on all mobile devices. To understand this I have to explain some things about the Aspect Ratio of mobile devices...

Actually there are just 5 Aspect Ratio's for mobile devices - at the moment -. There are three iOS and five Android Aspect Ratio's. Because of some overlapping there are 5 to handle:

3:2 or 2:3 --- iOs and Android
4:3 or 3:4 --- iOs and Android
5:3 or 3:5 --- Android
16:9 or 9:16 --- iOS and Android
16:10 or 10:16 --- Android

Because my game is designed for portrait mode we use the bold portrait
Aspect Ratio's in the rest of the tutorial...

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

1
cedricvr 1,825 rep

Hello Fronne,

I really like your tutorial but how can I use these techniques in plain javascript?
I am using a framework called phaser to make my games and I am struggling to make my game fit mobile devices. This post is amazing :D i now understand that I have to make my main game at a certain res that fits in all the other resolutions.
Do you have an idea on how to implement this in regular code ?

Very kind regards,
Cedric

Sunday, April 24, 2016 at 12:02:59 PM
1
Fronne 3,515 rep
Do you have an idea on how to implement this in regular code ?
quoted from cedircvr

you actually don't need to implement this in code...
Just make sure all action takes place in the smallest (16:9) ratio and everything (background) is completely visible in the biggest (4:3) ratio...
Most phones (and monitors and TV's) use the 16:9 ratio at the moment...
Most tablets use another aspect ratio...

Good Luck,
Franco Palmieri - Fronne

Thursday, May 05, 2016 at 5:22:08 PM
1
cedricvr 1,825 rep

@fronne ,

What are the settings I have to use to export to the intel XDK ? Because I keep getting black bars or scrollbars :/

Wednesday, May 25, 2016 at 3:12:37 AM
0
Fronne 3,515 rep

I'm not sure, I switched to Unity over a year ago. The settings also depand on the Physics Engine you use...
I just checked, Letterbox Scale with Cocoon JS Native Engine...

See my other project where you can download a .capx file...

www.scirra.com/tutorials/1153/mobile-keyboard-and-hall-of-fame-for-all-mobile-devices

Sunday, June 05, 2016 at 7:37:13 AM
2
jeffige 14.1k rep

My problem with this way of doing things and the question i have is when your game scales from 4:3 to 16:9 on different devices wouldn't the game controls scale farther away from the edges of the screen? i.e: on an iphone the controls may be right at the edge, but on a galaxy tab the controls would be farther away, making the user have to 'reach' for the controls due to the fact there is more space between the safe zone and the edge of layout.

Monday, June 13, 2016 at 10:14:04 PM
-1
Fronne 3,515 rep
My problem with this way of doing things and the question i have is when your game scales from 4:3 to 16:9 on different devices wouldn't the game controls scale farther away from the edges of the screen? i.e: on an iphone the controls may be right at the edge, but on a galaxy tab the controls would be farther away, making the user have to 'reach' for the controls due to the fact there is more space between the safe zone and the edge of layout.
quoted from jeffige

You're absolutely right, this is a huge drawback from this approach...

I switched to Unity a long time ago where scaling different items like UI controls is much easier. I use a combination of both right now...
Actualy I don't use Construct for over a year now and it's beyond the scope of this small little tutorial to get in details, this tutorial was ment for beginners and if I'm right, you're not a beginner my friend...
:-P

But using a combination of scaling UI and Screen Sizing will do the job...

Cheers!
Franco Palmieri - Fronne

Tuesday, June 14, 2016 at 11:19:42 AM
1
KTML5 6,649 rep

<div class="quoted-text">My problem with this way of doing things and the question i have is when your game scales from 4:3 to 16:9 on different devices wouldn't the game controls scale farther away from the edges of the screen? i.e: on an iphone the controls may be right at the edge, but on a galaxy tab the controls would be farther away, making the user have to 'reach' for the controls due to the fact there is more space between the safe zone and the edge of layout.<div class="author">quoted from <strong>jeffige</strong></div></div>To anyone else asking this question, or really anyone stumbling on this (and I know, you probably already know this), don't use this approach. That's the simplest answer.

As has been said, it's best to use this technique for layouts that the camera will be moving around in (scrolling layouts), but for UI, you'll want to set the position of each UI element every tick, relatively to the window.

Just make a family for UI elements, make instance variables x_ScreenOffset and y_ScreenOffset, and set these values to their position in the viewport. Then, use these values to set the object's actual position relatively to the window.

Thursday, December 29, 2016 at 12:08:56 AM
0
blue visionary 187 rep

Hey! Does it not really confuse in different resolutions?what if we export this game in a common way...like in a website..wont it be.......

Tuesday, January 24, 2017 at 8:40:50 AM
0
Malhog 272 rep

Do you use Scale Outer, Scale inner or Letterbox?

Monday, August 07, 2017 at 1:32:59 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.