Overgrowth multiplayer chat

This is a post from Iiro Jppinen. He is responsible for most of our GUI design -- the parts that look good.

Hello everyone!

Some of you might have seen me mentioned on the blog before, but for those who haven't, let me introduce myself briefly: I'm the lead GUI designer for Overgrowth (a nice title I just made up).

Jeff has already blogged about some of the interfaces I've been working on with him. It's been a real pleasure working with him, as he really knows what he wants. That timeline for the Animation editor is probably the most time-consuming single element we've made together, and that was still just in three days.

So then, to get to my point, I'd like to introduce to you the chat interface for Overgrowth. Pictured below is a rainbow-like example of it.

As Overgrowth utilises WebKit via Awesomium, it's really easy (this of course being what Jeff told me I'm completely inexperienced in that department) to make the chat bubbles work exactly as you'd imagine them to, with new content scrolling from the bottom, all the while previous messages fade upwards. The player can start typing simply by pressing the T key which will fade in the typing area (in the very bottom of the screenshot). As there probably won't be a mouse cursor in-game, we will utilise the scroll wheel while typing to browse through older messages.

That's the chat interface in a nutshell. Jeff really is a machine making my puny designs live with WebKit: I can basically just throw anything at him. It will for example be possible to select your chat bubble colour with total freedom and to let WebKit handle the hard work.

One last thing for the fellow Mac OS X user. As the chat interface is done with WebKit, it would be really easy to convert it to a working Adium Message Style. You can expect that to arrive at AdiumXtras at some point; I'll let you know.

As with every design, it should be really transparent an experience for the user and because of that, I hope you share any ideas you have on how to improve the experience with us in the comments area.