Orientation change and resolution policy

cocos2d-x JavaScript
1

Hi, I was trying to learn and use JS for a simple game and couldn’t resolve this issue.

Now, the scene looks as it should on landscape mode (iOS Simulator (and real device)):

73761d7d60946de0.png1136×640

When I change the orientation to portrait in runtime, it becomes like this:

0f7dcedfec14e78f.png640×1136

resolution policy and other initialization is as following:

cc.view.enableRetina(false);
cc.view.adjustViewPort(true);
cc.view.setDesignResolutionSize(480, 320, cc.ResolutionPolicy.SHOW_ALL);
cc.view.resizeWithBrowserSize(true);

With these settings, on portrait mode, I’d expect no black bar on the left hand side and the scene should be centered on the screen, probably something like this:

1b7526f835a1e22d.png640×1136

The strange thing is; normally, I change the colors of the touched squares. It works correctly on landscape mode but in portrait mode, nothing happens when I touch the squares themselves, however they change color when I touch on the empty space above the drawn area.

How can I correct this issue and how can I change the resolution policy on runtime when the orientation changes?

It seems like I’m missing something very simple but couldn’t find a solution for Cocos2d-JS (examples are usually about other platforms). I’ll be really happy If someone can direct me to correct path.

Sorry for the long post, I’d also attach a potato but it is long enough as it is :smile:

2

Couldn’t resolve yet but here is what I’ve found:
To see what’s happening, I added the following as update function of main scene:

update:function(dt) {
    size = cc.director.getOpenGLView().getFrameSize();
    console.log("size w:" + size.width + ", h:" + size.height);
}

It prints 1136*640 on both landscape and portrait modes (while updating seemingly correctly on browser after resizing).

Debugging in Xcode, I see that under didRotateFromInterfaceOrientation

cocos2d::Application::getInstance()->applicationScreenSizeChanged

is called with new width and height but the function itself is empty. I believe somewhere under the hood, this event should be captured, the OpenGL view should be updated and scene layout should be changed but couldn’t see anything in this context yet.

Still looking for help. I may find something but I feel like I have a car that won’t start and I’m trying to understand the automatic transmission system to solve the problem while the thing I am missing is just putting the gear to P first :slight_smile: