Developer's Blog

The UI Update of 2018

January 8th, 2020

By Peter Robinson

I’m a little embarrassed to say it, but my last blog post was from 2018 when Pirate Code first arrived on Steam. So I’ve decided to do a series of posts to cover the work done in 2018 and 2019. Of course, most of this information was covered in update notes on Steam, so I’ll try to make this a little more technical. My last post mentioned three things that could come next: more Pirate Code, work on Torque2D, and work on new game ideas. Without question, the bulk of my time was spent improving Pirate Code. I released a number of improvements to performance and took out some nasty bugs. Today Pirate Code has never been better! But there were four major updates to content that are worth mentioning. The first major update was the user interface update.

Removing the Chocolate Bar

Right out of the gate, it was clear that the most challenging part of playing Pirate Code was dealing with the battle screen’s user interface. It took up a lot of space at the bottom of the screen and still managed to hide many important bits of information behind tabs. One user likened it to chocolate bar. Worse, there were a number of things that were completely hidden from the user, like how many items they had found or how much gold they had won. I wanted to fix these things by making a user interface that spread around the screen and was concentrated in the corners and edges, but there was a problem – a technical problem!

The original UI had to fully take a rectangular area of the screen because of limitations in the game engine. Despite taking so much room, less information was visible.

Like many 2D engines, Torque2D was designed to handle sprites in scenes. In Pirate Code, the actual battle was built in one scene and the user interface was built in a different one directly below it. You could stack them but only one of the stacked scenes could receive mouse clicks! That means that either you could click on things in the UI or things in the battle – but not both. My new design (and the design of most games) calls for both. I wanted the user to click on ships in the battle and buttons in the UI. This explains why the original UI had been next to the combat screen and why it had to take up the whole bottom of the screen. Something fundamental needed to change.

Time to Dust Off My C++

So to redesign the UI, I had to start with a change to the game engine. I made an adjustment so that mouse clicks could optionally pass through the scene to the scene below it. When the event callback is fired the function could optionally return true if it would like the event to be passed to the scenes below it or false if it handled the event. This might sound simple but it was a fair amount of code in a rather old section of the engine. I hope to move this feature to the main engine someday.

Once that was out of the way, a whole world of design possibilities opened up! I was able to design a smaller, more flexible UI that gave a much greater amount of information. You can read the full announcement about the update here:

I’m happy to say that the update was well received. With that major change out of the way I was able to focus on performance improvements and bug fixes for the rest of 2018. I also spent some time working on the game engine separate from Pirate Code, but it wasn’t long before I found myself starting on another major update. This time I was targeting something big: the ocean.


No comments yet...

Leave a Reply

Your email address will not be published. All fields are required.