Jump to content

Cocoon + phaser fullscreen need explanation


Recommended Posts

resolved my self 

<div id="game-area"></div> get the Canvas of the game. i must put something else...

so i write in my index.html

		<title>title of the 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>
		<link rel="stylesheet" type="text/css" href="style.css">

<div id="game-aera"></div>

and in the css.file in my example style.css i put reference to my Canvas > game-area, i put a the same color from my background-game to not see a border. specify also the position top :0 left 0 

body {
	padding: 0; margin: 0;

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
#game-area { display:block; } /* To remove the scrollbars */

#game-area {
	margin: auto;
	display: table;
	background: #250f2e;
div {
    position: absolute;
    top: 0px;
    left: 0px;

and i my main.js, the important thing is  : 


it's the same than 

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

because   game is a refence to Canvas in :game = new Phaser.Game(1280,1920,Phaser.CANVAS,'game' )

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

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

hope it help someone. and i hope that i don't say stupid things ;) in my case all is ok in my cocoon's project.


Link to comment
Share on other sites


  • Recently Browsing   0 members

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