Back to Activity
Tutorial
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 /15

Introduction

Sprites are simple images created by the build sprite block and displayed using either the draw sprite block or the scroll sprite block.

Step 2 /15

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 /15

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 /15

Run your code

Click Play to see your sprite on the emulator.

Step 5 /15

If block

We need a different sprite to be displayed when different buttons and legs are pressed.

From the If menu drag in an if block to an empty space on your workspace.

Click on the cog icon on your if block and, in the window that appears, drag an else if into the if on the right.

Step 6 /15

Buttons

From the Inputs/Outputs menu drag in 2 pressed blocks and snap them into the puzzle pieces of your if else if block. Change the second pressed block to b using the dropdown menu on the block.

Step 7 /15

Conditional code

Drag your sprite blocks into one of the gaps in your if block. Make another draw/build sprite combination and put it in the other if gap.

Step 8 /15

While loop

Now you need to make your code repeat so that CodeBug can continuously detect the input.

From the Loops menu, drag a repeat while true loop and snap it onto your start block.

Now drag your if else if block into this while loop.

Step 9 /15

More if sections

You can add more sprites by extending your if block.

Click the cog on your if block and in the window that appears drag 4 more if else blocks into the if block on the right.

From the Inputs/Outputs menu drag in 4 leg grounded blocks and snap them to the new puzzle pieces of your if block.

Click on the drop down menus of the leg grounded blocks to change the leg numbers so that you have one for each leg 0-3.

Step 10 /15

Configure legs

To sense is the legs are grounded, we need to configure CodeBug’s legs to be inputs.

Click the cog on your start block.

In the window that appears, drag 4 leg input/output blocks into the start block on the right.

Click the cog again to close the window.

Step 11 /15

Set to input

We want to set the legs to input.

Select the drop down menus next to the leg text of your start block, and set these to the number 0, 1, 2, and 3 (one each).

Select the second drop down menus and set it to input.

Step 12 /15

Setting up the emulator

To use the legs as inputs on the CodeBug emulator we need to configure it.

Click on the cog at the top right of CodeBug.

Tick the Show leg controls box.

Click Configure emulator button.

The emulator will show the status of CodeBug’s legs with blue arrows. An arrow pointing towards the leg is an input, away from the leg is an output. When the background of a leg is red, the leg is at power, when the background is black, the leg is at ground.

Step 13 /15

Even more sprites

Drag in more draw/build sprite block pairs and draw your other sprites.

Step 14 /15

Run your code

Click the Play button to run your code. Click the buttons and legs on the CodeBug emulator to see your different sprites.

Step 15 /15

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.