Jump to content

Putting text under game


Remixful
 Share

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

 

Link to comment
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.

Link to comment
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-->

 

Link to comment
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).

Link to comment
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.

 

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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