Sep 05.12   OUTPOST2 – SNEAK PEEK#2 | GRAPHICS

THE SPLASH ANIMATION

Giving context to the game…

One thing that we really tried to get right with Outpost: Haven and Outpost: Swarm was the landing page (or what I often refer to as “Splash Anim”) – technically, it’s the first impression the player gets from the game, right after the loading screen (and in most cases, after the ads from our publisher/sponsor). Obviously this page needs to give a very good first impression, and make the players want to click “Play” and get to the game after having spent a minute or two waiting.

We got very good feedback from players for the two “Splash anims” we created for the previous iterations of Outpost, but this time we wanted to change the recipe a bit: both previous animations where action-close-ups on the players battling swarms of alien bugs. The whole environment was somewhat pushed to the back, as the focus was definitely on the player action.

Outpost: Haven splash illustration

Old Outpost: Haven splash illustration

I wanted a better context, and a greater sense of environment for the Outpost2 splash. After all, the sub-line is “Outpost2: Stranded” and I wanted the players to feel truly lost and overwhelmed in an alien and hostile world, while still keeping close to the action-shot roots of the previous Splash pages.

The Brief

Once more, I commissioned Concept Artist Brandon Moore to illustrate the landing page for the game. As usual, I provided him a pretty detailed brief explaining the concept, showing some inspiration imagery that lived closed to what I imagined, as well as a step-by-step layout on how he would need to layer his master file so that I could animate it in Flash once the illustration completed.

The Brief for Outpost2: Stranded splash animation

The Brief for Outpost2: Stranded splash animation

The Brief was sketched and layered to give him a quick idea of the composition and illustrate the action.

It is by no mean a box, but a start-up for discussion about composition and mood, and a way to put the artist in the right direction, avoiding unnecessary back-and-forth that would strain him and me alike. In short, I see it as a precious time saver (and you know what’s said about time, right? :) )

Working through the Brief

Brandon quickly came back with various block compositions refining and building upon the brief. I can’t remember if he decided to stay very close to the original composition of the brief, or if it is I that nudged him in this decision, but as you can see, aside a few edits here and there, the composition was really bringing the original sketch slowly to life.

Work in Progress

Work in Progress - various steps of production

As we were getting closer to completion, it was becoming apparent that the illustration was too dark, and that the composition could be slightly edited (and by that I mean simplified). It’s always a problem getting a static illustration that is meant to be animated, as when static, all the elements seem more cluttered than once distributed over time.

Another issue I was having was that the color palette, generally very dark, would most likely clash, or at the opposite, be absorbed by the game UI. Instead of wasting Brandon’s time, and because his file was as usual very well layered, I decided to handle the color correction myself, as I was still toying with various concepts for the main UI and couldn’t really give him a palette to rely upon yet.

Editing the Art to fit the game generally tones

Lightening the color palette

Lightening the color palette

Aside the color palette, I also slightly edited the position of various key elements (both marines, and the crashed ship) so that their individual shape would be more telegraphic against the lighter background.

While it wasn’t originally intended, as I was editing the color palette towards lighter tones, I realized that I was getting back towards the original sketch palette.

This may come from the fact that I was expecting the sky to be much more dramatic and heavily textured with clouds, something that I had trouble communicating to Brandon. I really enjoyed doing these edits, so I didn’t really tried to carry my point across, and considered it would be faster/more fun to do the modifications myself rather than spend the time for more back-and-forth :)

After a few tweaks, the image started to look really great within the game UI:

The image within the game viewport

The image within the game viewport

As you can see, I did needed to boost the contrast for the image quite a lot to compensate the screen glows, overlays and other effects we have in-game.

But the Splash looked exactly as I wanted – it was ready for animation!

Animating the end of the world!

I won’t go over the step-by-step process of animating in Flash, as this would be a blog post of it’s own. For those curious about the process, they can look at the layering suggested in the brief, as it is almost layer-for-layer the animation structure of my Flash file.

Animating in Flash

Animating in Flash

It’s not a secret for anybody: I can prototype alright, but I’m not really a coder… I don’t really know if Squize even keeps my Tween-based animations, but that’s the fastest way I can render and tweak my anims, and if he doesn’t keep them (meaning, if he decides to code them instead) at least, the tweens give him an idea on how I envision the whole thing animated :)

Among the things that were sacrificed from Brandon’s illustration where the flying bugs: while they looked great on the static preview, once the animation in place, their immobility looked very awkward… Instead, I picked a random frame-by-frame animation of birds of prey, duplicated and color-corrected it several times, with the understanding that we might use one of our in-game flying bugs flying routine to code the animation.

As I write this, Squize is currently integrating the splash animation within the game – What will stay key frames and what will become bits of code is still unknown: stay tuned if, like me, you are burning to know the outcome :)

In the meantime, here’s a video preview of the animation, as prototyped in Flash:

One Response to “OUTPOST2 – SNEAK PEEK#2”

  1. Beautiful stuff as always :)