Remixful Posted February 24, 2017 Share Posted February 24, 2017 I absolutely hate CSS in general, it's really the most frustrating thing for me, and I'm having a tough time putting something as simple as text below the game. <body> <div id="game"></div> hi </body> var gameconfig = {width:1200, height:800, renderer: Phaser.AUTO, parent:"div"} game = new Phaser.Game(gameconfig) Result: I've tried clear:both, floating, display:block all this stuff and that damn text just sits on top of the game no matter what I do. Have mercy on me... Link to comment Share on other sites More sharing options...
mattstyles Posted February 24, 2017 Share Posted February 24, 2017 Wrap the text in a span and absolutely position it is the easiest way of doing it. <span class='gametext'>My awesome game text</span> .gametext { position: 'absolute'; left: 20px; top: 20px; z-index: 100; } As with all things CSS other stuff on the page could potentially muck with the layout but with just a canvas element and a span element on the page this will work out just fine for you. edit: for anyone reading later, I mucked up the css, you don't need quotes around 'absolute', just position: absolute for css stuff. Link to comment Share on other sites More sharing options...
Remixful Posted February 24, 2017 Author Share Posted February 24, 2017 Thanks for the reply mattstyles, but still no luck... Result: Link to comment Share on other sites More sharing options...
TaylorN Posted February 24, 2017 Share Posted February 24, 2017 Can you put it in a codepen or paste the full code as text and I can take a look at it? Link to comment Share on other sites More sharing options...
mattstyles Posted February 24, 2017 Share Posted February 24, 2017 Sorry, my bad, you don't need the primes around 'absolute', position: absolute is what it should be. Link to comment Share on other sites More sharing options...
Remixful Posted February 24, 2017 Author Share Posted February 24, 2017 Idk what's going on but all of the sudden it's working.... I don't even need any classes for the game text, it works like <body> <div id="game"></div> hi </body> just how I wanted it to.. So strange... but my problem is fixed so... Link to comment Share on other sites More sharing options...
TaylorN Posted February 24, 2017 Share Posted February 24, 2017 Hmm yea this is weird. Try <html> <head> <meta charset="UTF-8" /> <meta name=viewport content="width=device-width, initial-scale=1"> <link rel="icon" href="favicon.png" /> <title>Test</title> <script src="https://github.com/photonstorm/phaser/releases/download/v2.6.2/phaser.js"></script> <style> .game{ position: relative; } .text{ position: relative; } </style> </head> <body> <div id="game" class="game"></div> <span class="text">hi</span> </body> </html> Then, what browser are you using? And then as a last resort you can manually set that span class to position: absolute; top: 800px; <!--AKA the height of the game--> Link to comment Share on other sites More sharing options...
mattstyles Posted February 24, 2017 Share Posted February 24, 2017 it can't just work! did you upgrade phaser version? Link to comment Share on other sites More sharing options...
Remixful Posted February 24, 2017 Author Share Posted February 24, 2017 I'm using Chrome. Maybe something happened with my cache, I don't really know... And I'm not going to bother thinking about it since the issue is gone and I couldn't even find what caused it in the first place.. I'm just using the phaser.js that comes with Phaser Editor. PhaserEditor2D 1 Link to comment Share on other sites More sharing options...
mattstyles Posted February 24, 2017 Share Posted February 24, 2017 I don't know what Phaser does when it creates the canvas element, its quite possible it attempts to absolutely place it on the screen (and tries to cover the screen? idk). If the version updated then its possible something changes with how that canvas element is created or what styling is applied to it. You can check which version of Phaser in the console, it should output a pretty banner (colourised in Chrome), but as you can't check the previous version where your stuff didn't work right it probably won't help much! Just for your reference, any element with position:absolute is removed from the flow, so either of your two elements (if they have this property) will be removed from the flow which would cause them to 'stack', the order becomes important here (without using z-index) but as your span is after your canvas div it'll usually be atop it (I say usually because there are a couple of things that can fiddle with rendering order, z-index being one). Link to comment Share on other sites More sharing options...
PhaserEditor2D Posted February 24, 2017 Share Posted February 24, 2017 6 hours ago, Remixful said: I'm just using the phaser.js that comes with Phaser Editor... Hi, you can check the version of the `phaser.js` provided by Phaser Editor in the Chrome dev console: Or in the editor you can check the Project libraries: To be sure you do not have things in cache you always can disable it in the Networks section of the Chrome DevTools. Link to comment Share on other sites More sharing options...
samme Posted February 24, 2017 Share Posted February 24, 2017 You need { parent: 'game" } for <div id="game"></div> Otherwise Phaser will just stick the canvas at the end of the document. Link to comment Share on other sites More sharing options...
Recommended Posts