arrow_back Animate Model

This add-on walks you through how to program your model to animate when you place an accessory on it. In this example, the model sprite turns its head.

First, you’ll need to edit your model in the backdrops editor, then code your program.

To begin, click on the stage backdrop image. Then, click on the backdrops tab above your code menu. Here, you can modify or customize your backdrops for any project. To start editing, right click on the backdrop in your program, and click “duplicate.” Now there are two copies of your backdrop. The tools on the side of the image allow you to edit the backdrop. To change the way the model looks, click on the “select” tool, then click on the model. To work with separate pieces of the sprite, click the “ungroup” tool. Cool. All of the shapes are separate, so you can change the different shapes that make up the model. This example modifies the head. To move a group of shapes all at once, click near the shapes, then drag the select tool around the shapes that you want to group together. Then click the “group” tool. To rotate the head, click and drag the circle at the top of the select tool. Play around with the selected area to blend it with the rest of the image as best you can. The smaller the changes you make to your image, the smoother the animation will look.

If you don’t like what you did or would like to go back a step, use the “undo” button at the top of the backdrop editor. Next, if you would like, duplicate another background image and modify it. The starter project contains both a male and a female model. Delete the model that you aren’t going to animate. To add it back later, go to the Image Library on the CS First website.

To code the animation, click on your accessory sprite then the scripts tab. Since you modified the backdrop, drag out a “switch backdrop” block from the looks menu. Click the dropdown menu and select “next backdrop.” When you click this block, it’ll cycle through the different backdrops of your model that you created.

For your model to appear animated, drag out a repeat loop, place it around the “switch backdrop” block, and add a “wait” block inside the loop. Tinker with the values in the “repeat” loop and the “wait” block until you like the way the animation looks.

This example repeats the backdrops 3 times, since there are 3 different costumes, and uses a wait time less than 1 second so that the loop happens quickly. This makes the animation look smooth. Test your code! When you double click on the new block stack, your model should appear to animate. Finally, place this block stack under the “stamp” block in your original code. Now, your model will react once you place an accessory on it! Try it out! Now it’s your turn: Duplicate your backdrop and make small modifications to the image.

Remember that you can undo any changes in the backdrops editor.

Add a repeat loop, a “switch backdrop” block, and a “wait” block to animate your model, and place this code stack under the “when space key pressed” and “stamp” code stack.

Once you’re done coding this add-on, share your project animation with your neighbor!