Game Devlog - Web app integration

Hello people,

Just a quick update about my game development project.
I know I said I'll be working on multiplayer but first I do need to integrate the game into a web application interface. That's what I've been doing the past few days.

The challenge was to get some of the ingame information (current player, miniatures left, action history, etc...) out of the Babylon canvas and into the React app. I used MobX as a state manager which wraps the app and holds some of the game information.

So I've been designing and creating the layout for the ingame screen. Here is the final look of it. No sounds or setting for now but the full screen mode does work.

In side bar we can see the players' information and a spinner around the current user. Then, underneath, is the action history. That is quite handy to see dice rolls and understand what is going on.

I made sure the page is all responsive even though the game is not playable on mobile. (It does load but it's hard to control). I'll look into this going forward as mobile is a huge market for gaming nowadays.

Now the cool part are those miniature id cards, showing stats and abilities.
They disappear once the miniature is defeated in the game so you can track the remaining ones.

Above that, I'd like to add a target banner showing cover stats and everything but I'll wait for the multiplayer feature to implement it. As the structure of the app will most likely evolve I don't want to do it all again after.

Sans titre.png

I had a design in mind for the unit cards so I made a quick mock up in paint. Here's what I ended up with.

I did a little 'photoshoot' session of the miniatures to add on the cards. And by 'photoshoot' I mean screenshots because of course I haven't printed those minis...

It is displayed using Windows's 3D viewer. I also discovered paint3D which is already installed on Windows. I'd love to have something similar embedded on the website, allowing users to paint their own miniatures online... That's definitely in the pipes but further down the line.

For now we get to enjoy those unpainted plastic minis as below.