• Register
Post news RSS Gym Empire - Building A New UI With The Help Of The Community

With the help of the Chronik Spartan Discord and reddit community, I was able to turn the original flat and characterless UI into something functional and aesthetically pleasing whilst staying true to the Gym Empire style.

Posted by on

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.

1533797751283 Clothing 3


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
  • Building
  • Sponsorships
  • 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.

rollercoaster 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.

UI Front End


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.

didithemehospital6 2


sims


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.

UI Style 4


Various UI


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.

UI Style 5


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.

UI HUD FInal 2


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.

Screenshot 1 1


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.

Tab Panels


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.

Comments
LunarShuriken
LunarShuriken

Love the graphics and an idea!

Reply Good karma Bad karma+1 vote
Chronik_Spartan Author
Chronik_Spartan

Thank you! The look is really something I'm trying to get right, so to get such comments is really motivating :)

Reply Good karma+2 votes
progorion
progorion

I like the new GUI too! :)

Reply Good karma Bad karma+1 vote
Chronik_Spartan Author
Chronik_Spartan

Thanks buddy! :)

Reply Good karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

News
Related Games
Gym Empire
Gym Empire Real Time Strategy
Related Engines
Unity
Unity Commercial
Related Groups
Chronik Spartan
Chronik Spartan Developer & Publisher
Indie Gamers
Indie Gamers Hobbies & Interests with 1,509 members
PC Gamers
PC Gamers Hardware & Tech with 746 members
Unity Games
Unity Games Hobbies & Interests with 1,819 members