Battle Boats— A Beginner’s GUIde!
When it comes to any application, you can’t go wrong with a good solid GUI. GUI is the foundation element that will help the user interact with your scene. However, when it comes to working with a GUI, it can be a little daunting! So daunting, how often would you say you are adding it at the last minute in the end? I know I have. 😂
Well fear not! As someone new to the Babylon.js GUI world, I myself was overwhelmed. As such, I decided what better way to face my fears than to jump right in and make something fun! I learned a TON. In fact, I’m going to share some tips and tricks I’ve learned from the past couple of weeks diving into GUI.
In this blog post I want to demonstrate by creating the beginning for one of my favorite classic games, “Battleship”, or for this demo “Battle Boats”! I ended up creating a simplistic UI, with tons of potential to expand and add art if I’d like. So note, while this is still a work in progress here are some of the lessons learned, small coding snippets, and fun techniques I used! In our little battle boat demo we have a simple game grid for a ship as well a side menu where we select which ship, we want to place. When we hover over these buttons a helpful tooltip lets us know the dimensions before an attempt to place. Once we’ve selected the appropriate place for our vessel, we can let it go and the game marks it off as yellow. A good foundation for us to flesh out into a full game. Now’s let look at some of the behind the scenes.
When you begin making your GUI, it’s important to think about the size and space you would like to use. For example, you should decide if you want your GUI to be the entire full screen, or just a specifically sized texture. Did you even know you can bind a texture to a mesh!? That’s exactly what was done with this game grid.
Next, I’d highly recommend stack panels for grouping GUI elements that belong together. Think of it like a container where you want to group elements together that have things in common. If we look at the tool? Doing stack panels early on can also help avoid troubles later where you want to move an entire group of elements. In the boat list, I make them a stack panel so I could potentially animate the entire group or add art to encase the buttons.
The Babylon.js GUI system is quite amazing with how you can group and combine elements to make unique GUI elements. Grids are also useful for creating complex layouts. In the battle boats demo we used grid even distributed sized squares, but you can use any ratio you’d like to create a unique layout for your application.
Next, did you know you can also create controls on top of controls? For example, the tooltip system for boats was made by adding a text block control on top of a rectangle control. Then I had it link these to the mouse cursor. While it was easy to get the mouse position learned quickly, the coordinate system was based around (0,0) being the top left corner, while the GUI system (0,0) was the center of the screen. Not to worry we can do some simple math as seen below:
For the the dragging I was able to use observables and booleans to track if you were holding the mouse down and inside a grid square. All of your events for GUI input are going to be based around some of these observables.
Finally, the biggest advice I can give someone new to GUI has to do with element positioning. In one of my earlier demos using Babylon.js this was something I found myself tripping up on. Using hard coded pixel positions can tend to lead to problems when going from one screen size to another. This is fine if you know you are solely designing for a specific screen size. However, I highly recommend using the horizontal and vertical alignments for your placements to ensure it stays the same on all mediums. Then you can ever so slightly adjust with pixels. Most importantly, TEST! And I would recommend testing while in progress as well. The last thing you want is to have done all that beautiful work on the layout and have it be inconsistent on a different screen size. Fortunately, we can also check the screen size and either scale everything appropriately or use percentages when placing.
Now with some of those tips out of the way, I hope this relaxed some of those GUI nerves, maybe even gave you some inspiration? 😉
But if that didn’t convince you. I’m happy to give a little teaser for the future of Babylon.js. That’s right, an up and coming GUI editor. Our goal for this editor is to allow all types of users to create GUI with ease and speed with an easy drag and drop system. This new tool is something I’m very excited about. The simple interface will make it even easier to create Babylon.js GUIs than it is today! And finally, just Like NME, we envision allowing you to export, load to the snipper server, and reuse in the created GUI projects with super ease. Imagine not having to constantly guess where to position your GUI elements. All those struggles of modifying, testing, and then modifying again, GONE! But for now, be on the lookout for more fun GUI related posts. ❤
Until next time,
Pamela Wolf — Babylon.js Team
https://twitter.com/ms_Destiny14
P.S. Don’t forget to check out the brand new documentation website with its amazing GUI section. I can definitely tell you that it was super helpful to look up because I couldn’t always remember things off the top of my head. It’s even got playground examples so I could see exactly what I needed to use in action.
