Supporting Multi-Resolution

cocos2d-x C++
#1

Hello everyone,

I have read all the forum posts on supporting Multiple Resolutions using Cocos2d-x before making this post.
I am a bit confused right now to be frank, but my question is

I have resources of 3 kinds 480x320, 1024x768 and 2048, 1536.

[I have this

@cocos2d::CCSize designResolutionSize = cocos2d::CCSizeMake(960, 540);@

in the AppMacros.h]
I tried to use it on an Android emulator with 240x320 screen size and ldpi. And my assets get cut from the side when I use the ExctFit or NoBorder resolution policies, but appear perfect on my motorola razr with a resolution of 960x540.

Eg: If I change to [

@cocos2d::CCSize designResolutionSize = cocos2d::CCSizeMake(480, 320);@

] the images do not cut on the emulator but they get cut out on my motorola razr

In short I am trying to support all kind of screen sizes even if they require some distortion/stretching but i don’t want anything getting cut/crop and hence not being visible.
Any help is greatly appreciated! thanks a lot :slight_smile:


EmulatorScreenShot.png (108.0 KB)

#2

Stretching is fine if the image is just a plain colour or pattern.
If the image has more than that (text for example) then its going to start to look strange on different devices/screen res.

My recommendation is to allow the images to be cropped rather than stretched.

You make sure that the sections that will be cropped just have background colour and wont matter if cropped out.
The important centre section of the image will be displayed the same on all devices without getting squashed/stretched.

This would work well in your example as the bottom blue, top blue and mountain can be cropped without losing anything.

#3

thanks a lot for the reply!

I got the point :slight_smile: highly appreciated :slight_smile:

#4

notice 320*240 and 960*540 are different ratio!

320/240 = 1.333333333
960/540 = 1.777777777

so a simple scaling will Not do the trick.

the no border policy makes your screen go out side the screen, while show all policy shrinks your design resolution so everything fit inside the actual screen (with border if ratio is different)

#5

So what do you suggest I should do in this situation ? Both in terms of art assets and also programming ?

#6

show all is simpler,

no border is harder for art assets, as you have to consider different kind of ratio when designing

as for programming, remember to use VisibleOrigin as the bottom left corner instead of ccp(0,0) //this applies to both no-border and show all

and VisibleRect as your screen size, instead of your design size

#7

As Hao Wu said, using VisibleRect::right(), VisibleRect::top() etc is the right way to go.
This way, what ever setting you use (no border, show all etc) your UI elements will always be in the right location on the screen.

No Border is the best looking (in my opinion) as the black borders look a bit rubbish.
It is a bit harder to get right but worth it in the end.

#8

What if one of my game main elements suppose a Chess Board gets cuts either in Width or Height ?

#9

If you need full screen then go show all and live with the black bars.

If not then add a border round the image, this will then get cropped out when using no border.