Best template for mobile project

Hi everybody.

Currently I am migrating a desktop videogame to a mobile project with construct 2. I noticed that with the latest relases of C2 there are new templates, among them there is this hd 1080p template so I wanted to give it a try and tested it on samsung galaxy ace mobile device with cocoonjs, however, it didnt work (I used lan network preview and the project is a white scree with no events). I suppose that using a hd 1080p template is quite demanding for such a device, so I would like to know what kind of resolution would be appropiate for multiple devices and performance.

.

You have to use aspect ratio instead of resolutions.

I will illustrate with an example. Let's say you want your game to play on ipad and iphone 5.

Well ipad is 4:3 ratio with 1024*768 for ipad 1 and 2 and higher for ipad 3 but we don't care. All we need is to pick a 4:3 compatible resolution.

Iphone 5 is 16:9 ratio (you can pick any 16:9 resolution BUT bigger than the 4:3 one).

Your goal will be to be sure that your layout is big enough to fit into 2 given resolution.

You have to pick the smallest resolution. Basically the smallest resolution that fit 4:3 and 16:9 without being too small and design your game for it.

When it's done you will make a condition every tick, scroll to (the center of the screen).

You will have to put anchor behavior on all the objects and stuff in order to maintain their relative position to the window.

Here is an example that works on iphone5 and all ipads (haven't tested it on iphone 4 though, it has a 3:2 ratio)

The WINDOW PROJECT is set to 1024, 768. It's a 4:3 ratio

So it's designed for the smallest resolution.

But the Layout size is designed for the bigger resolution. 768,1366 it's 16:9 ratio

So when the window will zoom out to SCALE OUTER the 16:9 ratio we won't see the white lines because the layout will be big enough to cover it.

However. If you don't use anchor behaviors on all your active and interactive game objects (don't use on moving objects though) all the positions will be changed because the screen windows is changing with the resolution (it's adapting from ipad to iphone5 screen). But if you put anchor behavior the relative position of all of your stuff would be conserved.

Notice the Layout size: 768,1366 it's 16:9 ratio. that's because the layout must to be big enough to fit the iphone 5 resolution screen. Ipad resolutions are relatively smaller. For 768p the 4:3 ratio of the ipad has 1024 instead of 1366, about 100 pixel white stripe!!!. So if you design your game for ipad it will run perfectly on it but will have white stripes issues on larger resolutions such as ipod ones. So ALWAYS DESIGN YOUR WINDOW FOR SMALLER RATIO/RESOLUTION BUT YOUR LAYOUT SIZE FOR THE BIGGER RATIO/RESOLUTION.

But if you look to the scroll to function you have (383, 683) -->actually it has to be 384, 683. Dunno why i wrote 383.

We want to scroll to the center of the screen may it be a 4:3 or 16:9 ratio or even 3:2. It will be approximatively in the center of Layout

To illustrate once more. I mentioned i haven't designed my game for iphone 4. (3:2 ratio)

So how will i do it? Simple!

I pick a window size compatible with 3:2 resolution (try to pick the nearest from 3:2, to 4:3 and 16:9 so distorsions will be minimal). Place your objects considering you have a 3:2 ratio game. Then anchor stuff. Make sure you layout is big enough to fit the bigger resolution and enjoy.

You will have to check that your anchor behavior worked well though. Sometimes you have to mess with settings.

Another alternative is pin to object. You create an invisible sprite with window's size and you pin stuff on it. But anchor is better.

Here are some ratio and resolutions comparisons

http://en.wikipedia.org/wiki/Graphics_display_resolution

I could not see your full answer yesterday. I thank you before hand but before marking this post as solved I will read carefully your suggestions. Thank you again.

Ok, I think I managed to understand. Ill make this "naive" question before I continue, all the explanation and incredible good tutorial you just gave me assumes I will be making a game which layout is supposed to be the size of the window, for example a pinball game, the layout in pinball has the size of the window because well you are never going to go through a level like in mario bros in pinball, right?. If so, let me ask you this so the explanation above will be complete, what size should the layout of my game be if it has a bigger background, fox example a game like age of zombies where the layout is scrollable?

Well the layout size doesn't really matters here. What really matters is the window size,backround size (to cover gaps) and the anchor behaviors.(to keep everything relative to window)

The game in my example was a pinball like game so it was very important to keep all the stuff in place (the game surface is bigger in age of zombies so relative position variation inside of the layout may be less important.

The first question you will ask yourself is what kind of mobile platform do you aim?

If you want your game to work from iphone 4 to ipad then you must support the 3:2,4:3,16:9.

Which means (i give an example) that your window will be: 1152*768 (3:2) and layout will be 1366*768. This kind of configuration is good for pinbal games but it will maybe seem strange and not in proportion for other games when you will test it on 16:9 ratio. So you should maybe pick another layout or windows resolution from the link i have put above.

It's all about proportions.

I advise you to make a basic setup and give it a try.

And one more thing it's important to scroll to the center of the layout. Sometimes you will need to make the background even bigger that the layout. It's all about proportions. I'm not sure if constructs when is scaling outer is adding the equal amount of pixels from both sides.

Oh thank you I think I understand a bit more. I am still struggling with the design of my objecst since it seems to me that the bigger the windows size (and this could be a misconception) I will have to make them resolution-based cause they could pixelate when trying to run the game on smartphones with higher screen size and resolution, howeve, this would mean that some devices would not be able to run the game (samsung galaxy ace for example since this is the device I am using to test, though I wonder how can this device run age of zombies and not my game :S)

It's not about resolutions but about ratios. If your games support a 4:3 ratio no matter the resolution as long as it is ratio compatible.

Make a try with crop mode. And set a 3:2 window size and no matter the layout.

I never tried that way but it might work if you are using a scrollable layout

vagaev, wow! that is outstanding information! I have done some tests here and there to try to figure all that out, but never seemed to get just the right settings.

You should copy and paste all the text you posted and make it into a tutorial, with a sample capx file - with enough objects so that people can see exactly what gets cut off or not on various screen ratios!

I have looked for tutorials on this and never found one that spells it out so clearly! Thanks!

oh! ok, thank you veryu much vagaev!!! your help is invaluable

I agree with AllanR there are many tutorials out there but to be honest with the only one I was able to understand this is yours (ok not a tutorial but it is close enough, at least not a tutorial... yet xD)

Thank you for the kudos dudes.

I will consider to turn this into a tutorial as soon as i'll get some free time for.

Actually i was looking for this kind of stuff too when i began but there were no concrete example. So by try and error and lots of forum questions i've managed to do this