Animating in Sketchware

Power of Timer Blocks and Sprite Sheets

Animations are actually still pictures getting replaced at a very high speed — our eyes are just deceived to see it as moving. Standard animations are usually created with 24 frames per second (FPS), which is equivalent to saying there are 24 pictures displayed per second.

Many animations are not only used in games, but also found in mobile applications. Animated assets are usually imported and processed through an image sheet called sprite (not the soda).

In computer graphics, a sprite is a two-dimensional bitmap that is integrated into a larger scene.

-Wikipedia

Sprite is an image sheet that contains all the frames needed for an animation to happen. Below is a sprite sheet of a cat acquired from Corona Labs. As you can see, there are 8 motions, or 8 frames that can be used to animate the cat. Higher number of frames corresponds to smoother animation.

Cat Sprite Image from: https://docs.coronalabs.com/guide/media/spriteAnimation/index.html

Sprites

Today, we will learn how we can create animations on Sketchware using these sprite sheets. Adding sprites on Sketchware is not provided yet; however, ImageViews are. Sprite automates the animation process, but since they are not yet provided, we can just replace the frames manually. Applying that concept, we can achieve creating an animation that looks something like this:

Step 1 — Find the sprite sheet and decompose it

Decomposing

Decomposing sprite sheet means that we break down the sheet into separate image files, or frames. After some googling, I was able to find an online decomposer tool that breaks down a sprite sheet into smaller image files. Since the cat sprite sheet has 8 frames, we can expect 8 different image files.

First, you upload the sprite and enter the appropriate size for each frame. For the cat sprite sheet, each frame was about 512px x 256px. Note that these dimensions will be different for every sprite depending on the size of the frame.

I was able to acquire 8 different cat images that look something like this:

I uploaded each image file inside Sketchware, using Image Manager located on the top right corner inside the project.

Step 2 — Setting the Logic

There is one component in Sketchware that makes animations possible — Timer. Timer blocks are able to repeat an action repeatedly every certain duration of time, which is what we need to use to update the frame.

This will be the backbone of our logic:

1. The application starts with a default image, cat #0.

2. Every x seconds, increment the value of a variable named “frame,” which will be used to update the frame of the image respectively.

Sounds simple right? Let’s get to it.

First, I placed an ImageView inside the View Editor tab, and set the default to the first frame of the cat.

Then I created a number variable called “frame.” This variable is really important, since it will be in charge of determining which frame needs to be placed for the cat.

By adding the Timer component, I was able to gain access to a new block that repeats a task every certain milliseconds.

I also created a MoreBlock named updateFrame that will make the logic look more organized.

Here is everything combined together:

Every 100 milliseconds, the frame gets increased by one, and calls updateFrame with the input of frame % 7 . This “%” here is really important, since it will restrict frame from exceeding 7. Remember that there are only 8 frames available in the cat sprite sheet, so we need to keep framelimited to 8 to make the animation loop.

That makes sense right? Here is the summary of what’s happening in a nutshell:

1. Increase frame by 1 every 100 ms.
2. Prevent frame from going above 7, since there are only 8 images (0~7) — this makes the animation loop.
3. Depending on frame , replace the image accordingly.

Using many if statements, it looks a bit bulky right now, but Sketchware will hopefully have an updated way of doing it in the future.

Conclusion

Today, we learned how to animate sprites by decomposing sprite sheets and replacing the image depending on the frame tick. Animations can really make your applications stand out! If this tutorial was too difficult, make sure to check out the previous tutorial on stopwatch, which thoroughly explains about Timer blocks!

Try it out and happy coding! :-)