Translations

Know another language? Translate this tutorial!

Stats

6.2K visitors
14.2K page views
1,378 translation visitors
4.3K translation page views

How to design your game to easily fit any screen size.

Favourite 45 favourites
Tutorial written by PSIOriginally published on 12th, June 2014

Hello all. Something like this tutorial may already exist but, in designing my game, "Psi," I've come across an easy way to support any size screen and aspect ratio.

1. In "project settings," set "window size" to something with a 16x9 aspect ratio. An easy resolution would be 1600x900.

2. In your project properties, set "fullscreen in browser" to "scale inner."

properties settings
3. Make sure to keep crucial assets towards the middle of the screen so they won't be cropped on screens with a narrower aspect ratio.

Now, on a 16x9 aspect ratio screen, you will see everything and on narrower screens the edges will be cropped without cutting anything vertically.

I hope this is helpful! Good luck and happy game making!

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

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

Comments

2
Madrasmadnes 2,497 rep

Thanx mate......I am new to this construct for mobile game making. And it definitely helps to people like me!!!

Friday, June 13, 2014 at 4:34:17 AM
3
Lordshiva1948 40.3k rep

Thanks for sharing

Friday, June 13, 2014 at 6:43:02 AM
2
AbelaNET 14.7k rep

Hmmmm haven't tried it but from your explanation it looks like a good trick. Thanks for sharing.

Friday, June 13, 2014 at 7:46:54 AM
4
MaorKeshet 1,655 rep

This www.scirra.com/tutorials/73/supporting-multiple-screen-sizes is the official tutorial for that matter

Friday, June 13, 2014 at 8:53:59 AM
2
part12studios 6,458 rep

Yea for me as a general rule of thumb I use scale inner for mobile (landscape games) and scale outer for mobile (portrait games).

For browsers letterbox is best because browsers can be any shape or on various monitor types. The integer one is interesting for some games that you might not want to necessarily flood the screen. I know it's advised to be used for pixel style games (which is true) but I've also found some games on browsers sometimes feel better having a little black space around them.

Thanks for making this very specific tutorial. Good for a quick starter for new folks.

Friday, June 13, 2014 at 1:52:32 PM
1
PSI 2,964 rep

@MaorKeshet - they do make a very brief mention of this technique in that tutorial but I have read it probably at least 4 or 5 times and missed that entirely.

Friday, June 13, 2014 at 8:31:19 PM
2
Tedg 9,849 rep

Thanks for sharing.

Saturday, June 14, 2014 at 7:21:49 PM
2
sergi 921 rep

Thanks for sharing.

Sunday, June 15, 2014 at 12:00:00 PM
3
Neondev 691 rep

Thanks for this- I had already figured out the screen size, but the "scale inner" seems to really help.

Sunday, June 15, 2014 at 10:13:35 PM
2
SHG 914 rep

THANK YOU! Have been trying everything in the other tutorials on the site!

Wednesday, June 18, 2014 at 4:32:00 AM
4
SHG 914 rep

This is the only tut on this subject that worked 100%! What i did after all the steps above is:

I added the event: (On Start Of Layout: (Size Of Game)

Like stated in the tutorial above, Place game assets in the middle, Easy way to do this is to highlight everything in the layout window, Right click and move your mouse to "Align" and scroll down to layout and select horizontal then repeat again and select vertical.

Wednesday, June 18, 2014 at 10:06:31 AM
1
jastrazz 3,535 rep

A good trick I will try to use in my next project.
Thanks for sharing.
:D

Wednesday, June 18, 2014 at 2:27:10 PM
1
A0Nasser 9,155 rep

Is this will work nice on the Ipad?

Friday, June 20, 2014 at 5:25:23 AM
1
ahmadmanga 848 rep

Thanks for the tut.
so is 16x9 is the largest aspect ratio out there on android phones ?

Monday, June 23, 2014 at 6:50:31 AM
1
PSI 2,964 rep

I think so. There may be something wider but I've never come across it.

Monday, June 23, 2014 at 5:30:26 PM

Leave a comment

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