Coding is one of the most important skills that you can learn to improve your creativity and logical thinking – hence preparing you for a wide range of careers worldwide. However, coding doesn’t have to be all numbers and boredom, and instead, you can do something fun with it: animate.
With this tutorial, you’ll learn the basics of animating with code using Scratch by building a fish animation. While some familiarity with Scratch will help, this tutorial is perfect for any age since it doesn’t require much knowledge!
If you’re ready to learn how to make coding fun, let’s dive in.
What is Scratch?
Scratch is a free visual coding tool developed by the Massachusetts Institute of Technology (MIT) for creating games and interactive media. As it uses code blocks instead of text-based coding, it’s very easy for even kids to use as they practice basic computer algorithms.
If this is your first time using Scratch, head over to the Scratch homepage and create a new project (or use one you already have if you wish). Although we’re not going over how to switch sprites or add a background, it all is pretty intuitive to get done.
All the contents of this tutorial can be downloaded here.
BUILD GAMES FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.
FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.
Animating a Fish Sprite
For this tutorial, we have a fish sprite on an underwater backdrop in Scratch – and we want our fish sprite to move every time we press the green flag above the game stage:
First, drag the ‘when green flag clicked‘ block from the ‘Events‘ category to the workspace:
By having this block in our code, we’re saying that everything that comes below it is going to be executed whenever the green flag is clicked.
Adding Bubbles Sound
Next, we can add a bubble sound to our sprite. Over the ‘Sound‘ category, bring the ‘start sound‘ block to your code and pin it under the block we have already there:
Click on the arrow to replace the ‘ocean waves’ sound with ‘bubbles‘. If you press the green flag now, you’ll hear the bubbles sound already.
Moving the Fish Around
To move the fish, we use the ‘Motion‘ block that says ‘glide 1 secs to random position‘:
Glide takes the sprite to a new position over a period of time. That is, it’s going to move the fish to any position within the background area where the entire movement will only take 1 second. If you click on the green flag, you’ll see it moving:
Note that you can alter the duration (numbers of seconds) the movement is taking by typing a new value on top of the current one.
Repeating the Animation
At the moment, our fish sprite is moving only once when we click the green flag. Go to the ‘Control‘ category, where we have blocks that allow us to repeat a block of code. You’ll see the ‘repeat’ block, where you can enter the number of times you want your code to repeat, and also the ‘forever’ block – the one we want for this project.
Place the ‘forever‘ block below the green flag starting event, with the 2 blocks of code we had added inside it for them to get repeated:
Repetition blocks run the code that’s within them until a given condition is met. In our case, until we hit the stop button (the red button next to the green flag).
Running our program, we see the fish keeps changing its position on the screen while making bubbles sounds, as intended!
Surprisingly, that’s all there is to it! You now have a simple animation at your fingertips, as well as an understanding of a basic coding algorithm.
However, you don’t have to stop here and can expand this project in numerous ways. Perhaps you’ll want to add more fish to your “tank” that all have different animation behavior. You could also give each fish a unique behavior, such as rotating or flipping direction, whenever they reach the target position. Of course, these principles apply to any kind of animation you might want to try out. Perhaps you want to make a jungle where monkeys move from vine to vine.
The point here is that only your imagination is the limit! Either way, we hope these Scratch fundamentals have set you on the right path to expressing yourself in new ways!
Want to learn more about Scratch animating? Try our complete Scratch Projects – Fish Animation course.