After finishing the character clothing updates, Team Raven on the Chronik Spartan Discord community won the challenge to decide the next area to update in Gym Empire... They chose UI.
The original UI consisted purely of an info bar along the top of the screen with some basic info and controls. Whilst functional enough for the early development, it didn’t do anything for the aesthetics and continued to give Gym Empire that amateurish look.
The first step in planning the new UI was to consider what type of information the user is going to need to be able to play and enjoy the game. Some of the key areas of information that are going to be important are:
- Financial status
- Gym pricing
- Gym performance
- Client/Staff Satisfaction
- Hiring Staff
- Buying Equipment
- Rival gyms
To start implementing the changes the first thing to look at was the placement of the info and buttons. I started by looking at some examples of other tycoon games I like to get some inspiration. One of the ones I liked the look of and settled on was Roller Coaster Tycoon.
Following my inspiration I went about rearranging the buttons and info into a format that I felt looked nice and was functional. Upon presenting the latest changes to the Discord server one of the things I picked up on was that people felt the layout was well designed for a touch interface. Not a terrible thing, as I plan to port Gym Empire to mobile and hopefully Nintendo Switch if things go well. However, the focus right now is for PC and I don’t want the PC experience to suffer due to trying to keep a balance in place for future ports. Plus when it comes to porting, rearranging the UI will be a simple change.
To further open the scope of the feedback I put a before and after picture on reddit. The comments I received cemented the fact that the UI looked touch friendly but not necessarily user friendly for the PC.
So it was back to the drawing board. The key comment I came away with was that the buttons were too far apart; meaning that navigating using a mouse would be tedious. Again I looked at some more tycoon games as research and focused on some of the more retro classics which went for simple but functional UIs.
The original top bar design I had fit the purpose for proximity of buttons and info, however I didn’t feel the aesthetic and location matched the quirkiness of Gym Empire. I also wanted to ensure that any info bar was as least intrusive as possible. I started toying with the idea of an info bar that sat in the corner and knocked up a few prototypes.
After some further confirmation with the Discord community I finally decided to settle on the corner bar design. Now with the layout decided the next step was to start to polish it all up. This is the part I always start to get nervous about. Not being an “artist” I always worry that I don’t have what it takes to get that nice finished look. I seem to have this idea that if I don’t get it right first time then I won't be able to do it, but if there’s something I’m learning with game development and art in particular is that it is never a first shot kind of thing. It’s always after a few iterations that you start to land on something you’re happy with. I guess if you only ever see the finished product you never know how many scrap versions existed before it, however now that I’m more in that creative position I’m starting to gain an appreciation just how much trial and error is involved.
Still with that nervous feeling that I might not be able to come up with something that looks polished and aesthetically pleasing I started knocking up some early designs. To start with everything just had that amateur, unfinished look and everything stood out like a sore thumb.
Slowly but surely things started to look and feel a lot better. As I started to decide on the individual parts of the design it all started to come together and really fit quite nicely with the Gym Empire style. I’m really pleased with the finished look.
With the main info bar complete, the next thing was to start redesigning the panels that will contain the info. The original style was a flat semi-transparent box.
I like the idea of some transparency to enable the player to still see what’s going on, but no variation I could come up seemed to fit the look. I decided to try a solid look and instantly it felt better. At a later date I think I’m going to experiment with the transparency again but for now I’m going to stick with the solid look until the panels are fully populated. Only then will I really be able to tell what it looks like.
The final part of these updates was to include tabs on the panels. By including tabs on the panels it means there can be less clutter on the main info bar. A lot of the information is closely related and it makes sense that when a user wants to look at for example financial data, they may also want to look at prices of memberships etc. Therefore that information will be grouped in tabs under the overall financial menu.
With the tabs added the majority of the framework for the UI is in place and there is enough now defined so that any new UI to be added has a distinct style to follow. The next steps for the UI will be populating the tabs and hooking everything up to the data in the background. I’m quite excited for the next part as that is when the gameplay is really going to start to make an appearance.
With all the latest visual updates I’m getting really close to the point where I will be able to create the next trailer. The plan for the next trailer is for it to be a proper announcement trailer and be much more representative of the final product. I’m really excited for that as that I feel I’ll be able to take the marketing to the next level at that point!
You can add Gym Empire to your Steam Wishlist now.
Join the discord for exclusive beta access Chronik Spartan Discord.
Please subscribe for updates on Gym Empire and to be in with chances of winning free copies of games!
You can support Chronik Spartan Games and get exclusive access to in depth behind the scenes news and other awesome rewards at Patreon.
This blog post originally appeared on the Chronik Spartan blog.