ShotgunJed Posted July 14, 2017 Share Posted July 14, 2017 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> Quote Link to comment Share on other sites More sharing options...
ShotgunJed Posted July 14, 2017 Author Share Posted July 14, 2017 Figured it out by giving the div "position: fixed" Quote Link to comment Share on other sites More sharing options...
mattstyles Posted July 14, 2017 Share Posted July 14, 2017 "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. Quote Link to comment Share on other sites More sharing options...
ShotgunJed Posted July 14, 2017 Author Share Posted July 14, 2017 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. Quote Link to comment Share on other sites More sharing options...
mattstyles Posted July 14, 2017 Share Posted July 14, 2017 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. ShotgunJed 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.