DevLog #009 – UI Design

It’s been a while since the last update, but despite the whole world grinding to a halt with this lockdown, we’ve been making decent progress on our voxel game project. The last 2 weeks have been focused almost entirely on getting a user interface into the game.

Our engine has inherited a pretty advanced UI system from our previous games (since we don’t use any of Android’s native UI stuff), but we had to make some further optimizations for this project, such as dynamic batching for UI elements, since our static batching just wasn’t suitable for UI stuff, and an inventory screen would typically introduce hundreds of draw-calls.

While working on the inventory layout, we quickly realized the number of draw-calls would badly affect performance..

Adding dynamic batching for UI was pretty painless, since all we had to do was defer the rendering of individual elements, and add them to a buffer, which is rendered and flushed once it fills up or the material changes. One benefit of writing our own graphics engine is the ability to just add what we need when we need it – the downside is nothing is done for you.

The inventory layout needed careful thought due to limited space and dynamic aspect-ratios on mobile

With the inventory screen now rendering with only 66 draw-calls (including the game environment behind it) we’re doing pretty well with optimization.

On Android, screen-space and aspect-ratio of target devices is an unknown quantity, so getting so many touchable elements to scale nicely without clutter is no easy task, so a lot of work goes into making all of this responsive. The row of tabs at the bottom of the screen was initially designed to go at the top, but they were too close to the item slots at the top, which are there because the in-game controls are at the bottom.

The end result should be something that’s intuitive for the player. The next step will be to add some actual items to the game, so we can make all of this fully interactive.