I recently found myself wanting to animate a character’s progress path and initially I thought I would do this by creating multiple animation frames, much like a sprite. After a bit of frustration, trial and error, I realized that creating an image mask was a more efficient and effective method.
To give you an example of what I was trying to accomplish, here is a picture of a portion of my game’s world map. The yellow and line is the path that my character takes.
I wanted to animate the yellow path that shows the character progressing from point A to point B, kind of like this:
At first, I thought I could accomplish my goal by cutting the path up into 50 or so tiny .png files and then placing them onto the screen. While this is technically possible, it became extremely time-consuming. Because each individual .png file was a different size and had to be placed on a pixel perfect location, animating it became an extremely tedious process. Changing the world map or the path itself would have been an excruciating process.
Next, I thought I would make something like an animation sequence, where the 50.png files were exactly the same size. This would remove the problem with pixel perfect location for each individual image, and I started to go in this direction. The problem with this technique is that the game’s artwork tends to evolve and if I were to change the color or texture of the path, I would have to re-cut everything from scratch.
Lucky for me, Ryan told me to take a look at masking, which proved to be much easier. If you’re not familiar with how masking works in Corona, check out their basic tutorial. What I did is instead of cutting up the path .png image into a bunch of files, I made a bunch of mask images that could be overlaid on top of the path.
To illustrate this, take a look at the image below:
The base image is what the path looks like when it’s fully drawn. If you use the first mask image, labeled “Nothing Shows”, as a mask over the base image, then none of the base image shows. If you lay the second image, labeled “Path 1”, as a mask image, then a tiny part of the base image shows. What is in white on the mask images is what will show when laid on top of the base image.
I created about 40 of the mask images, each with a little more of the path shown in white, and labeled the files mask1, mask2, mask3, etc. Then I was able write a loop that sequentially applies each mask image over the base image.
What’s great about masking is that the mask image is always drawn exactly over the base image. I only need to worry about pixel precision when placing the base image and the mask images will automatically be displayed in the right location. And it’s no problem if I change or alter of the yellow path, because the mask stays exactly the same. As a bonus, I can do other cool things with masking like add gradients, brush strokes and other effects by simply changing the shades of grey in the mask. Here’s an example of what I’m talking about.