I’m coding a small game on web browser and I’m questionning myself about how to have a nice,clean and easy to create UI.
What I want to create is something a bit like skribbl.io. A list of the players, a game canvas in the middle, a basic chat where to enter your answers and so on.
The problem is, for now I only saw code example where the programmer has to place every single elements manually and it can become very tedious… After some research, I found out the this.add.dom(…).createFromCache() method. This allows to code some simple html element and add it to phaser game.
Is it a good practice ? Does it exist some layout manager in phaser ?
When you add game objects with this.add.dom() they will get scaled and positioned with the game canvas if you’re using the Scale Manager modes like FIT, but that’s all.
For substantial UIs people usually add their own HTML/CSS to the page instead, or use a library like Angular, React, Vue.
Thanks for your reply but what do you mean by “add their own HTML/CSS to the page” ?
So, taking the skribbl example again. Are you telling me to create an html/css page where the drawing zone is a Phaser.Game ? Or the whole display would be a Phaser.Game with some html/css (+react/vue/…) inegrated somehow inside ?