The BitBull Blog

Ah, UI work! Truly the most enjoyable part of building a game. I love building user-interfaces, it’s so much more fun that all that irritating ‘gameplay’ stuff. How I wish I could churn out menus and buttons and fiddle with bitmap fonts all day!

Not.

Building a decent user-interface is often a fiddly and mind-numbing task, yet it’s an absolutely essential part of the overall gameplay experience so cannot be skimped on. Fortunately the only menu-driven part of Jetboard Joust is the ‘weapon upgrade’ stage so I don’t have too much to worry about, but I need to get it right nevertheless.

Seeing as I have just finished the first alternative weapon I decided to bite the bullet (no pun intended) and just get on with the weapon upgrade screens. As expected it was a fairly fiddly and time-consuming task.

So, first step – design the UI. This part wasn’t so bad, I knew what info I had to get across so just went for a layout that was as clear and straightforward as possible whilst retaining a degree of visual interest. I wanted to keep consistent with the game HUD as well so in that sense a large part of the ‘look and feel’ was already defined. It took a few hours to get something I was happy with.

Only problem was it became apparent that I needed a second, larger bitmap font in order to bring some variation to the design. I went for one in the style of the numbers in the HUD which seemed to work well but, as with all bitmap fonts, it took a lot of fiddling around to get it working correctly.

I also thought I needed larger icons for the upgradeable items so had to design an icon for the pistol and shotgun. At the moment I’ve set this at 32*32 though am wondering whether I might need to accommodate different sizes.

Next step – build the design in code. I decided to do all the drawing in code so that it would be easy to expand the text boxes etc if I needed to rejig the design. Again, a pretty tedious and time-consuming process. It paid off though as there were a couple of instances where I needed to change things in the layout (due to underestimating the space I’d need for text) and this was simply a matter of changing the value of a couple of variables rather than redrawing everything in photoshop. The UI is drawn in three separate layers, the background ‘connectors’, the boxes and lastly the text and icons.

I then needed to get the text read ‘live’ from actual data. As it may not just be weapons that are upgraded I defined an IUpgradeable interface that specifies
the functionality an object must implement to be ‘upgradeable’. Maximum and minimum values are set for the various stats and upgrade costs and the values for each ‘level’ calculated on the fly. Spent quite a while on this and implementing it in the two weapons I’ve design so far.

This all worked fine but I couldn’t help feeling that the UI just felt rather ‘dull’. I needed something to give it a bit more life so decided to try and implement a kind of ‘radio static’ type effect along the lines of the interference effect you get on the scanner when the player takes damage. The scanner interference shader was the obvious place to start and by using this, and an awful lot of tweaking, I was able to get an effect I was happy with. I didn’t end up changing the shader code at all, just messing with various parameters. Only the layer with the text and icons is drawn using this shader.

Last task – make it work! I’ve tried to make the process as clear as possible for the user and give visual feedback where necessary – I’ll also add auditory feedback at a later stage. You can see I’ve ‘greyed out’ the upgrade cost and button if the user doesn’t have enough cash and show a confirmation message if the user does purchase an upgrade. the process is fairly simple so hopefully I shouldn’t need much more than that but I’d be interested in any feedback…

Dev Time: 5 days (told you this was time-consuming)
Total Dev Time: approx 67 days

previous | next