Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
February 10, 2016
arrowPress Releases
February 10, 2016
PR Newswire
View All
View All     Submit Event

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

Phaser Lock Interactive
Phaser Lock Interactive — Austin, Texas, United States

Senior Game Designer
Vrse — Los Angeles, California, United States

Java Engineer
Trion Redwood City
Trion Redwood City — Redwood City, California, United States

User Acquisition Manager
Industry Games
Industry Games — Gilbert, Arizona, United States

VFX Artist

Loading Comments

loader image