Multi-Screen Support for different Android Screens

Hello COCOSavvies! Can you give me a link to your blog or tutorial that “CLEARLY” explains how to implement support for different Android Screens (im using Xcode, then run it on Eclipse [coz eclipse pretty much sucks!] ) ,

coming from Corona SDK, I find the wiki and ‘getting started’ pages of this website pretty useless, poorly commented documentation to be honest, spending hours scouring the web for tutorials for just ‘one functionality/feature’ . .

thanks :slight_smile:

Odd way to ask a question. What do you mean “support for different Android screens” exactly? Is there something that isn’t working the way you want it to? What code are you running for Android?

I’m not sure what you mean, “using XCode and then run it on Eclipse” but I strongly disagree with your categorization of the IDE as “much sucks!”

Anyone coming to a complex, evolving framework like Cocos2d-x and expecting to copy and paste their way to success will have some struggles.

For many users, a line like this is all that is required for Android to scale from mdpi to xxxhdpi

CCEGLView::sharedOpenGLView()->setDesignResolutionSize(720, 480, kResolutionFixedHeight);
CCDirector::sharedDirector()->setContentScaleFactor(1.0f);

If you are already setting designResolution and ContentScaleFactor correctly, and still having issues, I think the “COCOSavvies” here will need more details, perhaps even screenshots.

This document is incredibly useful, if highly technical.

http://www.cocos2d-x.org/wiki/Multi_resolution_support

The first time I encountered it, I wanted to scream and run away. Having come from Android SDK development, where things like this “just magically work” I really didn’t want to take the time to understand what the three (incredibly informative) diagrams contained within were trying to tell me.

@reyanthonyrenacia: Well if you have paid corona the money, I think you should stick with it.

1 Like

@corytrese
I meant multi-screen resolution support, and thanks for leading me to that wiki: i was so frustrated coz that wiki was suggesting a lot of things, crowding my noobie head with influx of information at once when all i wanted was to make sure images dont appear pixilated and are properly positioned always whichever android device (tablets,phones,etc) i use.

so im currently using this:

pDirector->setOpenGLView(pEGLView);
pEGLView->setDesignResolutionSize(960, 640, kResolutionExactFit);

i already feel the support from u guyz. thanks, and looking forward to be better,. cheers! :smiley:

that’s why i shifted here, coz i dont have the money to pay Corona SDK Pro. the free version is so limited so Im taking my chances here. Thanks for commenting! :smiley:

I would not recommend exactFit. It will stretch everything. Here is what I do

auto screenSize = glview->getFrameSize();
	glView->setDesignResolutionSize(512,342, ResolutionPolicy::NO_BORDER);

using NO_BORDER policy will in perfectly adjust without stretching your images.However you should not use fixed values for positioning sprites in your scene. Instead you should use VisibleRect class added to new coocs2d-x project so for example to set sprite in center you dont wirte

sprite->setPosition(Vec2(256,171));

but

sprite->setPosition(VisibleRect::center());
1 Like

@reyanthonyrenacia: Hi Friend. Unlike Corona, Cocos2d-x is open source and is to a lot extent community run. So there is no “Customer Support”. If you feel, you can contribute to the tutorials once your are up and running with Cocos2d-x.

For questions, pls be patient, I am sure that someone will answer your query. Also, pls be aware that like any framework there is a learning curve. So, hope you find Cocos2d-x helpful and will continue to use it and support it.

Definitely! Once I learn the ropes here, I will definitely make a easy-to-learn tutorial, because it pains me to see that it’s hard to find beginner-friendly tutorials in Cococs2dx.

thanks will give that a try or corytrese’s suggestion :smiley:

Kubas121 is definitely giving you good advice for Cocos2d-x 3.x, my code is for 2.x

You are getting distortion because kResolutionExactFit causes this:

Exact fit

The entire application is visible in the specified area without trying to preserve the original aspect ratio. Distortion can occur, and the application may appear stretched or compressed.

1 Like

For multi-resolution screens, I’ve decided to follow this article as my guideline. I set two different size as my reference to preserve the game’s aspect ratio. The first is for design resolution size, it’s used as my design resolution in cocos2d-x and the second is for game resolution size, it’s used as gameplay area to make sure the gameplay isn’t trimmed due to different aspect ratio between the screen and the design resolution thus will make the UX improved. As you may know when you set the design resolution size in cocos2d-x, the bottom-left (origin) of your screen is (0,0) and the top-right is (DESIGN_WIDTH, DESIGN_HEIGHT) and this coordinate space will be the same for any screen resolutions.

