Friday Rewind #6: UI Polish

19.4.2019 - Jussi Kemppainen

 

We are deep into polishing the game, and this week I spent some time working on the UI – especially our timeline.

Timeline Visuals

First, I redid all the UI elements with a more hand drawn style we have been gradually bringing everywhere in the UI. After this step, we added a preview for how many heartbeats (our action points) it takes for a character to move to a certain location. As we were talking about icons we could use there, we thought about using a heart to tell that this number is heartbeats, but that makes no sense as heart is health. The we talked about using an ECG as an icon for the heartbeat and immediately it clicked that instead of using dots to mark the cut off points in out timeline (like we used to) we should use the ECG curve to separate the heartbeats. So we did.

Also, I added a clearer indication for the currently selected timeline (blue border). It is now much easier to see which timeline is active. I also added a blue container to mark the currently on-going heartbeat to better visualize what the current time is.

Action Predictions

Small changes were made to the way we visualize predicted actions, as I already mentioned, we added a number next to the cursor when in walk more to show you the amount of heartbeats your movement command is going to take. We already were showing that on the timeline as ghosted action cells, but as it turns out, that information was pretty hard to translate into useful information in the player’s head. We now do both, show the number and show the prediction.

The color of the prediction was also changed, it is now orange, so that it is clearly visible on the blue timeline. Also the prediction is now slightly larger that the committed action, so that predictions and existing actions overlap better.

Hotkeys

We also finally implemented the hotkey-system. Adding hotkeys to all commands. The hotkey is also visualized in the UI to make selecting skills using the keyboard much faster!

Damage Indications

I had always planned to have the timeline break apart when the player character receives damage and now I finally got around to adding it into the game. I think it really emphasizes the damage events and makes them stand out from player’s own actions.

Someone on our community Discord server also suggested us to flat-line the ECG after a character has been killed, so I suppose we will add that feature next!
Why don’t you jump in to give us share your great ideas with us as well!

 

Leave a Reply

Your email address will not be published. Required fields are marked *