Hi,
Recently i began work on porting a iOS app to Android. I followed the HelloWorld sample and designed the game for 480X320. Following the sample, I decided to go with 3 resolutions for the resources( (480X320), (800,480) and 1280X800).
All positions and images work perfectly in 480X320 but problem here is that in devices supporting the other two resolutions the images appeared to be cropped around the sides. How do i fix this? I have tried all the design policies, they dont seem to work.
Did you set your design resolution size? It can be a bit difficult to get the hang of this initially, but it does work. Did you read this (long) document? http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Multi_resolution_support
Ben
Hi Ben,
I did set the design resolution size. My design resolution is 480X320. I have tried every resolution Policy, backgrounds either get cropped or shrunk in resolutions other than the design resolution
Sorry, I didn’t read your first post thoroughly enough and I missed the fact that you are using images with strange resolutions. You really need your artwork to be the same aspect ratios for the auto-resolution stuff to work. Having ratios of 1.5, 1.67 and 1.6 will give you three different interpretations of that artwork on the device. I recommend you use two sets of artwork, one at 320x480 and the other at 640x960. That sorts you out with 1:1 mapping on iPhone, and allows you to scale at the right aspect ratios on Android and others. If you want to add a third, larger resolution then make sure it’s in the same aspect ratio as 320x480 and 640x960.
Hope that helps!
Ben
Hi Ben,
Thanks for the reply. Could you please elaborate on this
and allows you to scale at the right aspect ratios on Android and others
I’m sort of confused on how to maintain aspect ratio’s on all android devices. Is it possible to avoid letter boxing altogether
regards,
Raghu S
Raghu S wrote:
Hi Ben,
Thanks for the reply. Could you please elaborate on this
> and allows you to scale at the right aspect ratios on Android and others
>
I’m sort of confused on how to maintain aspect ratio’s on all android devices. Is it possible to avoid letter boxing altogether
>
regards,
Raghu S
Sure. That’s what the policy thing actually dictates. You design your UI for a particular screen size (say 320x480). Then you use one of the policies to decide how it is scaled on other resolutions. One policy allows you to keep the aspect ratio (with black borders), and another lets you scale up to fill all available space (no borders, but a stretched image on some screens).
If your game has a single background image then here is a nice technique: use the policy with the borders, but then detect at runtime the difference between the screen resolution and design resolution, and stretch your background image so that it covers the borders up. In other words, make your background image 110% wider than it normally would be (or whatever the difference is on that particular screen). That way your main UI will fit the screen perfectly, but your background will stretch to get rid of the borders.
Here’s a bit of code which does the background stretching thing:
//Scale background image for non-iPhone ratio screens
CCPoint autoScale = CCPointMake(CCEGLView::sharedOpenGLView()>getScaleX, CCEGLView::sharedOpenGLView>getScaleY);
if
{
//Stretch on X
ccLayer~~>setScaleX;
bgImage~~>setScaleX(autoScale.x/autoScale.y);
} else {
//Stretch on Y
ccLayer~~>setScaleY;
bgImage~~>setScaleY(autoScale.y/autoScale.x);
}
Does that all make sense?
Ben
Thanks Ben, This was really helpful.
My question is about the art itself. If you have an artist give you images that are very high res, at 1024 x 768 POINTS?. Does one need to resize the artwork to 1024 x 768 PIXELS? Isn’t the point of designing in Points and setting a design resolution so we dont have to do this?
Example:
Landscape
Design Resolution is 480 x 320
Screen Size is 1024 x 768 (ipad Mini)
Background sprite is 4096 x 3072 pixels (or 983.07 x 737.3 points)
So example code I would hit on app startup
static Resource smallResource = { cocos2d::CCSizeMake(480, 320), "iphone" }; static Resource mediumResource = { cocos2d::CCSizeMake(1024, 768), "ipad" }; static Resource largeResource = { cocos2d::CCSizeMake(2048, 1536), "ipadhd" }; static cocos2d::CCSize designResolutionSize = cocos2d::CCSizeMake(480, 320);
else if (frameSize.height > smallResource.size.height)
{
@ CCLOG (“Medium Resource”);@
@ searchPath = mediumResource.directory;@
@ pDirector->setContentScaleFactor(mediumResource.size.height/designResolutionSize.height); // so 2.4@
}
This run but the background is only a portion of my screen.
If I change the code to use frameSize then it looks right, but only on iPad Mini, if I change device to iPad (Retina) it is wrong.
else if (frameSize.height > smallResource.size.height)
@ {@
@ CCLOG (“Medium Resource”);@
@ searchPath = mediumResource.directory;@
@ pDirector->setContentScaleFactor(mediumResource.size.height/frameSize.height); // so 768/768 = 1@
@ }@
Can you help me understand how to keep my artwork and adjust the size for the various device resolutions?
Hey Jason,
Here is my code; this works fine with 320x480 and 640x960 artwork. Hope it helps!
CCSize screenSize = CCEGLView::sharedOpenGLView()->getFrameSize();
CCSize designSize = CCSizeMake(320.0f, 480.0f);
//Figure out when to use high-res artwork…
if (screenSize.height > 480.0f)
{
CCSize resourceSize = CCSizeMake(640.0f, 960.0f);
std::vectorstd::string searchPaths;
searchPaths.push_back(“Images2x”);
CCFileUtils::sharedFileUtils()>setSearchPaths;>setContentScaleFactor(resourceSize.height/designSize.height);
pDirector
}
CCEGLView::sharedOpenGLView()->setDesignResolutionSize(designSize.width, designSize.height, kResolutionExactFit);
Ben
Hi Ben,
OK, I am going along these lines. Thanks for the example.
I am still confused a bit as I am working on iPads for not and iPhones later. Every example uses a small design size. If I chance my design size to 1024 x 768, what am I effectively doing. I read this: http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Multi_resolution_support
but It doesn’t quite say what the design size settings really do and how to make a decision based upon it.
Your design size shouldn’t change; that’s really the whole point of using this method. You should pick one design size (320x480 seems a good one), and then space out each of your UI elements according to that design size. So if you want a 50x50 sprite in the center of the screen you should place it at 135,215 (i.e. (320-50)/2,(480-50)/2). Place all of your stuff as if you’re placing it on a 320x480 screen - don’t worry about any other resolutions for now. You can literally finish your game at this point, positioning everything as if it were on a 320x480 screen.
Ok, so once you’ve got everything up and running at your design size, then you can mess around with the multi-resolution policies. The idea is that it will automatically scale your existing stuff from the 320x480 screen to whatever resolution the user is running on. You define how this works by setting the policy, i.e. stretch it, cut the edges off, etc. Once you’ve set it up (by using the above code), then cocos2d-x will automatically make your game fit the screen. You don’t need to make any changes in the UI layout section of your game - all of that stuff still thinks it’s writing to a 320x480 screen. The magic of cocos2d-x will make it scale up or down as necessary.
All pretty straight-forward so far? So assume you’ve designed your artwork for 320x480, but the user is running at twice that (640x960). Cocos2d-x will auto scale your UI so that it fills the screen, but the image files you are using will look fuzzy and scaled up. At that point you’ll want to swap in your higher-res artwork by adding it to the searchPaths (see above code). Then you need to tell cocos2d-x how big this new artwork is in comparison to your design size, hence the call to “setContentScaleFactor()”. This tells cocos2d-x by how much it should scale this new artwork to make it fit your design size.
Make sense? 
Ben
1 Like
Hi Ben,
This is very helpful. I very much appreciate it!
One point of clarification, the 320x 480 is points and not pixels?
I have had the art designed in points and I know that cocos2d-x uses points by default.
Nope, pixels. All in pixels.
Good luck with it!
Ben
ah ha, I was adjusting the size of the artwork to 320 x 480 Points!
Great explanation @ben ward you succeed to explain something that i tried to understand for 2-3 days
thanks !
meir meiry wrote:
Great explanation @ben ward you succeed to explain something that i tried to understand for 2-3 days
thanks !
Glad I could help!
Ben
ben if i may ask you question on this subject that still im not sure if i understand . here is what i have . i developing on windows and on mac , in windows im using opengl simulator and in mac im using the xcode and the iOS iPhone simulator and device. i take the code from the HelloCpp Example , the one with the AppMacros.h file . the problem is that when i develop in windows and i want to for example place rectangle with size 768 x 768 on the screen in windows its always give me display with border on the sides , im using kResolutionNoBorder. i start it with : eglView->setFrameSize(768,1024); in the main.cpp. also why are the Default2x.png and Default-568h@2x.png are with 640 width and not 768 , and in the HelloCpp its 640
what is the right screen size in retina iPhone app display ?
Thanks
Ah, I’m afraid I can’t really help you with the Windows version - I haven’t actually used that platform myself. Sorry! Perhaps it’s to do with your design size not matching the aspect ratio of your window frame?
When I did my port to Mac OSX, I kept the same design size and scaled to fill, but then placed two extra bitmaps on the left and right edges (i.e. –160.0f and 320.0f, or similar depending on your aspect ratio). As the game was interface led this allowed me to keep all the important UI elements in the centre of the screen, but use an extended background for the edges on a widescreen display. Perhaps you can investigate something like that?
Here are the iOS resolutions you’ll need to support:
iPhone3GS and lower: 320x480
iPhone4/iPhone4S: 640x960
iPhone5: 640x1136
iPad 2 and lower: 1024x768
iPad (retina): 2048x1536
Really you’ll want to support all of these in your app. The only real gotcha is that you’ll need to include the Default-568h@2x.png file before the OS goes into “4-inch” mode, so make sure that file is present otherwise you’ll get some weird results.
Good luck!
Ben
Thanks ben!
@ben can you please take alook at this question that i dont understand how to solve
i tryed to connect you but there is no email so sorry this is the only way …
http://www.cocos2d-x.org/boards/6/topics/33443