Cocoon - Vertically center game

NumbOfAthma · March 11, 2017

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;
this.scale.refresh();

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!

NumbOfAthma · March 11, 2017

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

I've looked on the game.canvas, game.context.canvas, game.scale properties... but nothing helpful...

Any ideas?

espace · March 11, 2017

hi,

in my html file i put this

<style>
	body {
		margin: auto;
		display: table;
		position: absolute;
		border:0px;
		top: 0px;
		left: 0px;
		padding: 0; margin: 0;
		background-color: #1a1a1a
	}
</style>

try it ?

NumbOfAthma · March 11, 2017

11 minutes ago, espace3d said:

hi,

in my html file i put this


<style>
	body {
		margin: auto;
		display: table;
		position: absolute;
		border:0px;
		top: 0px;
		left: 0px;
		padding: 0; margin: 0;
		background-color: #1a1a1a
	}
</style>

try it ?

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

espace · March 11, 2017

I use cocoon.io but not "wrapper"

Have you test ?

	canvas.width = window.innerWidth

	canvas.height = window.innerHeight

NumbOfAthma · March 11, 2017

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

espace · March 11, 2017

Normally this example works

index.html


<!DOCTYPE HTML>
<html>
	<head>
		<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() {
		navigator.splashscreen.hide();
	}, 5000, false);
});
</script>

<style>
	body {
		margin: auto;
		display: table;
		position: absolute;
		border:0px;
		top: 0px;
		left: 0px;
		padding: 0; margin: 0;
		background-color: #3a3a3a
	}
</style>
	</head>
	</body>
</html>

main.js

function main(){
	var h=1920
	var w=1280
var h2=1920*.5
var w2=1280*.5
	var bootstate= {
		preload: function(){
			this.load.image("loading_back","assets/loading_back.png"); 
		},
		create: function(){
			this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL
			this.scale.pageAlignHorizontally = true
			this.scale.pageAlignVertically = true
			this.game.stage.backgroundColor='#1a1a1a'
			this.state.start("preload");
		},

	}

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

	game = new Phaser.Game(1280,1920,Phaser.CANVAS,'game' )
	game.state.add('boot',bootstate)
	game.state.add('preload',preloadstate)
	game.state.start('boot',bootstate)
}
document.addEventListener('deviceready',main,false)

espace · March 12, 2017

Is it ok ?

samme · March 13, 2017

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?

NumbOfAthma · March 13, 2017

@espace3d, thanks for the solution, I'll give it a try.

@samme, I've tried many properties from the game, including scale.height. In the browser the value it's ok but in Cocoon doesn't have the same value as in the browser, it fallsback to the height used to instantiate the game

samme · March 13, 2017

Try removing

this.scale.refresh();

Idk how much debugging you can do in Cocoon, but if you can step through ScaleManager#alignCanvas, you should be able to find it. Also check the layout dimensions of <canvas>, <body>, <html>.

NumbOfAthma · March 20, 2017

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;
}

Cocoon - Vertically center game

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Recently Browsing 0 members