How to position "ui-elements" over the canvas ?

Phaser 3
1

Hi,
I need a simple input element in the bottom left corner of my canvas in order to allow players to send text messages. As it turns out the only “easy” and “viable” solution is to overlay a predefined html page and position it with some css magic. My current solution is to place a a element below the canvas and use css to push it above and into the canvas (element.style.top: -5%).

// UIScene.js
const gameContent = document.getElementById("game-content");
gameContent.insertAdjacentHTML("beforeend", this.cache.html.get("uiOverlay"));

//index.css
#game-content {
  position: relative;
  width: 100%;
  height: 100%;
}

#ui-overlay {
  width: 100%;
  top: -5%;
  left: 2%;
  position: relative;
  display: block;
  z-index: 999;
}
  1. Is there a better(=easy) way to do things ?
  2. Do I rly need to write my own “ui-library” to place html elements without getting lost in css magic ?

I need your help.
Thank you in advance!

2

:wave:

I think you would have to write some CSS one way or another.

If you find it easier, you can probably just write the HTML upfront:

<div id='game-content'>
  <div id='ui-overlay'>…</div>
</div>
3

Aloha samme,

thanks for your reply.
I ended up writing a little helper class which positions my elements via js. Much less pain :slight_smile: