Need Assistance in Creating GUI

Questions
,
1

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:

IMG-0599
IMG-05993508×2480 216 KB

IMG-0600
IMG-06003508×2480 201 KB

IMG-0601
IMG-06013508×2480 317 KB

IMG-0602
IMG-06021920×1357 96.6 KB

IMG-0603
IMG-06033508×2480 147 KB

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!

Best,
Deny Heam

2

cc @carolhmj our GUI guru

3

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 (babylonjs.com)

1 Like
4

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 gui.babylonjs.com 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.