Jump to content

Cocoon - Vertically center game


Recommended Posts

Hello guys,

I'm struggling to vertically center my Phaser game inside Cocoon IO wrapper.

In the browser it's all centered both horizontally and vertically but when I load it into Cocoon the game is aligned top.

My setup:

- html & body tags' height property is set to 100%

- I don't have a div containing the canvas element, I let Phaser handle the creation of the canvas.

- In the Boot state I use: 

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;  
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;

For some reason, though my screen is 1920 x 1080, and the canvas been displayed like this:

<canvas width="480" height="800" style="display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 1080px; height: 1800px; cursor: inherit; margin-left: 0px; margin-top: 60px; margin-bottom: -60px;"></canvas>

I end up in Cocoon with the game align to the top of the screen and the 120 extra pixels in the bottom and not distributed equally on the top and bottom of the game.

Any advice on this? Thanks!

Link to comment
Share on other sites

11 minutes ago, espace3d said:



in my html file i put this


	body {
		margin: auto;
		display: table;
		position: absolute;
		top: 0px;
		left: 0px;
		padding: 0; margin: 0;
		background-color: #1a1a1a

try it ?



Thanks! But it only works in the browser, in Cocoon wrapper it does not work :(

Link to comment
Share on other sites

15 minutes ago, espace3d said:

I use cocoon.io but not "wrapper"

Have you test ?

canvas.width = window.innerWidth
canvas.height = window.innerHeight

Yup, about cocoon.io I'm talking too.

I got a portrait game and I cannot center it vertically.

I've tried both of your suggestions... no success :(

Link to comment
Share on other sites

Normally this example works



		<title>your game</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=9">
		<meta name="format-detection" content="telephone=no">
		<meta name="HandheldFriendly" content="true" />
		<meta name="robots" content="noindex,nofollow" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="apple-mobile-web-app-title" content="Phaser App">
		<script src="phaser.min.js"></script>
		<script src="src/main.js"></script>
		<script type="text/javascript">
document.addEventListener("deviceready", function() {
	setTimeout(function() {
	}, 5000, false);

	body {
		margin: auto;
		display: table;
		position: absolute;
		top: 0px;
		left: 0px;
		padding: 0; margin: 0;
		background-color: #3a3a3a


function main(){
	var h=1920
	var w=1280
var h2=1920*.5
var w2=1280*.5
	var bootstate= {
		preload: function(){
		create: function(){
			this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL
			this.scale.pageAlignHorizontally = true
			this.scale.pageAlignVertically = true


	var preloadstate = {
		preload: function(){ 
			var loadingBar_back = this.add.sprite(w2,h2,"loading_back");
		create: function(){
			this.game.stage.backgroundColor = '#1a1a1a'

	game = new Phaser.Game(1280,1920,Phaser.CANVAS,'game' )



Link to comment
Share on other sites

On 3/11/2017 at 9:12 AM, NumbOfAthma said:

Or.... what to use to get the height of the game canvas AFTER it's been resized to fit the device screen..

It looks like it should be in game.scale.height. Or 'px' value in game.canvas.style.height.

Can you step through ScaleManager#alignCanvas?

Link to comment
Share on other sites

Ummm I did it like this, it's ugly but it does the trick:

// Deduct the width and height of the screen
window.width = navigator.isCocoonJS ? window.innerWidth * window.dips: window.innerWidth;
window.height = navigator.isCocoonJS ? window.innerHeight * window.dips: window.innerHeight;

window.width = ~~width;
window.height = ~~height;
window.ratio = Math.round( (height / width) * 100) / 100;

var game = new Phaser.Game(480, 800, Phaser.CANVAS);
// --- Add states here

window.onload = function() {
  var rw = Math.round(window.width / game.width * 100) / 100;
  var rh = Math.round(window.height / game.height * 100) / 100;

  var r = (rw <= rh) ? rw : rh;

  var actualGameWidth = ~~(r * game.width);
  var actualGameHeight = ~~(r * game.height);

  var paddingTB;
  paddingTB  = ~~((window.height - 1 * actualGameHeight) / 2 / window.devicePixelRatio);
  var paddingLR;
  paddingLR = ~~((window.width - 1 * actualGameWidth) / 2 / window.devicePixelRatio);

  var canvas = document.querySelector('canvas');
  canvas.style.position = "absolute";
  canvas.style.top = paddingTB;
  canvas.style.bottom = paddingTB;
  canvas.style.left = paddingLR;
  canvas.style.right = paddingLR;


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...