Remixful

Putting text under game

Recommended Posts

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:

efcbf7139c4c945018eea7d59065388c.png

 

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...

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites
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:

 

PhaserVersionInChromeDevConsole.png.490eca5795bb9d3eaa020d7e5207d51a.png

 

Or in the editor you can check the Project libraries:

 

PhaserVersionInProject.png.6278a4a9459e2b71a74025aed2efd4f1.png

 

To be sure you do not have things in cache you always can disable it in the Networks section of the Chrome DevTools.

 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.