ui Use dom/css for game UI?

[Imrryran]

Hi,

I'm tinkering with a strategy game concept and I thought I could try web-based technologies for faster prototyping. I'm more of a Java programmer, so I'm learning the ropes, but I think that a web game will be easier to iterate on with over people : no need to install anything, just go to the link!

I saw there are multiple frameworks: pixi, phaser, melon, babylon, etc. All of these have some basic support for UI, but it looks to me it still is pretty poor compared to DOM/CSS native features, or you need a greater involvement in graphics wrt code.

Following a few tutorials, I could easily use Vue+Bulma to draw a quick UI prototype (see https://guillaume-alvarez.github.io/technologies-app/), only missing the game map (that will need another framework obviously), I think it would have taken me much much longer to do the same thing with Pixi (I tried it a few years back).

However I see most game only UI is made in the same framework as the main game view (pixi, phaser, etc.)... So I'm curious... Why is that?

Maybe my use case is a bit specific, relying more on UI than on animations? Or I missed some great UI library for these frameworks? Or for mobile screens you need a more integrated UI?

What am I missing?

[KennyGGames]

I found this to be an great question. I too struggle a bit with the graphics effort. I think that once a framework is selected, the team likes to develop everything in it.

Phaser for example has a game loop, physics support, an overarching game object to work within.

I too am exploring using phaser as my platform but found building board layout and graphics quite tedious, although it may be just a learning curve.

Phaser is effectively a wrapper around canvas, with some builtin like physics, camera control, can access the DOM.

I suspect you can mix/match css and canvas building inside the game object, but I haven't explored that.  I seems most are using the game object for game assets and gameplay experience, and HTML to wrap non gameplay components. (Page Header, footer, advertisements, menus, site nav ,etc)

I'm obviously not an expert in Phaser yet. What I was looking for as well, was a tool to help minimize the effort of building gameplay logic, scene management, etc without having to handcraft all that in JS, CSS, HTML, but it seems to add a lot of learning curve and complexity that my games may not need, which can lead to bloat, performance issues, and programming complexity.  It's easy to get started, but defiantly a thinking paradigm to adopt.

 Have you since resolved your design thoughts - landed on a platform - or just built everything in CSS/HTML/Canvas/JS ?

 

[Imrryran]

Thanks for your interest.

I settled on Vue.js to handle the main UI, with cards and some other widgets, and used Pixi.js in a specific Vue component to show an hexagon tiles map (also using honeycomb for the maths).

The interaction between Vue and Pixi is a bit tricky as you have to transform callbacks from one's objects into the other's but it works.

I preferred Pixi over Phaser because most of what Phaser proposed was overkill for my need, I just needed a very simple display, not a full game engine. I may also have used SVG to display the tiles map, but I already used Pixi in the past so it was easier to me.

You can see a simple prototype on https://guillaume-alvarez.github.io/technologies-app/

The source code is on https://github.com/guillaume-alvarez/technologies-app/.

So I think:

• If you are a pro game dev (and not as a hobby tinkerer) use Phaser for the whole UI as I would have greater control over the UI behavior than with CSS. Animations are especially tricky in CSS.
• If you are a web developer that need some gamey display, CSS/DOM + Pixi or SVG is fine.