espace Posted January 30, 2017 Share Posted January 30, 2017 Hi, I will follow this template https://jsfiddle.net/jaredwilli/qFuDr/ But in the Js file I don't understand really where I must put my phaser game. Can you clarify this with just drawing a square or something else ? Thanks Link to comment Share on other sites More sharing options...
espace Posted January 30, 2017 Author Share Posted January 30, 2017 i made this with use <div id="phaser-example"></div> but the problem is that my game are reproduce infinity https://jsfiddle.net/espace3d/nony0sx6/ Link to comment Share on other sites More sharing options...
espace Posted January 31, 2017 Author Share Posted January 31, 2017 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 <html> <head> <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"> </head> <body> <div id="game-aera"></div> </body> </html> 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 : this.game.width=window.innerWidth this.game.height=window.innerHeight 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.game.width=window.innerWidth this.game.height=window.innerHeight this.scale.pageAlignHorizontally = true this.scale.pageAlignVertically = true this.scale.refresh() ...... game = new Phaser.Game(1280,1920,Phaser.CANVAS,'game' ) game.state.add('boot',bootstate) game.state.add('preload',preloadstate) game.state.add('game_first_screen',game_first_screen) game.state.add('game_state',game_state) game.state.start('boot',bootstate) 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 More sharing options...
Recommended Posts