Making info pretty

17 Mar

Last night I had a crack at making the graphs that display your concentration and relaxation values prettier.

I had the same basic chart stuff for aaages, always saying “yeah, i’ll change that” and never actually getting round to it. Now that I have some extra time since my game actually works (I finished it off today, it now seems to be bug free in terms of game-ness, have to sort out audio bugs next, but those are less obvious in the game), I could actually make some pretty graphics.

I had no idea how to display them really. I had a quick browse over at my favourite graphic design inspiration site, dribbble.com and found some interesting graphics that inspired me.

I found this pie chart like thing and really quite liked it. I thought it was nice and I really liked the radial system to display data, and I thought, with a bit of tinkering, it could make a nice little gague type system so that the bar fills up as you concentrate.

So I took this over into illustrator and came up with this initial design:

It seemed okay, but it was missing something. The type in the middle seemed a bit confusing really. You couldnt understand just by looking what they meant. It would had to be explained. So I replaced these with some pretty icons instead.

I thought these were clearer, and prettier. I adjusted them a bit more, I made the outside rings thicker and closer to the center and changed the colours a little and placed them into my game to see how they would work.


I was pretty happy with this now. As you can see, instead of having the initial three dials (concentration, meditation and signal) I just have the first two and resign signal to the far corner which now looks more like a mobile phone type signal graphic.

I would like to animate these graphs a bit more. Currently they just jump to what ever the value is and it’s quite sharp. Ideally, I would like them to animate smoothly to the next value, but if that can’t be done, I’m not gonna lose sleep over it.

Also demoed in the above screen shot is the multi hand tracking that can now be done in game. You can use both hands to blow stuff up, and also even other peoples hands. It’s very social now.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: