Browser resizing and fullscreen issues (Please check post for more details)

cocos2d-x JavaScript
#1

I have a cocos game that is running within a div element(850px * 500px) on my html page. I am using the cocos fullscreen API in my game and The cc.EGLView.getInstance().resizeWithBrowserSize(); has been set to true in my game. The issue is that when I resize the browser, my canvas doesn’t automatically resize, though when I escape from full screen mode the game automatically resizes to 850px*500px. Is it possible for the canvas to be resized on browser resize as well?(In spite of the CSS width and height properties of the div?)

I am using COCOS HTML5 2.2

#2

@abhiram57

Can you post the code of your index.html ?

#3

Hi, thanks for the quick reply. The index.html is in jade actually. The lines with the div/canvas are:
div id : mygame
Canvas id: gameCanvas

.container#mygame(style='margin-bottom:40px;')
  canvas#gameCanvas

Some styling in the index.html itself:

style
    canvas {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

The corresponding css is:

#mygame{
    margin-bottom:40px;
    /*margin-left:250px;*/
    height:500px;
    width:850px;
}
#mygame:-webkit-full-screen{
    position: fixed;
    /*width: 1024px;*/
    /*height: 768px;*/
    width:100%;
    height:100%;
    top:0;
    background: none;
}
#4

@pandamicro

Hi, have you had the chance to look at the above code?

#5

Hi,

I haven’t had issues implementing fullscreen and canvas resizing in my game.

Maybe you could compare your code with mine (could be because of your div element, which I don’t have):
Game: http://stifu.fr/cc/Whip-A-Wimp
Source code: https://code.google.com/p/whip-a-wimp/

#6

Hi, @abhiram57

The reason that your game is not responding to the browser resize event is that you use a fix sized container.
Your container #mygame is the frame for your game canvas, and in cocos2d, your game canvas will only be resized within the frame. While your window is the frame, the canvas will be resized with the window, but as you have a fix sized frame, then no matter how the window resize, your frame stay the same size, so your canvas won’t resize.

What you can do is to resize your #mygame frame with the window’s resize event. Then it will work.

Huabin

#7

Hi,

setResizeCallback method not fire after rotaion in android device. When run in browser the working fine.
buth create apk with cross platform then event not call.
Bellow code , I have used.

cc.view.resizeWithBrowserSize(true);
    cc.view.setResizeCallback(function() {
    // Do things according to your need,
    // e.g. change a resolution policy when user's mobile orientation changed.
        var frameSize = cc.view.getFrameSize();
        if(frameSize.width < frameSize.height)
        {
            cc.view.setDesignResolutionSize(width,height, cc.ResolutionPolicy.EXACT_FIT);
        }
        else
        {
            cc.view.setDesignResolutionSize(height,width, cc.ResolutionPolicy.EXACT_FIT);
        }
    });

Please Help me how to solve issue .

Thanks,
Lokesh Patel