[Resolved] FullScreen API: resolution/ ratios policies don't work / don't apply?

cocos2d-x JavaScript
#1

Hi

Decided to cleanup my resolution/container policy stuff.
by the way great work guys: your doc here is clear: http://www.cocos2d-x.org/wiki/Understand_the_Resolution_Policy_in_Cocos2d-html5_222

back to my “problem”.
(i’m using latest 2.2 with all daily fixes)

I use the fullscreen api : cc.Screen (very cool)

First issue:
in firefox the canvas content is filling the screen
in chrome the canvas content is centered in the screen with black borders on 4 sides

Other issue/question:
does the Resolution policy work in fullscreen ?

Thanks in advance

Nicolas

Attached: modified the helloHtml5 sample screenshots
with a 1000/500 view.


cc2_ratio_browser.png (628.2 KB)


cc2_ratio_fullscreen.png (1728.3 KB)

#2

Hi, Nicolas

First, I’m happy that the doc appears to be clear for you!

  1. Which resolution policy did you use?
  2. Did you wrapped the canvas into a div or it’s put directly in document body?
  3. The fullscreen api just expand the document body to full screen, so the resolution policy should work with it, but remember to use this line of code: cc.EGLView.getInstance().resizeWithBrowserSize(true);. Otherwise the policy won’t be reapplied when entering full screen mode.

Huabin

#3

Hi Huabin,
(sorry for the long time to give details, did not received notif on topic update).

I simplified/narrowed a bit the problem:

As in my full project I use a more complex html dom I tested using Html5HelloWOrld, just added a full screen button.
So the html is the one from the sample untouched.

Here is the policy.

in main.js:applicationDidFinishLaunching()
{
…
var policy = new cc.ResolutionPolicy(cc.ContainerStrategy.PROPORTION_TO_FRAME,cc.ContentStrategy.SHOW_ALL);
cc.EGLView.getInstance().setDesignResolutionSize(1000,500,policy);
cc.EGLView.getInstance().resizeWithBrowserSize(true); //required for Chrome
…
}

Note: resizeWithBrowserSize is needed in Chrome to have the content of canvas “zoomed” full screen. In firefox removing it has no effect, is that normal.

Anyway in Chrome, everything looks fine. Black bars appear on the top and bottom as requested by the policy. Now on Firefox the canvas is streched to fill vertically the screen.

Attached are the results when going full screen with Chrome and FireFox.
Hope it helps.

Nicolas

#4

In fact, different browser do the full screen slightly different from each other, firefox expand non proportionally your element which request to be shown on full screen.
To ensure the same result, you can use: cc.Screen.getInstance().requestFullScreen(document.documentElement); which will expand the whole document element. So your canvas won’t suffer distortion problem.

Huabin

#5

ok good to know. THanks for the details.
Now my derivative of the HelloHTML5World example works both in Chrome and Firefox.
Great.

Back to more fine problems

Problem 1:
Checking to make sure everything works I just saw that the extiFullScreen function of CCScreen gets me in console (whatever the browser):
Uncaught TypeError: Property ‘webkitCancelFullScreen’ of object # is not a function

Problem 2:
what are the ideas for fullscreen canva when the canva is in divs in the html ?

Thanks so much for your time and great work on cocoshtml.

Nicolas

#6

Happy to know it works

Problem 1: Thanks for find a bug for us, :stuck_out_tongue: we will fix this for CCScreen. In alternative, you can simply use: document.webkitCancelFullScreen(); instead, attention that there may be difference between browsers.

Problem 2:
I’m not sure I got your idea, but if you mean how to fullscreen a canvas when it’s wrapped in a div, you can simply call cc.Screen.getInstance().requestFullScreen(divElement); , it should never be the canvas itself.

Huabin

#7

Problem1: thanks for the fix. that was fast.

Problem2: thanks for the idea, dug a little more. so when the cocoscanva I want to fullscreen is in a div of a div…. so in a middle of a page ;~~)
To understand it I kept mofifying the HelloHtml5World sample:
in the html to do a simple test I added a title and a wrapping div:
<body style=“padding:0; margin: 0; background: #000;”>
<div style=“padding:0; margin: 0; background: #ffff00;”>
<p> TITRE</p>
</div>
<div id=“mydiv”>
<canvas id=“gameCanvas” width=“1000” height=“500”></canvas>
</div>
<script src=“cocos2d.js”></script>
</body>
</html>
now in the goto full screen code:

var el = document.getElementById
ccScreen.requestFullScreen;
——————~~
Results:
in chrome and Firefox the canvas does not get fullscreened, it canvas stays at it size in the middle of the screen.

Thanks in advance
Nicolas

PS: I’m making good progress in javascript thanks to my background in programming but Html stuff is not something I fully master for now as you can see;)

PS: attached is the sample modified. (note that the path to cocos lib might need to be changed for your environement engineDir: in cocos2d.js) (fullscreen code is in myApp.js)

#8

update:
by adding a style to webkit (chrome) in the html I managed to have it work in Chrome:

#mydiv:-webkit-full-screen {
width: 100;
height: 100;
}

Attached latest version of the project that now works on both browsers.

Nicolas

#9

ok made good progress.
To have the cocoscanva go fullscreen from a complex html page I simply surroud it by a

#myDivForFullScreen:-webkit-full-screen {
width: 100;
height: 100;
}

Last problem:
when exiting fullscreen the canva and Cocos2dGameContainer width and height are not restored to their original values . Is this normal?

Thanks

Nicolas