Need Assistance in Creating GUI

Hi all,

I am currently developing a game using BabylonJS and need some assistance in creating the GUI. I am aware of the creative and flexible nature of BabylonJS and the plethora of documentation available, yet I find myself in need of your guidance for creating a GUI that fits my specific needs.

Here are the details of what I need for different screens in my game:

  1. Landing Screen
  • Buttons: Info, Full Size, Sound, Play
  • Function: Connect Wallet
  1. Gamemode Screen
  • Buttons: Help, Sound, Exit, Select Gamemode
  • Function: Select Gamemode
  1. Lobby Screen
  • Buttons: Help, Sound, Exit, Random, Delete, Start
  • Function: Select and place ships on a hex grid
  1. Game Screen
  • Buttons: Full Size, Help, Sound, Exit, Action Button
  • HUD: Fleet Status, Radar, Score, Action Points
  • Function: Press on fleet to select a ship, move with mouse click on field (consumes Action Points), choose to fight (direction of shoot, consumes Action Points) or suspend (gains Action Points) with Action Button
  1. Win/Loss Screen
  • Buttons: Play Again, Exit

Here a some sketches I have made:

Any examples or templates that closely align with these requirements would be greatly appreciated. If you have any advice, insights, or resources that could help me better understand the process and achieve my goals, I’d be very grateful.

I’ll be eagerly waiting for your thoughts and guidance. Thanks in advance!

Deny Heam

cc @carolhmj our GUI guru

I believe @jamessimo Figma to Babylon plugin would be very helpful to assist you in creating these layouts: Figma to BabyonJS plugin! - Demos and projects - Babylon.js (

1 Like

So with the GUI, BabylonJS can do everything you want no issue.

If your comfortable with Figma, I recommend using the plugin I made that @carolhmj linked above, here is the Figma plugin link

You can also use to build your UI and then press “Save” to export it as JSON to use in engine or save it to the snippet server and use that.