Back to Activity
Tutorial
Animating sprites
{% trans 'Sorry, your browser does not support canvas -- please either update your browser or submit your requirements by phone or email.' %}

Accelerometer

Loading Blockly...

Step 1 /8

Introduction

Sprites are simple images created by the build sprite block and displayed using either the draw sprite block or the scroll sprite block. By moving these sprites or showing slightly different sprites one after the other, you can make animations.

Step 2 /8

Sprite block

To display a Sprite we need a draw sprite block and a build sprite block.

Click the Sprite menu.

Drag in a draw sprite block and snap it onto your start block on your workspace.

Click the Sprite menu again.

Drag in a build sprite block and snap it into your draw sprite block.

Step 3 /8

Make your sprite

Click on the different boxes of your build sprite block to design your sprite. A ticked box means that LED will be on.

Step 4 /8

Pause before the next frame

So that you can see the different sprites in the animation, you need to pause your program briefly between each frame.

Click the Basics menu.

Drag in a pause block and snap it below your build sprite block on your workspace.

Step 5 /8

More frames

Now you have one frame in your animation, you just need to repeat the previous steps to extend your animation. For each frame remember you need to drag in a draw sprite, build sprite and pause block, and then click the boxes to create the sprite. If you reduce or increase the pause time, you can speed up or slow down your animation.

Step 6 /8

Run your code

Click Play to see your animation on the emulator.

Step 7 /8

Button interaction

To make your animation interactive and save battery life, your program should sleep until a user presses a button.

From the Basics menu drag in a sleep until button changes block and snap it between your start block and the rest of your code.

From the Loops menu drag in a repeat while true loop and snap it onto you start block and snap the rest of your code into this loop.

Step 8 /8

Download your code

Click the Download button to download your program. Make sure to follow the download to CodeBug tutorial to load your program onto your bug.