Multiresolution - How to SHOW_ALL without black Borders?

Multiresolution - How to SHOW_ALL without black Borders?
0.0 0


I would like to use the multiresolution-technique from here:

I want to use a large background image to cover the whole screen - including the black borders.

Unfortunately, SHOW_ALL does not allow this. The red lines mark the content rect of the layer.

Test image with design resolution 480x320, testing on an iPhone 6 with 1334x750

NO_BORDERS is also not useful for this, since the origin of the scene is offscreen in this case.

I think cocos2d-x is missing a multiresolution policy that would be really useful.

Basically (0, 0) should be where the bottom left red marker is in the first image, but one should be allowed to also draw in the black border area.


I do it by setting the screen size as the design resolution:

auto director = Director::getInstance();
auto glview = director->getOpenGLView();
auto desSize = director->getVisibleSize();

glview->setDesignResolutionSize(desSize.width, desSize.height, ResolutionPolicy::NO_BORDER);


But if you do that, you can’t set your nodes’ positions according to your original design resolution (e.g. 480x320)

Any other ideas? :slight_smile:


well, I’ve implemented the multiresolution technique from v-play and I’ve explained it all here long time ago. I’ve also provided the snippet of my code


I’ve seen this before I started this thread here, but I doubt it is what I’m looking for.

I’m looking for a way to be able to design everything in a fixed resolution, the design resolution. Let’s use 480x320 for this example.

Independant of the device and it’s aspect ratio this 480x320 rect should always be on the screen completely and (0, 0) should be at the lower left of this rect.


You can fix it by designing in terms of percentages instead of absolute positions. At runtime you elaborate the absolute positions based on the screen size and the given percentages. For example let’s assume you are designing your game for a resolution of 480x320 and you want to position a node at (160, 120). With a simple math it turns out that this position is (0.25480, 0.5320), or, applied to each possible screen size (0.25screenWidth, 0.5screenHeight). On the other side, if you want fixed positions you can use fixed values.
If you will take this approach, I suggest you design your game only in terms of percentages, avoiding to specify any design resolution and absolute values (if not needed). As a rule of thumb, percentages are for scaling and absolute values are for fixed sizes and positions.


Yes, you are absolutely right. That works.

But cocos2d-x wants to have this design-resolution-system which lets you use absolute values, thought it does not work as intended - that’s what my thread is about :wink:


I tried modifying the cocos2d-x code and add a new ResolutionPolicy - SHOW_ALL_NO_BORDERS, but I didn’t have any luck yet getting it to work properly. There’s winSize, viewPortRect, scaleX and scaleY (and maybe other factors) that I don’t know exactly how they influence each other.

I basically just want the scaling of SHOW_ALL mode but being able to draw on the borders.

It’s probably quite easy to achieve this, but I can’t get it to work.

@nite I hope it’s okay if I tag you here and ask you for help directly. Could you give me some advice what I have to change to achieve this?


Any luck getting this work. I need this with my new game and can’t find a solution.


It’s a pity that it doesn’t work Cocos2d-x already.

I’m now using ResolutionPolicy::FIXED_HEIGHT, then calculating a “designRect” inside the actual screen that has the aspect ratio of the design size.
So yeah, it works - by just doing it all manually.


I’m a little late, but maybe this is helpful :wink:
I wanted to do the same as you mentioned. So I modified the cocos2d-x code a bit:
Patch: (2.4 KB)
(base is cocos2dx-v3.15.1)


  1. added new ResolutionPolicy::COMPLETE_DESIGN
  • The entire application is visible in the center of the screen without distortion while maintaining the original aspect ratio of the application AND no borders appear
  1. added function Director::getDesignSize()
  • Returns design size of the OpenGL view in points. The value has to be set via GLView::setDesignResolutionSize() before.
  1. added function Director::getDesignOrigin()
  • Returns design origin coordinate of the OpenGL view in points.

I had to change the visible rectangle to be able to make use of the black borders. Therefore I added the mentioned Director::getDesignOrigin() to get the origin of the design area.

  • Visible Origin is now always (0/0) for all ResolutionPolicies.
  • And the Design Origin is the point where the design begins. Different from Visible Origin for NO_BORDER and COMPLETE_DESIGN.

Caution! With original cocos2dx code it’s the other way around.

How to use:
example design size: 320x480
Please Note: the background image has to fit each aspect ratio. Background image > design size.

Design Area:
When designing your game inside your design area just add your point to Director::getDesignOrigin().

auto director = cocos2d::Director::getInstance();
auto sprite = Sprite::create();
sprite->setPosition(director->getDesignOrigin() + Vec2(80, 100));

4:3 device:

16:9 device:

Visible Area:
When designing your game inside the complete visible area just add your point to Director::getVisibleOrigin().

auto director = cocos2d::Director::getInstance();
auto sprite = Sprite::create();
sprite->setPosition(director->getVisibleOrigin() + Vec2(80, 100));

4:3 device:

16:9 device:

Please Note: I haven’t tested each policy completely yet. First tests in ios simulator have been successfully :slight_smile:. Currently, I only use my own policy ResolutionPolicy::COMPLETE_DESIGN.