How to center ResolutionPolicy::FIXED_HEIGHT

cocos2d-x
1

Hello, everyone!

I have an application that’s designed for fixed height policy. Everything works as expected, except that the content isn’t centered. It’s aligned to the left. So how do I center it?

2

Ok, let me put the question this way:

  1. How can I get the real screen size of a phone’s display
  2. How can I translate everything along X
3

With ‘fixed height’ policy I believe you just need to add the origin offset to all your positions. Director::getInstance()->getVisibleOrigin()
Now you will likely want to position a container node so you can position all of its children off a 0,0 origin.

Edit: This is incorrect. VisualOrigin and VisualSize are only different from design resolution size and zero origin when using ResolutionPolicy::NO_BORDER.

4
  1. How do I compute the origin offset?
  2. I guess I can create a “top” container and add all my views there. Or better, translate the OpenGL view matrix. Is the later possible?
5

GetVisisbleOrigin() check it out. Log it and see what it gives you. You might be able to change the camera matrix or look at experimental viewport. I’ll prob try out height policy and see the simplest test that behaves like you want.
This is incorrect advice.

6

Actually, have you tried ResolutionPolicy::SHOW_ALL yet? That will likely give you what you want without requiring any transformations.

7

I asked the design guy to make sure everything is inside a 960:640 box, but continues on the sides in case of wider screens, so SHOW_ALL doesn’t work for me. What I really expected is FIXED_HEIGHT to center content.

OK, I already computed the offset I need to introduce for things to be centered.

    // w: design resolution width
    // h: design resolution height
    const Size& frame = Director::getInstance()->getOpenGLView()->getFrameSize();
    const float width = frame.width * h / frame.height;
    const float offsetx = std::max((width - w) / 2.0f, 0.0f);
    return Vec2(offsetx, 0.0f);

Now my question is what’s the proper way to apply the offset globally.

8

Current ideas:

  1. You could try to move the camera in the opposite of that offset.
  2. If you have a root layer you could set its position to the offset.
  3. Try to offset the scene instead, but I’ve never checked if you can reposition the scene itself.
9

Well, I already solved the problem as I have (thank God) a BaseScene class that now computes the offset and applies it to all scenes inflated from CSB files. Nevertheless, I’m not really sure this is the correct way of handling the situation.

I’m curious, can you please give me a code example of how can I apply a transformation to the camera (your point number 1)?

10

I’m not sure the camera transform will work for sure, but I’ll test it and let you know. If it works I’ll paste code here.

11

Sounds great, thanks!

12

I’m using FIXED_HEIGHT resolution policy with Cocos2d-JS.

Basically, i’m positioning the node relative to the cc.winSize

cc.p((cc.winSize.width*0.50), (cc.winSize.height*0.50));

This would position the node to center of the screen without offset.

13

Well, it doesn’t really matter if you center your node relatively to the frame or you use an offset, like I did. All it matters is there’s not an easy and obvious way to manipulate the whole OpenGL view like applying a view matrix or something. I’d be surprised if there’s not a way to do that in cocos2d-x. I’m just curious how it’s done as the documentation doesn’t say a thing about it.