[Discussion][SOLVED] Multi Resolution with SD and HD graphics

[Magniffect]

Why wrong?

I was wrong when I said that you need to take care of _window_title_height.

Also, you’re not using this mediumResolutionSize anywhere in the code, so fine, no problem.

I use it here

director->setContentScaleFactor(mediumResolutionSize.height/designResolutionSize.height);

And 960 is the height for the landscape.

I always keep extra spaces(unknownly calculated but I can keep it to 100-250 pixels for safe side, I guess). Since my side 720 height wise is always shown, so I keep expanding outside starting from 960x720.

It is good, but in some cases a navigation bar will affect the size of the safe area.

[catch_up]

director->setContentScaleFactor(mediumResolutionSize.height/designResolutionSize.height);

Also, you’re not using this mediumResolutionSize anywhere in the code, so fine, no problem.

Oops. I meant mediumResolutionSize.width you’re not using anywhere

And 960 is the height for the landscape.

Now, it won’t be used anymore as per the background image resolutions I wrote in last to last post…

[Magniffect]

they can follow FIXED_WIDTH approach, where they design background size as 1280x960 keep RR as 1280x720.

Yes, I can use FIXIT_WIDTH. But I have the square area in the center of my layout and I would like to use as much space as I can for it.

Now, it won’t be used anymore as per the background image resolutions I wrote in last to last post…

But it is still the height!

Now the topic is more like a chat … haha

[Magniffect]

I mean, then your game should be as below, where blue area is the screen area.

Agree. But it works only when the background images may be stitched.
… Although if you have a designer you can always adjust the art under the requirements of the project.

p.s
How do you think maybe it will be better to rename the topic? There are 24 posts here, but no one else joined the conversation.

[catch_up]

Yes, I can use FIXIT_WIDTH. But I have the square area in the center of my layout and I would like to use as much space as I can for it.

Yeah correct. It depends upon game type

Now the topic is more like a chat … haha

p.sHow do you think maybe it will be better to rename the topic? There are 24 posts here, but no one else joined the conversation.

Haha no problem What shall I name
Some cool like “[Chat]MSR Demystified”

[Magniffect]

Some cool like “[Chat]MSR Demystified”

Cool!

“[Solved?] MRS. Three simple words and a big big discussion. Warning! Lots of text, lots of images! Magniffect’s bad English.”

More seriously, I would mention at least the “Multi-resolution”.

[catch_up]

Magniffect’s bad English.

Not really!
I didn’t got any mistake.

[Magniffect]

Thanks for the kind words!

Now you can add the tag “off topic”

[catch_up]

Now you can add the tag “off topic”

I think it’s related to this cocos2d-x topic as the code is given and is directly related to the cocos2d-x C++ even though C++ is not tagged as mostly concepts are discussed. What I feel is that, it’s good for it to be here unless moderator feels it to be changed… Pretty sure this discussion will help others.

[Magniffect]

I think it’s related to this cocos2d-x topic as the code is given and is directly related to the cocos2d-x C++ even though C++ is not tagged as mostly concepts are discussed. What I feel is that, it’s good for it to be here unless moderator feels it to be changed… Pretty sure this discussion will help others.

Now you can add the tag “off topic”

It is just a joke. Because we were not serious when discussing how to name the topic and English. (Despite the fact that I really believe that my level of English is not good enough.)
But I think it is good to be not serious sometimes.

[catch_up]

It is just a joke.

But I think it is good to be not serious sometimes.

Oh… haha… I couldn’t figure it out

[camkadev]

hi folks, you have nice discussion, personally myself i used @Maxxx solution from there for my game Bang Russian Roulette
this solution works well for iOS and Android

[catch_up]

Hi @camkadev
Glad to know that.
Just checked his solution. Will look into detail a bit later. Also, I downloaded your game, will try today night. How did you implement multiplayer(lobby)

Also, one thing. Maxxx solution has 5 kind of resolution folders. I want to avoid that bcoz. the overall size of app will increase unnecessarily and I don’t wish to do that.

In such scenarios it’s always best to publish app according to screen sizes…

[camkadev]

@catch_up the multiplayer is made with native low level Sockets and it is crossplatform solution, here is example, it is made as i did in my project.

currently my server is down for a long time…

[catch_up]

Thank you for the git repo. I’ll learn some concepts. I have very very less idea about how servers for game apps work

[Maxxx]

You can use my solution with fewer resources if you want to - you just need to decide which sizes you want to look perfect and which you’re happy to compromise on.
I just wrote the solution to provide what I think is as close to a ‘perfect’ solution as possible!

[Alwyn]

