SpriteStudio Advanced Animation (2/2)

In the previous installment of this series about SpriteStudio, we learned how to use advanced features such as mesh deformation and particle effects to create more interesting animations.

This month, we will continue examining SpriteStudio more advanced functions, this time using masking and instancing. We will use these functions to make a vampire appear in the magic mirror after our little which has shaken her wand. The vampire will appear in front of a mansion background, moving with a parallax effect. You can see the resulting animation below.

Creating the vampire animation

First, let’s start by creating a new animation file (.ssae) that will include both the haunted mansion and the vampire. As shown in the video below, we simply add the two cells (character and background) to the animation, and then make them move vertically in opposite directions between two keyframes, in order to create a parallax effect.

Instancing the animation

Instancing an animation means that you can reference it (like any regular cell) in another animation. First, as seen in the video below, go in the list panel and switch from “Cell List” to “Anime List” by pressing on the “Change List Type” button. Then simply drag and drop the vampire animation onto the main animation, as you would do for a normal cell. You can of course modify its position and size as necessary. The vampire animation will now play within the main animation.

Masking the animation

Finally, let’s see how to make a mask, in order to draw the vampire animation within the boundaries of the mirror. In the video below, a green cell is placed into the animation and turned into a mask layer by selecting “Mask” for its “Part Type” in the Attributes panel.

Any layer that is located above the mask layer in the keyframe editor – and whose “Mask Enable” attribute is set – can be affected by the mask. In our case, both the Vampire and Background layers are located over the mask layer. By switching their “Mask Enable” flag at the right time, we can make the Vampire appear in the mirror when the witch shakes her wand.

Finally, because the height of the mask is controlled in the keyframe editor , we can make the vampire animation progressively appear.

In this series, we have seen how to prepare our graphic data to make an animation in SpriteStudio. Then, we saw how to create a basic animation using keyframes and attributes, before discovering more advanced features such as mesh deformation and particles, as well as masking and instancing.

In the next and final post, we will review our options when the time comes to export the animation we have created. Don’t miss it!