Jump to content

How to display some html on top of pixi.js?


ShotgunJed
 Share

Recommended Posts

How do you display some text on top of pixi.js? Like for a hud or GUI as an example.

This is my html code, and it isn't working (The text isn't appearing on top):

<body>
<script src="src/main.js"></script>
<div>
    <h1>Lorem ipsum dolor sit amet</h1>
</div>
</body>

 

Link to comment
Share on other sites

"Fixed" probably isn't what you want, although if its working then don't worry about it. `position: absolute` and some z-indexing is probably better. 

MDN is probably the best resource for this stuff. The DOM has a 'flow' to it, although certain conditions can break that flow, which is what you want. Starting on the MDN page for position is a good place to start learning about how the DOM positions elements.

Link to comment
Share on other sites

1 hour ago, mattstyles said:

"Fixed" probably isn't what you want, although if its working then don't worry about it. `position: absolute` and some z-indexing is probably better. 

MDN is probably the best resource for this stuff. The DOM has a 'flow' to it, although certain conditions can break that flow, which is what you want. Starting on the MDN page for position is a good place to start learning about how the DOM positions elements.

Thank you. It works with position: absolute as well, so I'll use that.

Also, how do you make it so that you can edit some input text that is on top of a pixi canvas? I am assuming that all of my keyboard inputs are being caught by the pixi canvas, so I cannot type anything in the input text. (I can however, right click on the input text and paste text). I also cannot open the console with Ctrl+Shift+I on Chrome. I have to click on the browser search bar and then press the keys to do so.

edit:

It was my code that listened to the arrow keys so that the player could be moved. Now I'm wondering if there is a way to be able to move with the arrow keys or WASD and be able to type in the HTML at the same time.

Link to comment
Share on other sites

Whatever code you are using for grabbing keypresses is probably calling `event.preventDefault()`, this stops default actions from occurring for the keypress.

There is a pen here 

 that shows it.

Note how prevent default works, there are two handlers here but only one prevents default, this is enough to kill other actions from happening (such as cmd/ctrl+r to reload the page and input fields from getting inputs) but both handlers are still triggered. It's not particularly intuitive really, and I've only tested Chrome, probably all browsers behave the same but its the sort of thing that they might handle differently.

You can remove the `event.preventDefault` which will get your input field back working, but your game code will also register the presses, so if you typed 'was' into the input field you'll see your character moving around (or whatever) beneath the input, which probably isn't what you want.

You probably need to add some sort of switch when an input field gets focus to disable game keys from working, then reinstate the game keys once the input field loses focus.

 

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