I’ve been having this issue for a while but the multi-resolution technique that was provided by the SimpleGame sample doesn’t work on all devices. My game works perfectly on all ios devices, and most android devices except few. I own an HTC sensation android device (540x960) and the resolution of the game on that device is screwed up and I can’t figure out a solution that works on all!
Anyways here is my code that I took from the sample game and modified it to work on my game:
// the design resolution size is 320x480
pEGLView~~>setDesignResolutionSize;
vector searchPath;
// if the frame’s width is larger than the width of medium resource size, select large resource.
if {
searchPath.push_back;
}
// if the frame’s width is larger than the width of small resource size, select medium resource.
else if {
searchPath.push_back;
}
// if the frame’s width is smaller than the width of medium resource size, select small resource.
else {
searchPath.push_back;
}
pDirector~~>setContentScaleFactor(frameSize.height/designResolutionSize.height);
//——— code ends here—————-
I’ve attached two screenshots showing the game on an iphone4 and how it looks like on my HTC sensation android phone.
Is there a way to solve this? How is everyone else solving this issue?
Actually it’s not the matter of resolution. It’s the matter of aspect ratio.
The best solution is to place UI elements relatively to windows dimensions. In your case, I’d place the ‘timer’ icon relatively to the left border of the screen and the ‘pause’ icon relatively to the right side. The white bar in the middle should be placed in center and it’s width should be relative to the width of the screen, if you want it to fill all the free space between those two icons.
Another solution is to fit the elements to the narrowest aspect ratio (I guess its 16:9 nowadays) and use ‘Fixed Height’ scaling policy.
Well, it seems that you are doing things right except that you should set the content scale factor accordingly to the width of the screen, not height.
You’re right it’s a matter of aspect ratio. I’m using fixed height scaling policy and I did test on fitting the elements with the narrowest ratio and it kinda works for most of the resolutions… I guess for the rest of the resolutions maybe I need to hardcode them
Actually I’m using fixed height because for my game i’m more concerned about the height than the width. As for the width I have to handle it using the ratio.
yeh tried that but it doesn’t work. Anyways found a solution by separating ios and android. So for ios i’m using the previous code that posted because it works on all ios devices (as for the bar at the in the screenshot was a bug in my code).
As for android I looked at all the resolutions out there (http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density), picked the most common ones for the android devices and came up with this and this and it works perfectly:
if (frameSize.width > mediumResource.size.width) {
searchPath.push_back(largeResource.directory);
CCDirector::sharedDirector()->setContentScaleFactor(4.8f);
}
else if (frameSize.width > smallResource.size.width) {
searchPath.push_back(mediumResource.directory);
if (frameSize.width 768 && frameSize.height 1024)
CCDirector::sharedDirector()->setContentScaleFactor(frameSize.height/designResolutionSize.height);
else if (frameSize.width 768 && frameSize.height 1024)
CCDirector::sharedDirector()->setContentScaleFactor(2.15f);
else
CCDirector::sharedDirector()->setContentScaleFactor(2.4f);
}
else {
searchPath.push_back(smallResource.directory);
if (frameSize.width 240 && frameSize.height 320)
CCDirector::sharedDirector()->setContentScaleFactor(1.075f);
else if (frameSize.width 240 && frameSize.height 400)
CCDirector::sharedDirector()->setContentScaleFactor(1.2f);
else
CCDirector::sharedDirector()->setContentScaleFactor(frameSize.height/designResolutionSize.height);
}
