0 Favourites

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!

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • 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 lolva, 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 Colludium. 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.

  • lolva

    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"

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread hot topic
0 Favourites
CocoonJS plugin updates
519 48,606
tuzke's avatar
tuzke
Unread hot topic
392 34,837
Joannesalfa's avatar
Joannesalfa
Unread hot topic
0 Favourites
CocoonJS 1.4 update
130 21,594
tamngon's avatar
tamngon