Navigation
Learn how to change the appearance of sprites and the background to tell a visual story.
Have you ever wondered how your favorite video game characters change their outfits or how a cartoon moves from a sunny day to a rainy night in a split second?
In creative coding, a Sprite is like an actor in a play. To make that actor move or change their look, we use Costumes. A costume is just one version of how a sprite looks. If you have a sprite of a dog, Costume might be the dog sitting, and Costume might be the dog jumping. By switching between these quickly, you create the illusion of movement, which we call Animation. You can find these options in the Looks category of your coding blocks.
To make a cat look like it is walking, follow these steps: 1. Drag a `when green flag clicked` block to your workspace. 2. Attach a `forever` loop block. 3. Inside the loop, place a `next costume` block. 4. Add a `wait 0.1 seconds` block so the cat doesn't walk too fast! This creates a speed of costume changes per second.
Quick Check
If you want a sprite to change from a 'happy' face to a 'sad' face, would you change the backdrop or the costume?
Answer
You would change the costume.
While costumes change the sprite, Backdrops change the entire Stage. The backdrop is the background image of your project. If your story starts in a forest and the character enters a house, you need to switch the backdrop. This tells the audience that the setting has changed. You can have many backdrops in one project, but only one can be shown at a time on the stage.
Let's make a scene change when a sprite 'touches' a portal: 1. Use a `wait until` block. 2. Inside it, put a `touching [Portal Sprite]` sensing block. 3. Below that, snap a `switch backdrop to [Mars]` block. 4. Now, when your character hits the portal, the entire world changes from Earth to Mars!
Quick Check
Which block would you use to cycle through every background you have saved in your project one by one?
Answer
The 'next backdrop' block.
Changing costumes and backdrops isn't just for fun—it's for storytelling. A change in looks can signal a change in the plot. For example, if a character's costume changes to a superhero suit, the player knows they just got a power-up! If the backdrop changes from bright to dark, it might mean a 'boss' is coming. Using these blocks helps you communicate with your players without using any words at all.
Create a story where a flower grows as the sun rises: 1. Start with `backdrop [Night]` and a flower sprite with `costume [Seed]`. 2. Use a `repeat 5` loop to change the flower's costume to slightly bigger versions. 3. After the loop, use `switch backdrop to [Sunrise]`. 4. This uses backdrop change and costume changes to show time passing.
What is the main purpose of using 'Costumes' in a project?
If you have different backdrops, how many can be seen on the stage at the exact same time?
You must use the 'next costume' block if you want to switch to a specific costume by name.
Review Tomorrow
Tomorrow morning, try to remember the names of the two main blocks we learned today that change how things look.
Practice Activity
Try this on your own: Create a project where a sprite changes its costume every time you click on it!