here are some steps following the development of our level 3 large alien artifact...
It all starts off with some concept art of course. Mark Paulik did all the concept art for the game and decided to do so in vectors for this particular game. Not only was it generally fast, but it also allowed us to drop in some template art fairly quickly while the final art was being produced.
One of the things that was important to us for this project was to keep a pixel-art feel even though the game was being pre-rendered. To achieve this look we kept our shapes fairly simple and geometric and our texture maps were pretty dang flat-shaded with basic outlining. Since the game was pre-rendered, we generally didn't care to pack the UV's efficiently or keep the texture sizes down. With a bit of trig we ensured that our render camera was positioned as such to provide pixel-perfect renders to the size of our isometric tiles in-game. No scaling it down after rendering.
So here's the basic setup of the render-material I developed for the game. For a finer level of control I opted not to use scene lights, but rather a various falloff-maps that connect to a composite map - this composite map is pretty much exactly like using layers in photoshop and allowed me to control the blending of each element in a consistent way. The "toplight" layer i'd sometimes use if a building needed some extra contrast. The composite map then leads to the outline material which adds a 1-pixel outline around the buildings, again, to feel more like pixel art and compliment the texture style.
Here's an example that shows the buildup of the 'layers' of the composite map:
Texture -> Ambient Occlusion -> Shading and Shadows
Every building in our game has an "ON" state when it's connected to power. To show this, we wanted parts of the building to glow. We'd start by using a luminance map to render out a mask of areas we want to glow. For this particular building we also wanted the electricity ball in the center to emit light, so I also rendered out a light-pass for that. I'd then composite them together in photoshop and add a bit of outer glow.
Some elements of the glow sheet we would animate by hand in photoshop:
We'd then assemble all the frames into spritesheets. For the glow layer, we needed to prep it for the engine so we could have the color glow through 100% saturation before burning hot-white. This meant multiplying the red channel x2. I can talk about the glow tech alone for quite a while.
Since we're dealing with pretty large sprite sheets here (some as large as 2016x1260) we wanted to reuse as many frames as possible during the course of an animation. (ex. if something is bobbing up and down, we only want to render it moving up then cycle backwards) To make this possible, I wrote an spritesheet sequencing tool in javascript that allowed us to preview on the fly and iterate quickly. We'd do this for both the building and glow spritesheets.
The final result would look something like this (pulsing and non-pulsing versions)
Other levels of this building:
