Multiresolution - How to SHOW_ALL without black Borders?

I would like to use the multiresolution-technique from here:
http://v-play.net/doc/vplay-different-screen-sizes/

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.

1 Like

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: ResolutionPolicyCompleteDesign_patch.diff.zip (2.4 KB)
(base is cocos2dx-v3.15.1)


Modifications:

  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:
design_point_4_3

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:
visible_point_4_3

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.

Hi all, anyone has a different solution that don’t need to modify cocos framework?

Till now, I don’t know how to add a background layer (or something else) to The Black Borders of SHOW_ALL policy.

I’ve battled this specific issue too (and have the scars to prove it! :dizzy_face:).

Here’s what we came up with that works for our specific app:

    auto designResolutionSize = cocos2d::Size(1920, 1080);
    auto frameSize = glview->getFrameSize();
    auto aspectRatio = frameSize.width / frameSize.height;

    // Set the design resolution
    if (aspectRatio < (16.0 / 9.0))
    {
        // 4:3 or similar screen, so do fixed width
        glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::FIXED_WIDTH);
    }
    else if (aspectRatio >= 2.0f)
    {
        // wide screen, so do fixed height
        glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::FIXED_HEIGHT);
    }
    else
    {
        // default is fixed height
        glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::FIXED_HEIGHT);
    }

    director->setContentScaleFactor(1.0f);

Notes: Our design resolution is 1920x1080, and everything in this area is guaranteed to always be visible. Depending on the aspect ratio of the device, you get more space in height or width, so it’s up to you to decide if you want to scale your objects or not (both X/Y by the same scale, so no strange aspect ratio of the graphics). You can be selective with what you scale too, like just the UI, or the game objects etc., depending on how you lay out your scenes. You would have to write some position conversion code to keep things aligned with top/left/bottom/right if required (like for UI items), but that’s relatively trivial.

You would also need to provide background images that are big enough to cover whatever device resolution and aspect ratio you want to support.

There’s a lot you can do with this, and we found it to be a better implementation than what is already available in the default code template.

1 Like

I think this actually should work for most cases. I do something similar with deciding the resolution myself based upon screen size and some 3rd grade math.

1 Like

@R101 Many thanks for your solution.

But I’m using a tilemap to develop the game. This link (https://felgo.com/doc/felgo-different-screen-sizes/) is my expected solution.

Brief:

  • a tilemap with a fixed design solution (eg 480x320) and always display all tiles.
  • a background - the one to full fill the Black Borders of SHOW_ALL policy.

Do you have any idea to apply this in cocos2d-x? (Question 1)

Another question more: (Question 2)
In my case, with the current cocos2d-x framework (v3.17.1), after setting the designResolution policy to SHOW_ALL in AppDelegate, so my scene only displays inside the VisibleSize. So my question is how can I fill the black borders with an under background layer or another sprites/node/…?

Thanks in advance

I don’t know enough about tilemaps to help you with that.

You can’t use SHOW_ALL, since you no longer have control of the area where the black bars are. So, use either FIXED_HEIGHT or FIXED_WIDTH.

Let’s go over what you’ve chosen. Your selected design resolution is 480x320, so that is an aspect ratio of 3:2. That 3:2 window will fit inside bigger view areas of 4:3 and 16:9.

For 4:3, you would choose FIXED_WIDTH, so the height becomes variable, meaning you need to have a background that is the following size:

Width of 480 / 4 = 120, so multiply that by 3 for height, and you get 360. Final background size required for 4:3 is 480x360.

For 16:9, you would use FIXED_HEIGHT, so the width is variable:
Fixed height 320 / 9 = 35.556, multiplied by 16 to get the width = 569. So for 16:9, you would need a background of 569x320.

So, to make sure both 4:3 (using FIXED_WIDTH) and 16:9 (FIXED_HEIGHT) show no black borders, you would create a background that is at least 569x360 in size.

Now, there is a new problem for you to factor in to this, the iPhone X, which has a resolution of 2436x1125, so a ratio of 2436/1125 = 2.16533 (let’s say a ratio of 19.5:9).

To cater for that, you would use FIXED_HEIGHT, so to make sure it works without black bars on the sides for this ratio, you would need the following size:

320 / 9 * 19.5 = 693.33 width.

So, the final background you would need to supply to make sure you get no black bars is 694x360.

If you look at the link you put in your post, you’ll see that it’s the exact resolution they suggested too, and the bit of code I supplied in my previous post is what you need to make sure you get no black bars, as long as you use a background of 694x360.

1 Like

320 / 9 * 19.5 = 693.33 width.

So, the final background you would need to supply to make sure you get no black bars is 694x360.

Sorry, I don’t understand these. Why currently we have the height 360, so FIX_WIDTH then width = 360/9 * 19.5 = 780. Then background this 780x360?

And 694x360 != 19.5x9 = 780x360. If I use 694x360, I will have black borders for 4 sides (up, down, left, right).

Thank you so much

That’s not what you initially posted as your example. You stated an example of 480x320, not 480x360.

480x320 is your default window if the screen is a ratio of 3:2.

If you supply a background that is 694x360, then this is what you get when you use FIXED_WIDTH and FIXED_HEIGHT as shown in the bit of code I posted earlier:

  • On a 16:9 device, the code will set the screen to FIXED_HEIGHT, so the visible pixel size will be 569x320.

  • On a 4:3 device, the code will set the screen to FIXED_WIDTH, so the visible pixel size will be 480x360.

  • On a 19.5:9 device, the code will set it to FIXED_HEIGHT, so the visible pixel size is 694x320.

You specifically said the default design resolution is 480x:320, so a ratio of 3:2. If you want to use 360 as your default height, then that means you’re making your default ratio 4:3.

If you still don’t quite understand, then perhaps you should search for more information regarding this, because I honestly don’t know how else I can explain these concepts to you, but maybe someone else here can.

2 Likes