NumbOfAthma

Cocoon - Vertically center game

12 posts in this topic

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!

Share this post


Link to post
Share on other sites

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?

 

Share this post


Link to post
Share on other sites

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 ?

 

 

Share this post


Link to post
Share on other sites
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 :(

Share this post


Link to post
Share on other sites

I use cocoon.io but not "wrapper"

Have you test ?

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

Share this post


Link to post
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 :(

Share this post


Link to post
Share on other sites

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)

 

loading_back.png

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

@espace3dthanks 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 :( 

Share this post


Link to post
Share on other sites

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>.

Share this post


Link to post
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;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.