Does anyone have experience with using phaser DOM a lot and mixing with other canvas render in phaser and can tell me about the performance and stuff?
Im working on one big game in phaser, im having a lot of sprite objects, and DOM for UI because it is a lot of easier to create a complex and animated UI using html and css than canvas. So far everything is working perfectly.
But the problem is im having a lot of interaction between UI and gameplay that is on canvas, so i would require a lot of sprites also to do in DOM and I’m wondering about the performance and compatibility?
Should i even worry or just to trust the phaser and go with it?
i mixed canvas and html in my game, too. but it feels “dirty”… html scales different to canvas. you get problems with the pointer-click-events… you have issues with the depth and overlapping…
as for now, i try to do all GUI within phaser and canves.
therefor im using rexUI (see here: Overview - Notes of Phaser 3 )
you can create easy dialogs, buttons, scrollers, and so on… https://codepen.io/rexrainbow/pen/MPZWZG
i’ve create a custom class for some UI elements and than i can call this in my GUI-scene and build up all stuff i need.
it sounds bit complex, but on the long run, you get a better solution in my opition.
For example, you have inventory, I’m already looking to minimize DOM elements so new CSS tricks are very handy, for example, I’m using only one div for inventory container and CSS grid for slots, each slot have before and after, after for icon and before for number quantity, so I’m taking advantage of CSS to really minimize as much as I can HTML elements. Even if I have a lot of UI stuff it is just a couple of DOMs render max thanks to those tricks.
If you want to drag the icon on tilemap for example and place it like furniture, show some text, ui, or show tooltip when you are near some object. I have a lot of NPCs going around and they are talking with player, talking with each other, showing thoughts in comic balloons. I was thinking to add that stuff also in HTML instead of canvas render. Somehow text is much clearer in html than canvas.
So if im having for example around 50 npcs those would be 50 possible comic ballons with text, or mini dialogues over their heads in dom etc.
I tested and it was working fine, but i was worry for future needs, i dont know will that works for other people running the game. I dont know anyone here that used DOM for some bigger scale projects so i was hoping people can share their experiences.
