As part of the recent release of Square Route, we decided to put a little more effort into our in-game user interfaces. All our games (and indeed just about all games) have a menu system, text, buttons and the like. These are often the first things a player sees when they start the game, so a good UI allows for a good first impression. Unity, our game development language, added some much-improved UI tools a couple of years ago so we decided to make good use of them.

Take clickable buttons for example, like the one below that a user might click on to return to the main menu. This is a pre-Square Route button, from a time when we just added a basic panel with a border and used Unity's built-in text component to put some text on it.

And here's our latest effort from Square Route:

This button is made up of several layers, which mostly consist of simple rectangles with rounded corners. Add to this a striped effect on the button face and some highlighting at the top and bottom, and we have a much more professional-looking 3D-style button. Here are the layers used to make it:

Unity supports various button states, such as when the mouse is hovering over it, or when the player is clicking down on it. Slight variations of the above button can be designed for these scenarios:

After applying smooth animations to transition between each state, the button UI experience is complete, and, if we do say so ourselves, looks pretty good!

For text we have been well and truly converted to the world of TextMesh Pro. Once a paid-for Unity Asset, the compiled version now comes free with the Unity Editor, and it's an excellent tool for generating text in many different styles. And because the styles are drawn straight into a texture, adding shadows, outlines and the like doesn't take up any additional rendering power, unlike Unity's UI text which duplicates drawing in these situations. If you're starting a new Unity project, we'd recommend getting on board with TextMesh Pro from the start.