Sponsored By

Animated head anchored to an animated body (for 2D pixelated graphics)

The huskies in Dog Sled Saga no longer passively let food crash into the backs of their heads

Dan FitzGerald, Blogger

January 24, 2013

3 Min Read


At long last, the huskies  in Dog Sled Saga no longer take in sustenance through the tops of their heads. Here are the results of our first anchored overlay sprite and pixel mask.

In order to play the head chomp animation independently at any point in the run cycle, I needed to find an appropriate anchor point for where the dog's neck was so I could position the chomp overlay, and mask out the original head for that frame (the mask object also moves with the anchor point).

Overlay only
Overlay only

Overlay w/o mask
Overlay w/o mask

Mask visible
Mask visible

Mask only
Mask only

Making the chomp took few steps:

  • Draw the chomp overlay's frames (3) over any given run cycle sprite, plus a rough mask object that covered the pixels that changed from the head is at rest

  • Go through every other run cycle sprite and find an anchor point that works for each chomp overlay frame and the mask object

    • This step also included a lot of adjustments to find a compromise for which pixels of the chomp overlay should be transparent or opaque, as well as the mask (i.e. when necessary pixels where masked away, or unwanted pixels snuck beyond the mask

    • This step was repeated a few times when major adjustments were made

    • At a certain point, I was afraid I was going to need to set offsets for certain frames of the chomp when shown on certain frames of the run cycle. Luckily, after I got a better feel for choosing the right anchor point, this was unnecessary and I avoided any creepy misaligned configurations.

  • Implement the mask and overlay

    • I used the Pixelmask extension for Starling to hide the usual head. I couldn't just move the mask around as a child image of the husky object. I needed to make a new display object that's the same width and height as the husky sprite, and animate the mask within that object.

    • At first, the animation would play once the food collided with the dog, which resulted in the actually chomp happening after the food exploded into crumbs. I added another hitbox that tells the dog to turn it's head back and get ready to chomp. This also makes for some pretty funny looks of disappointment from the dogs when you have a near-miss.

When I finally got the chomp overlay working as intended, I got a pretty good rush (similar to when we put in the animated run cycle in for the first time). Somehow, seeing it in Photoshop's animation system didn't do it justice compared to seeing it in-game. The sense that the dogs are living things to which you can potentially feel attachment is the driving theme of our design, and this new animation turned the dial up a bit further in that regard.

Read more about:

Daily news, dev blogs, and stories from Game Developer straight to your inbox

You May Also Like