Multiple screen ratios in CocoonJS

Hi,

I've spent 3 days on trying to make an app that looks pretty on 16:9 (iphone 5) and ipads (4:3).

I have not succeed so I am considering to make several version of the app adapted to different screen ratios. 16:9 and 4:3, maybe eve, 3:2.

What i really really want to know it's if it's possible to upload different app versions of a game i did in cocoonjs for different devices/ratios.

Like ipad version a 16:9 supported version of the app, iphone version 4:3 supported version...

Making multiple version is not an issue, what is an issue is to get them work on any mobile device.

So my question is there an option in cocoonjs to upload different versions without uploading different games, i mean upload everything in the same project without being forced to make a project for each version of my game.

Thank you!

vagaev

whatever you will do - CocoonJS will ALWAYS export your app as a "Universal" :) And changing things in Xcode will not give any results (iTunes will still see your app as "Universal")

just FYI

Damn.. How will i be able to make my game compatible with 16:9 and 4:3 devices ?

Any ideas?

make 4:3 window size

but 16:9 layout size

on start layout - scroll to center of layout

don't put important things on left and right border :)

for HUD objects (Score etc.) use anchor behavior

GOD HAIL THE PIG it works.

Thank you!

I just went through this. I used a couple techniques, a couple are already mentioned.

I use a centering device, it's a sprite that I pin all my UI objects to, then I set the sprite to scrollx, scrolly. This usually centers it nicely on the phones.

Anchor is also really great, although it flickers for me, and I'm still working on how to fix that.

Make sure your backgrounds are large enough for all devices. The easiest test is to load it in the browser, and resize the browser and hit refresh, if it looks good there, it will be nice in any phone.

Here's another example of how you could manage it, without using the anchor behavior - example.

Thanks dudes! I will try them all.

I build my games at Windows 8 min size 1366/768. When I place my HUD objects I make sure I leave enough space for them to move if the screens are too small. That way when they are anchored, they stay in relative position to the sides of the screen. Don't bunch all of your hud elements together or they will cause issues. Leave enough space near them and test on multiple screens to find a size that works. OR...

You can also test for the size of the viewport/window and have multiple invisible sprites on the screen, then based on the size of the window, snap your hud objects to different invisible sprites. For example if I have score and high score next to each other on larger screen, I may have to move score below high score on narrower screens so they don't overlap or go off the screen. With a bit of forethought you can do lots of neat things to account for screen sizes...

firebelly

I create invisible object with anchor, and then, after 0.01s, make it visible... I prefer that than "moving" anchor on every layout start

Hi guys vagaev szymek firebelly Colludium BluePhaze

Speaking of different ratios, can you check my bug report?

https://www.scirra.com/forum/objects-are-created-in-wrong-positions_t108552

Thanks so much!

Hi —, I'm not sure what's causing your issue. I found that sometimes C2 needs a tick or two to get the layout up and running properly before you can do things like create physics joints on objects, but this seems a bit different. I can certainly reproduce it but it's hard to say exactly what might cause it and, so, discern how to fix it. In the interim, you could create a shade object to make the screen black for 0.05 sec at the start of the game. I suspect the problem is due to the re-sizing of the canvas size and layout scale to fit the browser window size and something like that would not be noticed at the start of a game. As long as you restrict the player from continually re-sizing the layout, all will be well. Sorry I can't be of more help.

Hi — I think I have a temporary solution:

The objects have to be invisible, then after 0.01s I turn them visible.

I don't like to do this because I believe it's double work for the CPU (1create, 2move, 3set visible) instead of just (1create) the object in the proper place.

So, for now I think it's a solution, what do you think?

Hi guys vagaev szymek firebelly Colludium BluePhaze

Speaking of different ratios, can you check my bug report?

https://www.scirra.com/forum/objects-are-created-in-wrong-positions_t108552

Thanks so much!

This has been around for ages, and if I recall it's a problem with how often anchor resets the position. Ashley commented that there was no way (or reason) to fix this if I recall. My game has this issue as well.

—

yep, it is very old bug,

still not solved

and there is no better solution than "The objects have to be invisible, then after 0.01s I turn them visible"