@Maxxx That’s a very nice reference document which you’ve come up with for multi resolution support.But for some of the devices,especially in android,the game UI will get cropped because of the design resolution set.

For all those who are struggling with Multi resolution support,
I’d just like to add on to the discussion here with my inputs on whatever I have learned in working with multi resolution support in cocos2d-x.

The design resolution is the most important in multi resolution support and should be set to the correct value for the game UI to look best.The resolution policy which is set while setting the design resolution is another important factor which determines how your game UI is rendered.

Depending on your game design,you could choose between EXACT_FIT,NO_BORDER,SHOW_ALL,FIXED_WIDTH and FIXED_HEIGHT policies.According to me,if you want to avoid any sort of cropping in your game UI you should use the NO_BORDER resolution policy.
To make your game UI compatible on all devices across multiple platforms(android/iOS/Windows),it’s very important to keep in mind the aspect ratio of the device you are targeting.You can have an asset for each of the aspect ratios which the platform supports and load the same.

The asset can be of a smaller dimension which can be scaled up based on the device resolution.I’ll give an example to demonstrate the above point.

Say I’m building a game targeting android and iOS platforms.On iOS there are fewer resolutions so it’s easy to manage loading of resources somehow.But in android,the number of resolutions are so many,that it’s difficult to choose the optimum design resolution.In this case,the resources can be loaded based on the device aspect ratio.Some of the aspect ratios found in android are-16:9,5:3,4:3,etc.

So in AppDelegate,the reference design resolution can be taken as-
Size referenceDesignResolution_16:9 = Size(640,360); // for 16:9
Size referenceDesignResolution_5:3 = Size(640,384); //for 5:3
and so on.
The aspect ratio is calculated as screenSize.width/screenSize.height.

The assets can be designed based on the above reference design resolution for each aspect ratio.Then set the design resolution of the glView as-

auto screenSize = glView->getFrameSize();
glView->setDesignResolution(screenSize.width,screenSize.height,ResolutionPolicy:NO_BORDER);

With the above approach if I have android device of resolution (2560x1440) and (1280,768) for instance,referenceDesignResolution_5:3 will be used for (1280x768) device and referenceDesignResolution_16:9 will be used for (2560,1440).The resource can then be scaled to fit the specific device by using a scaling factor calculated by -

auto scaleFactor = screenSize.width/designResolutionSize.width;
resource->setScale(scaleFactor);

The above approach can be used for iOS also.

[Magniffect]

Hello @Alwyn !

Nice post.
But I do not agree with the way you use setDesignResolutionSize().
The basic idea of Multi resolution support is to have one Design Resolution (DR).
The basic idea of ResolutionPolicy is how DR will be scalled to SR.
In your case, ResolutionPolicy has lost its meaning.

How about case aspect ratio of the screen is 16/9 + navigation bar?

Do you use Multi resolution support only for UI?

edited - added formatting

[Alwyn]

Hi @Magniffect the way you use Multi Resolution Support goes by how you have designed your game.There is no single approach to it.In my case the above approach which I described worked on both iOS and android.For iOS,the method which you said of having One Design Resolution worked,but not for android,there was lot of cropping.

For the case aspect ratio(16/9) + navigation bar which you have mentioned,the reference design resolution size will be Size(640,360-height of navigation bar).If,for example,I consider height of navigation bar is 44 pixels,the reference size will be Size(640,316).Similarly if I have aspect ratio(16/9) with tab bar at the bottom,the reference design resolution size will be Size(640,360 + height of tab bar)

I have described the approach for those who may have their game UI designed to utilise this approach.

[Magniffect]

Yeah, I agree that it depends on the app and on your preferences.

I just noticed that you mentioned NO_BORDER, and then use

auto screenSize = glView->getFrameSize();
glView->setDesignResolution(screenSize.width,screenSize.height,ResolutionPolicy:NO_BORDER);

But in this case you can use any ResolutionPolicy, nothing has changed.
This is equivalent to you do not specify the Design Resolution (DR).

For iOS,the method which you said of having One Design Resolution worked,but not for android,there was lot of cropping.

It works on android.
There is one more important concept - the Safety Zone. It is a part of the DR that will be visible on any device.

For the case aspect ratio(16/9) + navigation bar which you have mentioned,the reference design resolution size will be Size(640,360-height of navigation bar).

How many referenceDesignResolutionS should be in AppDelegate?
How many resource folders you have for this?

auto scaleFactor = screenSize.width/designResolutionSize.width;
resource->setScale(scaleFactor);

Did you mean reference designResolutionSize? In your case, the width of each your referenceDesignResolution equal to each other.

Did you mean actual designResolutionSize? Then scaleFactor will be always equal to 1.