wordplay Posted October 17, 2018 Share Posted October 17, 2018 I am new to phaser and had just used a pre-made 800x600 game from the examples. I am creating a HTML page and I want to display text above and below the game however it is completely refusing to do so. Any advice would be appreciated Link to comment Share on other sites More sharing options...
prob Posted October 17, 2018 Share Posted October 17, 2018 The game is a single canvas element in the page body; you'd need to post your HTML code for the page to see what is going on. Link to comment Share on other sites More sharing options...
s4m_ur4i Posted October 18, 2018 Share Posted October 18, 2018 link the css file in your HTML head <head> <link href="style.css" type="text/css"> </head> <body> <div class="wrp"> <section class="text-one">some text</section> <canvas></canvas> <section class="text-two">some text</section> </div> </body> ** your css file .wrp { display: block; width: 800px; margin: 0 auto; } canvas { display: block; width: 800px; height: 600px; } .text-one, .text-two { display: block; height: 40px; background: #000; color: #fff; padding: 10px; } cheers Link to comment Share on other sites More sharing options...
wordplay Posted October 20, 2018 Author Share Posted October 20, 2018 Thanks for your replies. I have the following HTML code with the CSS file linked above <!DOCTYPE html> <html> <head> <link href="style2.css" type="text/css"> <script type="text/javascript" src="testgame/phaser.min.js"></script> </head> <body> <div class="wrp"> <section class="text-one">Example Text</section> <canvas> <script type="text/javascript" src="testgame/game.js"></script> </canvas> <section class="text-two">Example Text 2</section> </div> </body> </html> However, it's still not necessarily coming out how I want it to. See the attached image. Thanks again for your help Link to comment Share on other sites More sharing options...
s4m_ur4i Posted October 21, 2018 Share Posted October 21, 2018 add "rel=stylesheet" to your <link> element. Get sure that the path to your CSS-File is correct. The CSS seems not to be loaded as of the background of the text-boxes should be black. also: I think you need to give your canvas an ID and put it in the phaser game config, not sure about that, since I never used it that way. Maybe someone else can clarify. and add this to your CSS to get rid of browser defaults * { margin: 0; padding: 0; outline: none; text-decoration: none; border: 0; } Link to comment Share on other sites More sharing options...
localtoast_zader Posted October 24, 2018 Share Posted October 24, 2018 On 10/20/2018 at 8:43 AM, wordplay said: <!DOCTYPE html> <html> <head> <link href="style2.css" type="text/css"> <script type="text/javascript" src="testgame/phaser.min.js"></script> </head> <body> <div class="wrp"> <section class="text-one">Example Text</section> <canvas> <script type="text/javascript" src="testgame/game.js"></script> </canvas> <section class="text-two">Example Text 2</section> </div> </body> </html> I think I see the issue. Counter-intuitively, putting the `script` tag inside your `canvas` tag doesn't attach your Phaser game to the canvas, this is just a html5 thing. You can have your `script` tag that references your game anywhere (probably best to keep it in your `head` tag with the other scripts. Inside the config object for your game though you have to link to the html canvas element like so: var game = new Phaser.Game({ type: Phaser.AUTO, width: 1000, height: 1000, physics: { default: 'arcade', arcade: {gravity: {y: 500}} }, scene: [ scene ], canvas: document.querySelector('canvas'); // <-- here! }); The `document.querySelector()` method grabs the first html element that matches the css argument passed in, so here it grabs the first `canvas` tag. Probably best practices would be to add an id to your canvas tag and use `document.querySelector('#yourCanvasIdHere')`. Let me know if this works - otherwise send your js and I can help you work through it! Link to comment Share on other sites More sharing options...
samme Posted October 24, 2018 Share Posted October 24, 2018 https://codepen.io/samme/pen/KGGRXY?editors=0010 localtoast_zader 1 Link to comment Share on other sites More sharing options...
Recommended Posts