GAME JOBS
Latest Jobs
spacer View All     Post a Job     RSS spacer
 
June 19, 2013
 
Trendy Entertainment
Community Manager
 
Trendy Entertainment
UI Artist
 
Subatomic Studios
Art Director
 
Airtight Games
Senior Software Engineeer
 
Edge of Reality
LEVEL ARTIST
 
Sojo Studios
Generalist Game Engineer
spacer
Blogs

  Animated head anchored to an animated body (for 2D pixelated graphics)
by Dan FitzGerald on 01/24/13 10:53:00 pm
Post A Comment Share on Twitter Share on Facebook RSS
 
 
The following blog was, unless otherwise noted, independently written by a member of Gamasutra's game development community. The thoughts and opinions expressed here are not necessarily those of Gamasutra or its parent company.

Want to write your own blog post on Gamasutra? It's easy! Click here to get started. Your post could be featured on Gamasutra's home page, right alongside our award-winning articles and news stories.
 

dss-food-catch

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.

 
 
Comments


none
 
Comment:
 




 
UBM Tech