Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
January 22, 2017
arrowPress Releases

If you enjoy reading this site, you might also want to check out these UBM Tech sites:

Animated head anchored to an animated body (for 2D pixelated graphics)
by Dan FitzGerald on 01/24/13 10:53:00 pm

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.



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.

Related Jobs

Skydance Interactive
Skydance Interactive — Marina Del Rey, California, United States

Lead Environment Artist
Cryptic Studios
Cryptic Studios — Los Gatos, California, United States

Software Engineer (all levels)
Immersion — San Jose, California, United States

Staffing Coordinator & Receptionist
DreamSail Games
DreamSail Games — New York, New York, United States

Game Designer

Loading Comments

loader image