Hi, I’m developing a game using cocos2d-html5 v2.2 using cc.RESOLUTION_POLICY.SHOW_ALL as resolution policy and it works as expected (the canvas occupies the whole space available, if the window is resized or if I wrap the canvas element around a div it resizes to adjust to that size).
But here’s my problem: I’ve just updated to the latest git-hub version and the behaviour has change wildly: the canvas element now no longer occupies the whole available space, but rather only a limited size and it’s only centered horizontally on the screen, but not vertically.
Is there a way I can still get the old behaviour?
edit: It’s an “old” thred so I don’t quite remember. But I think the major problem was that my <canvas> element was inside a <div>, and that prevented it from occupying the whole <body>.
Hi sebastian
There is a article about Detailed explanation of Cocos2d-x Multi-resolution adaptation: http://www.cocos2d-x.org/wiki/Detailed_explanation_of_Cocos2d-x_Multi-resolution_adaptation
If you want to full whole screen, you can add these calls in main.js :
cc.EGLView.getInstance().*adjustSizeToBrowser;
cc.EGLView.getInstance.*resizeWithBrowserSize(true);
and you can reference HelloHTML5World’s main.js.
Regards
David
Aha…
I’ll have to look into that! Thanks!
PS: how’s support for the HTML5 “FullScreen API” coming?
Ok… I’m updating with a new but related error:
I’m using 2.2.1 now and I’m getting wildly inconsistent behaviour with cc.RESOLUTION_POLICY.SHOW_ALL…
Namely: my game’s canvas stretches to fill most of the screen vertically (but if I resize the browser’s window it may overflow to the sides) and I get strange graphical glitches (some sprites aren’t drawn propperly).
But then, if I sorround the canvas tag on index.html with a div, the behaviour returns to what I was encountering in the last github version (and that I described in my original post).
Hi ZippoLag,
What did you find with this and how did you solve? I am also seeing that 2.2.1 does not scale consistently when using “SHOW_ALL”. It was working in previous versions, but now the game scales, but seems to hold the original height. So the game ratio is off.
Thanks,
Sean
Hi, @sixtyfivecaddy
In cocos2d-html5 version 2.2.2, we have fully refactor design resolution policy. The behavior of “SHOW_ALL” should be correct now.
For detailed documentation: http://cocos2d-x.org/docs/manual/framework/html5/resolution-policy-design/en
Huabin
sixtyfivecaddy wrote:
Hi ZippoLag,
What did you find with this and how did you solve? I am also seeing that 2.2.1 does not scale consistently when using “SHOW_ALL”. It was working in previous versions, but now the game scales, but seems to hold the original height. So the game ratio is off.
Thanks,
Sean
It’s an “old” thred so I don’t quite remember. But I think the major problem was that my <canvas> element was inside a <div>, and that prevented it from occupying the whole <body>.
I also suggest you upgrade to v2.2.2 or latest from github.
Hi,
Thanks, I did upgrade to 2.2.2 and it scales nicely down when in the page, mouse positions are correct, etc, so thank you for this improvement. But for some reason the game does not scale back up if one makes the browser window bigger again. Really odd behavior. Is that my implementation - has anyone else seen this? Or is my usage below incorrect?
main.js:
applicationDidFinishLaunching:function () {
var director = cc.Director.getInstance();
var resourceSize = cc.size(895, 524);
var designSize = cc.size(895, 524);
var policy = new cc.ResolutionPolicy(cc.ContainerStrategy.PROPORTION_TO_FRAME,cc.ContentStrategy.SHOW_ALL);
cc.EGLView.getInstance().setDesignResolutionSize(designSize.width, designSize.height,policy);
cc.EGLView.getInstance().resizeWithBrowserSize(true);
Thanks,
Sean
Hi,
Having trouble with the forum editor here, not allowing some code posted.
HTML
canvas id="gameCanvas" width="750" height="439"
script src="cocos2d.js"
Thanks,
Sean
From what I can tell here, the new 2.2.2 build does not allow an outer DIV around your gameCanvas. If you do use one, the inner DIV created at game start-up (id=“Cocos2dGameContainer” ) is not getting the updated information when the browser window is made larger - only when it is made smaller. This seems to be something to investigate.
Edit - it seems like the Cocos2dGameContainer margins on the left and right “eat up” all space when the browser is made bigger again. So instead of the game getting that space back it is taken by the margin.
Hmm, strange…
Could you attach your “index.html” and “main.js” files here? Don’t post the code, upload the files with the “browse” button below.
Hi ZippoLag,
Thanks for helping. The easiest way is probably if you open the HelloWorld index.html, run it, then observe the behavior as you make the window bigger/smaller. It scales properly.
Then just wrap the canvas and script call in a simple empty div, no ID or class even needed. I’ve attached to make it simple, plus a screen shot.
Run this, then observe that it scales down, but not back up. My image attached shows the Cocos2dGameContainer with a margin 0px 278px. That second number grows as you scale up. Thus proving that space given back by the window is being taken by the left and right margins and not given back to the game size.
The inconsistency of scaling down but not up to me is the part that shows something’s not right.
Let me know if I’m missing something or if there’s a real issue here.
Thanks,
Sean
