Saturday 8 April 2017

YEAR 3 - BA3b - Diegetic UI; New character

Based on the feedback I got from the meetup I redesigned the character again to have diegetic UI. In In this concept, the orange is the hover bar, red is health and blue is the number of jumps.

I liked the idea of incorporating the hearts in number 4 into some kind of clothing (jewels?). I also liked the round hover bar because of it's resemblance to a clock counting down, so it feels like it'll be self explanatory to the player.

I ended up taking the concepts into pixel art because so I can more clearly see how the new UI might translate into the final 32x32 character and this is what I ended up with. This image shows a steady evolution of ideas where the most recent design is on the right. The ring around the face is the hover bar, and the eyes/teeth represent the health. The spikes on the back are the number of jumps the player has. I removed the arms because I didn't want the player to think they can use them to attack/grab/climb. In the right most design I thickened out the spikes because in game they were difficult to see.


This image shows how the UI would change over time, with full jumps, hover and health on the right and none on the left.

This gif shows the character in game. I'm very happy with it, and in playing I've found it does its job at giving the player the required information.

It does look like it's standing in mid-air though wen still so I still need to update that.








There were a couple of issues with the previous design so I updated the character again to have a more visible hover bar and flappy feet that explain the hovering.

This character looks a lot goofier and confident than the previous one (which looks a bit shy).

This new design is exactly the kind of iconic character I was looking for and it also solves the problem I was having with UI, so I'm very very happy with it.

No comments:

Post a Comment