I am having troubles with making canvas area stay with fixed size.
My canvas in html file looks like this: <canvas id="gameCanvas" width="720" height="480"> </canvas>
And in main.js i am doing
cc.EGLView.getInstance().resizeWithBrowserSize(false);
and then
cc.EGLView.getInstance().setDesignResolutionSize(720, 480, cc.RESOLUTION_POLICY.SHOW_ALL);
The problem is that canvas takes up entire web browser page area on page load, even if browser window is much larger than 720x480
The setDesignResolutionSize makes cocos2d-html5 adapt your canvas to the whole web page, the resolution you set is the resolution in point that you use in your game logic. No matter what the final size is, you can use a sprite of 720 * 480 for background which takes the whole canvas.
This is just for an explaination for you to know the basic idea of resolution policy, but as you just want to control its size by your self, you can just remove this function call.
If you have a game designed at a larger size, but need to display in the browser at a smaller fixed size, what would be the proper way? When I scale down the coordinates and relative positioning seem off. Scaling up does not have this issue.
Example is game is designed and assets are built for 1024x7678 but there is requirement to display the game in a smaller fixed canvas of 800x600.
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);
}
});
