Best template for mobile project

Get help using Construct 2

Post » Tue Feb 25, 2014 1:41 am

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.






.
Last edited by Jhonathan Ibanez on Tue Feb 25, 2014 3:30 am, edited 1 time in total.
B
10
S
3
Posts: 75
Reputation: 864

Post » Tue Feb 25, 2014 2:34 am

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.
Last edited by vagaev on Tue Feb 25, 2014 3:12 am, edited 6 times in total.
B
13
S
4
G
1
Posts: 241
Reputation: 1,724

Post » Tue Feb 25, 2014 2:48 am

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.

Image

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.



Image

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.
Last edited by vagaev on Tue Feb 25, 2014 3:08 am, edited 4 times in total.
B
13
S
4
G
1
Posts: 241
Reputation: 1,724

Post » Tue Feb 25, 2014 2:48 am

Here are some ratio and resolutions comparisons
http://en.wikipedia.org/wiki/Graphics_display_resolution
Last edited by vagaev on Tue Mar 04, 2014 2:56 pm, edited 1 time in total.
B
13
S
4
G
1
Posts: 241
Reputation: 1,724

Post » Tue Feb 25, 2014 4:07 pm

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.
B
10
S
3
Posts: 75
Reputation: 864

Post » Tue Feb 25, 2014 11:56 pm

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?
B
10
S
3
Posts: 75
Reputation: 864

Post » Wed Feb 26, 2014 2:36 am

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.
Last edited by vagaev on Wed Feb 26, 2014 2:41 am, edited 2 times in total.
B
13
S
4
G
1
Posts: 241
Reputation: 1,724

Post » Wed Feb 26, 2014 2:40 am

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.
B
13
S
4
G
1
Posts: 241
Reputation: 1,724

Post » Wed Feb 26, 2014 2:53 am

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)
B
10
S
3
Posts: 75
Reputation: 864

Post » Wed Feb 26, 2014 3:46 am

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.
B
13
S
4
G
1
Posts: 241
Reputation: 1,724

Next

Return to How do I....?

Who is online

Users browsing this forum: No registered users and 6 guests