Hello.
I’m currently working on a web game, which should be playable in browsers both mobile and desktop. When building web-mobile from Cocos Creator I get the following problems achieving full screen(landscape on mobile devices).
- Browsers work fine.
- Android: Usually one can touch/tab on a canvas to make it full screen. This does not work, but removing the
<div id="GameDiv" class="wrapper">will fix this. - iOS: This is a general iOS problem, where people want to go into what is called “minimal view”. A solution can be to use brim.js. So this is where I get problems. When I wrap the canvas in
<div>'s from brim.js. The size of the canvas in browsers shrinks and wont take touch/click inputs. The same happens on android.
And It does not fix the problem on iOS. Here the canvas float down in the bottom left corner. But forcing the minimal view to go away and removing it again will make the game go full screen.
All this is done without editing the main.js file:
var option = {
//width: width,
//height: height,
id: 'GameCanvas',
scenes: _CCSettings.scenes,
debugMode: _CCSettings.debug ? cc.DebugMode.INFO : cc.DebugMode.ERROR,
showFPS: _CCSettings.debug,
frameRate: 60,
jsList: [
_CCSettings.debug ? 'src/project.dev.js' : 'src/project.js'
]
};
I can set the height and width here in the options to fix how the game looks in a browser, but the click event does still not work and the canvas won’t resize with the browser. Also, it does not seems like the cocos code uses the id for anything, changing this will resolve in an cocos error cause it is looking for ‘GameCanvas’.
My index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cocos Creator | Orbs</title>
<!--http://www.html5rocks.com/en/mobile/mobifying/-->
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,target-densitydpi=device-dpi"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no">
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content=""/>
<meta name="x5-orientation" content="">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<!--<link rel="apple-touch-icon" href=".png" />-->
<!--<link rel="apple-touch-icon-precomposed" href=".png" />-->
<link href="style.css" rel="stylesheet">
<script src="brim.js" charset="utf-8"></script>
<script src="scream.js" charset="utf-8"></script>
<script src="platform.js" charset="utf-8"></script>
</head>
<body>
<div id="brim-main">
<canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
<div id="splash">
<div class="progress-bar stripes">
<span style="width: 0%"></span>
</div>
</div>
</div>
<div id="brim-mask">
<p>Scroll down to go fullscreen or rotate device</p>
</div>
<script>
var scream, brim;
if (platform.os.family == 'iOS' && parseInt(platform.os.version, 10) > 8 || platform.ua.indexOf('like Mac OS X') != -1) {
scream = gajus.Scream({
width: {
portrait: 320,
landscape: 568
}
});
brim = gajus.Brim({
viewport: scream
});
brim.on('viewchange', function (e) {
document.body.className = e.viewName;
if(e.viewName == "minimal") {
// Show game canvas
}
});
} else {
// Show game canvas
document.querySelector('#brim-main').style.display = 'block';
}
</script>
<script src="src/settings.js" charset="utf-8"></script>
<script src="cocos2d-js-min.js" charset="utf-8"></script>
<script src="src/project.js" charset="utf-8"></script>
<script src="main.js" charset="utf-8"></script>
</body>
</html>
Does anyone know how to do stuff like this ? Or any hints about handling the canvas re-sizing.
Martin