This is the code for cocos2d-x v3.x

auto screenSize = glView->getFrameSize();
auto designSize = cocos2d::Size(DESIGN_WIDTH_SD, DESIGN_HEIGHT_SD);
auto gameSize = cocos2d::Size(GAME_WIDTH_SD, GAME_HEIGHT_SD);
std::vector<std::string> searchPaths;

if(screenSize.width <= DESIGN_WIDTH_SD) {
	director->setContentScaleFactor(DESIGN_WIDTH_SD/designSize.width);
} else if(screenSize.width <= DESIGN_WIDTH_HD) {
	searchPaths.push_back("HD");
	director->setContentScaleFactor(DESIGN_WIDTH_HD/designSize.width);
} else {
	searchPaths.push_back("HD2");
	pDirector->setContentScaleFactor(DESIGN_WIDTH_HD2/designSize.width);
}

cocos2d::FileUtils::getInstance()->setSearchPaths(searchPaths);
glView->setDesignResolutionSize(designSize.width, designSize.height, ResolutionPolicy::NO_BORDER);

I hope this can help you with multi-resolution screens, I think the others already gave enough advice for resolution policy.

1 Like

What’s the best way to support higher resolution Android devices?

Positioning objects relative to the size of the screen is always the way to go over “hard-coding” positions in there.

What I mean is for ex, what about devices that display more pixels in the same space. On iOS, you have @2x (or -hd for Cocos2d-Swift) for retina displays. When you use @2x or -hd on iOS the images are double the size as the standard resolution images on non-retina devices, but they take up the same amount of space on screen. Working with that is easy.

Does Android have equivalent suffixes that “just work” the way iOS does? I just watched a tutorial where the developer was getting the screen size and manually setting up his own suffixes. Is that the way we have to do it?

Thanks very much, do you have a version of this code for Cocos2d-X V2 ??? i forgot to mention that :smiley:

wohoow, gonna publish our floppy bird clone later guyz :smiley:

i’ll give you the link when i’m done :smiley:, i know Google Play is cloyed with Nguyen’s fappy bird but this is my first foray in game dev using Cocos2dx, so might as well start somewhere :smiley:

cheers!

Don’t feel bad if Google takes your application down, they’ve been laying waste to Flappy Bird and Swing Copter clones left and right.

The king of clones is well protected from clones … the irony :wink:

Android supports a much wider range of DPI.

I currently have code that works to support everything from 120DPI to 640DPI.

The reason it is simpler in iOS is just that there is less diversity.

The question is more about your game – does it scale well between DPI? Or do you need to implement code that sniffs the device screen and configure it?

well, I don’t think I have that code for cocos2d-x v2.x. I will re-write the code, but I’m not sure if it’s gonna work or not.

CCSize screenSize = CCEGLView::sharedOpenGLView()->getFrameSize();
CCSize designSize = CCSizeMake(DESIGN_WIDTH_SD, DESIGN_HEIGHT_SD);
CCSize gameSize = CCSizeMake(GAME_WIDTH_SD, GAME_HEIGHT_SD);
std::vector<std::string> searchPaths;

if (screenSize.width <= DESIGN_WIDTH_SD) {
	pDirector->setContentScaleFactor(DESIGN_WIDTH_SD/designSize.width);
} else if (screenSize.width <= DESIGN_WIDTH_HD) {
	searchPaths.push_back("HD");
	pDirector->setContentScaleFactor(DESIGN_WIDTH_HD/designSize.width);
} else {
	searchPaths.push_back("HD2");
	pDirector->setContentScaleFactor(DESIGN_WIDTH_HD2/designSize.width);
}

CCFileUtils::sharedFileUtils()->setSearchPaths(searchPaths);
CCEGLView::sharedOpenGLView()->setDesignResolutionSize(designSize.width, designSize.height, kResolutionNoBorder);

so i hear, the flappy bird was not first of its kind… there’s actually a helicopter version of that in the Nokia (symbian) days of 'ole :smiley:

There is very good tutorial for doing that : https://www.youtube.com/watch?v=tpdyfiTlcJg&list=PLZ1QII7yudbf2opgE-EM2ac_qDpVpjXFc

1 Like