Saturday, September 26, 2009

Finding the look

This is usually how it starts: a simple vector drawing illustrating the basic layout of the scene and the props involved. In the best case scenario, this is the stage where most changes occur, since redrawing is a lot easier than rebuilding/repainting/relighting etc.

The vector sketches I make usually aren't this detailed either, but since this was the first location we made, a bit more effort was spent during the planning phase.

The little grey box character got reused from another game to provide a rough scale reference.

The first couple of mock-ups we built followed the tone of the original sketch quite closely in that they tried to retain the reduced, faceted look of the vector drawing. We soon decided to oust that in favour of a more painterly, textured look.

The island was made out of styrofoam, given some rough love treatment with a sandpaper. It proved hard to light and didn't take to painting as well as we'd hoped.

The rest is made out of painted pieces of super sculpey clay.

Swapping the styrofoam for a layer of Super Sculpey immediately improved the look of the game. The various dents and rough spots proved more interesting to look at and with a coat of paint, turned out to be a far better approximation of the sandy beach we were going for.

Still, the surface lacked the volume the styrofoam added, and squinting, the dirty yellow color kind of made it look like cat sick on a piece of cardboard.

The happy compromise: a base made out of styrofoam with a coating of Super Sculpey on top, provided the best of both worlds. We retained the volume of the foam, while still providing that nice look of hand sculpted clay.

We also decided to lower the camera angle so to be more in the eye level of the characters. This in order to get a bit closer to them, so the player could see what they did and looked like, and hopefully relate to them more easily.

Going for a bit more realism, we ousted the stylized placement of stones and added a rougher texture to the island.

Up until this stage, we hadn't actually decided on how to do the water, but building it and animating it by hand just seemed a bit too labor intensive, compared to doing it in post-production. So we added the blue base to the island to make compositing between the built/digital elements easier.

The first rough composite we made: the elements were all in place, but we weren't happy with the tone of the image. The gradient ocean proved too clean and digital looking for what we were going for.

This image is an example of the technique called vignetting. By placing objects at the edge of the screen, we hint that the world continues beyond the frame, without actually having to build it.

Wanting to open the game on a slightly off-setting, portentous note, we added storm clouds to the background. Though we tried to tweak it, the gradient ocean still stood out like a sore thumb, ruining the illusion of depth.

The final shot. A tighter crop in order to get a closer view of the action and a lower horizon for added drama. Replaced the crappy gradient water and switched the vaguely stormy sky for a moodier more tempestuous one.

We did some experimentation with animating the water using Ken Perlin's famous noise algorithm, but applying a displacement filter on such a large surface proved a bit too much for Flash to render in real-time. The effect can still be seen, albeit on a much smaller scale, in the reflection of the shipwreck to the right.


  1. Thanks for sharing your creative process. This is really beautiful work!

  2. Thanks Jordan! We´re glad that you appreciate our work. And I must say: Poptropica is really nice. I´ll explore it further tonight...

  3. Nice work there.
    I enjoyed your Gateway games and the Demo is interesing, but short :/

    What about the release date?
    At least a Q of year?

  4. Like your game and am patiently waiting for it(seriously, there are many things I can put my mind on, like are you guys the creators of the Gateway game?).

  5. I just stumbled across this while surfing, cool seeing into the process. Thanks for sharing.

    As for your little challenge, (surprised nobody els took a stab at it) I would say the 3 things needed for this are glue gun, sculpy and paint. Well, those things would take ME pretty far anyhoo. LOL, Looking forward to seeing the next installment.

  6. Yes, I made the Gateway games! I'm glad you like them. They're in the same engine as The Dream Machine, but it's a LOT more advanced now.