how to draw on blank area when using setDesignResolutionSize

cocos2d-x C++
#1

Hi, I am using latest cocos2d-x. I found setDesignResolutionSize() is very convenient.

I use setDesignResolutionSize(960, 640, kResolutionShowAll) and then the android 800x480 has left/right blank area.
It’s expected result but I want to fill the left/right area.

How can I draw images or text on it? Setting x position to negative value doesn’t work.

Could anybody help me?

Regards,
Daesung

#2

Still haven’t used 2.0.2 but I’ve read this thing here
So instead of using Show All, use Exact Fit or No Border instead.

#3

@Lance, if we use kResolutionExactFit, the screen is width and height have different scale.
If we use kResolutionNoBorder, some area is clipped.
Both have no border but they are not desired results.

#4

Well, instead of using the setDesignResolutionSize() method, you could leave it untouched and have your sprites scaled down by using the formula

float scalingFactor = MIN( SPRITE_SIZE.width / SCREEN_SIZE.width, SPRITE_SIZE.height / SCREEN_SIZE.height );

After that, your UI should look like something similar to Show All, the only difference is that you have access to the black borders. You can then put filler graphics in it or whatever you want.

#5

Please use kResolutionNoBorder mode, but place your ui elements based on relative position.
For details, you could refer to VisibleRect class in TestCpp.
Multi-Resolution is supported well since 2.0.4. So please use v2.0.4 or v2.1. Thanks.
The article for demonstrating how to use Multi-Resolution is updated here http://cocos2d-x.org/projects/cocos2d-x/wiki/Multi_resolution_support.

#6

James Chen wrote:

Please use kResolutionNoBorder mode, but place your ui elements based on relative position.
For details, you could refer to VisibleRect class in TestCpp.
Multi-Resolution is supported well since 2.0.4. So please use v2.0.4 or v2.1. Thanks.
The article for demonstrating how to use Multi-Resolution is updated here http://cocos2d-x.org/projects/cocos2d-x/wiki/Multi_resolution_support.

I can’t find TestCpp or VisibleRect. I’m using Cocos2d-x 2.0.1

#7

David Small wrote:

James Chen wrote:
> Please use kResolutionNoBorder mode, but place your ui elements based on relative position.
> For details, you could refer to VisibleRect class in TestCpp.
> Multi-Resolution is supported well since 2.0.4. So please use v2.0.4 or v2.1. Thanks.
> The article for demonstrating how to use Multi-Resolution is updated here http://cocos2d-x.org/projects/cocos2d-x/wiki/Multi_resolution_support.
>
>
I can’t find TestCpp or VisibleRect. I’m using Cocos2d-x 2.0.1

It’s on 2.0.4, not 2.0.1

#8

My solution to that problem was to use kResolutionNoBorder, and then scale down my base node so that everything fit in the screen (for example, my base design resolution size is the iPhone, so on the iPad everything is scaled down to 0.89).

After that, I did a custom system to scale/move required UI elements to give the impression you are always in a native design resolution size : using the real device size, move some elements a bit so that they are at the edge, and scale up some elements so that they take all the width or height.

I hope this help.