Best way to handle proportions for Universal (iOS) endless runner?

cocos2d-x
1

I’m getting ready to wrap up my first project, and I decided I would like to make the app universal (iPhone and iPad). It’s a little later than an ideal time do decide to implement such functionality, to be sure. I’m using a precompiled Cocos2d-x 3.10 with the scene staged in Cocos Studio 2.

The difficulty is that the game is an endless runner using portrait mode, and switching from the 16x9 iPhone orientation to a 4x3 will cause inherent adjustments to the difficulty of the game. For example, moving to portrait 4x3 means the user can see the gaps relatively sooner and have more time to adjust, unless I utilize a Cocos2dx resolution mode like Show all. Unfortunately, any mode would result in distortion, cropping, or a border. A border, like the one that ‘Show all’ would produce, is the only way that gameplay wouldn’t be affected, but it would be ugly.

My current solution that I’m considering implementing is to copy all the assets into a separate Cocos Studio project and export to a separate .csb file. Most, if not all, of the game is structured by positioning and moving according to a factor of contentSize, so the manual adjustments would be minimal. Then I can use Xcode to determine what device is being utilized and load the appropriate .csb, and the logic code should all be the same.

The obvious drawback is that any adjustment that I make to MainScene.csb would then have to be duplicated carefully in MainSceneiPad.csb. But I’ll deal with that if it’s the best way to achieve native resolution without any change to gameplay difficulty.

So, my question is this: am I overlooking a dead simple way to achieve this? I don’t want to invest the time/effort it would take to implement this and realize I didn’t have to, haha.

2

To be honest, I have never had the result I wanted when trying to use the same assets for all screen sizes. What I do is use separate spritesheets for each device, with the assets the size I want for that device.

3

That’s a great point. I’m hoping to get away with using the same assets since the style is pixel art and I started off with higher resolutions…so far it has scaled really well.

The aspect ratio itself is the only problem that I’ve faced. On a portrait orientation iPad, the endless runner (with assets moving from right to left) would be “wider” than on a portrait orientation iPhone, since it’s 4x3 opposed to 16x9. So even if the assets scale appropriately (or even if I use higher resolution assets), the increased width means players would have more time to adjust to the placement of gaps (since the screen is wider they travel farther).

I think I’ve decided that a completely different .csb (with the same class names tying to the same game logic) is the way to go here. I can reposition all the assets so that the player would not have an advantage over iPhone users. If I need to provide higher resolution assets, that means I can also accommodate that with the new .csb instead of an Xcode asset catalog, making an easier transition to Android.

4

If anyone else sees this post, after some more experimenting I realized that I can use the same .csb file for all deployments: I now position the player sprite a set distance from the right edge of the screen. This places her in different areas on different aspect ratios, but guarantees that the user will always have the same amount of time to react.