19th Ave New York, NY 95822, USA

Hawken Twitch Cockpit Overlay

Previously, I had been asked to design a hangar-themed overlay for the official Hawken stream. However, I wanted to have something significantly different for my own Twitch stream.

I modelled the cockpit elements in Sketchup and applied some basic textures to them, then rendered the images out. Brought them into photoshop and grunged everything up. Threw it all in After Effects, then added the animated greeblies like blinking lights and moving dials. Finally, I designed the interactive components of the UI in Flash to interface with Twitch information from TeeBoard so that the screen components could display things like my recent followers and donations. It fits comfortably with all 3 mech UIs (light, medium, and heavy). Only downside is it doesn’t move and sway with the mech itself, but you’ve gotta draw the line somewhere, right?

An early look at some of the assets I worked up in Sketchup prior to rendering:

A lot of post-rendering work went into cleaning all of this up and unifying it with the grungy cockpit aesthetic that Hawken mechs are fond of, but the basic ideas are there. A screenshot of the game was used to give myself a rough point of reference as to how much of the sides of the screen would have to be covered at the resolution I stream at.

Leave a comment