StarCraft II: War Chest
The UI art & animations for War Chest in StarCraft II. Art by Bailey Kalesti.
STARCRAFT II:
WAR CHEST
I joined the StarCraft II team as a Senior UI Artist to help ship the first War Chest. My task was to design and animate brand new UI art within the established StarCraft II menus. In doing so I also developed the branding for the project as a whole, which made its way to the StarCraft II esports stage that year at BlizzCon.
War Chests are a seasonal feature in StarCraft II that players can buy in to and unlock cosmetic rewards by playing the game. A portion of the proceeds go to the prize pool of the StarCraft World Championship Series and other esports tournament costs.
Here’s a sample of what we made:
All this work was only possible with a talented and passionate team. Just look at all of ‘em!
UX Design: Christopher "Crash" Reed
Art & Animation: Bailey Kalesti
Tech Design: Ryan Schutter, Chris Fugate, Lan Lu
Sound: Ed Cerrato, Evan Chen
Engineering: Jason Boyle, Chris Chen, Anders Ekermo, Chris Knorr, Chris Lee, Robbie McMahon
VFX: Michael Chae, Travis Castillo
Tech Art: Rob McNaughton
3D Cutscene: Jesse Brophy
Production: Melissa Corning, Mark Agustin, Elena Nikora, Rodney Tsing
Quality Assurance: Brian Song, Matthew Huston, Tyler Plass, Tommy Tran, Aaron Yasukochi
And thank you to everyone else who supported us across departments at Blizzard!
ART & ANIMATION
I got to make a number of unique pieces of UI art for War Chest. Everything from the UI to marketing pieces. Here’s a still of the final main screen (all hooked up in-game!):
This is the War Chest UI screen. The top navigation and surrounding UI were already established when we did this. My work here was designing and animating the art content of this screen. Initial wireframe and UI design done by Chris “Crash” Reed. Tech design by Ryan Schutter and Chris Fugate. And, of course, the invisible engineering warriors who made it all happen!
I did the post fx and lighting for the key art of the actual “War Chest”. Thank you to Jesse Brophy for the great 3D model.
Now, it’s one thing to draw this stuff and animate it. But it’s another entirely to get the animations working in REAL-TIME in the game engine. Well, I’m pleased to say that we did just that! Ryan (AKA GameHeart), Fugate, Jason, and Chris helped recreate all of my animations in-game. It was the most complicated piece of UI tech in the whole StarCraft UI system. So, this was not easy. There were a few late nights spent trying to get the complex animations functioning properly. And in XML, no less!
The War Chest wheel loop animation. Property of Blizzard Entertainment.
Our process went like this for the art: I designed the art and did a proof-of-concept animation in After Effects, then the UI team used that as a template and coded it into existence. Then I went back over the XML and polished the keyframe values.
This meant all the fancy button hover animations were completely interactive. A fictional-looking UI design that was fully functional. Check out the video to see more of the animations. 😎
BLIZZCON 2017
War Chest financially contributed to, and thus helped represent, StarCraft esports in 2017. The wheel symbol was displayed prominently in the StarCraft II Hall at BlizzCon. The animations played on two GIANT screens on either side of the competing pro players. It was an honor to help design and animate art for these big displays. They also showed real-time data about each player’s current state of the game! Real data! So cool! 😆
Special thanks to Robin Barrett for helping us get this working in the game client. We were swamped, so he came in and saved our bacon. 😁
Some photos from the event:
BlizzCon 2017! My first event like this. So cool to be there, work my shift with my friends, and see my art on the big screen. Look, ma!
The big ol’ stage, with blue on one side and red on the other. The lights, sounds, and visuals were something to experience. Plus a lot of people cheering. It’s crazy fun!
soO with his data on the left!
Real-time data! Including the number of workers, which units are on the field, and an APM graph! Oooh!
GuMiho with his data on the right!
The RED version. Ryan was pleased. He loves red for some reason. Weird.
Crowded!
soO
The 2017 GRAND FINALS!! It was so loud in there and very exciting! Thrilling to watch great games and fun to see our hard work on display like this!
BEHIND THE SCENES
If you’ve made it this far, I want to show you some early concepts. It’s funny, when I showed these to my UI art colleagues at the time, they were like “Uh, I dunno, Bailey! These aren’t looking so good…” Haha…I didn’t disagree!
Anyhoo, let’s go back in time and see how those rough first sketches evolved! 😱
This is how art gets made. Art direction is always unclear in the beginning. Don’t let anybody tell you different. But then you gradually travel on a winding road to a better place. What I designed wasn’t perfect, but I’m super proud of what the team pulled off.
Working on War Chest was a great, collaborative effort. We could not have accomplished what we did without everyone's help. And much of my artistic vision depended on Ryan Schutter and his extensive abilities, time, and patience. Easily one of the best dudes I’ve worked with. I am also grateful to Chris Fugate for his stellar help. Damn is he a fast learner and a true wiz! And of course to Chris “Crash” Reed for his overarching design vision and guidance from the beginning to the end of this project. He’s a king among men. If you’re ever looking for talented and friendly game developers to work with, look no further than these gentlemen.
Lastly, all images and videos of the artwork are owned by Blizzard Entertainment.