Jump to content

Cocoon - Vertically center game


NumbOfAthma
 Share

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

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

 

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

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

 

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

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

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

Link to comment
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>.

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

 Share

  • Recently Browsing   0 members

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