A core piece of any game is the character’s journey, right? So when learning how to create a game on Scratch, one thing young creators might want to do is seamlessly make their characters travel between backgrounds.
Today, we will go through how to code a character to walk back and forth between two backgrounds, making it look like the character is walking through an expansive environment.
(Please note, at this point, games will need to be already set up, with characters created with arrow key movement.)
Backdrops
First, kids will need to make sure they have two separate backdrops—one will serve as the “top” area of the map, and the other will be the “bottom.” These backdrops will appear to “connect” as the character walks between them.
Borders
Then, they'll need to set up borders. For instance, we will use red borders to connect the backdrops together so that when the border detects the player character touching it, it’ll “teleport” the character to another backdrop.
1. Click the Choose a Sprite button and add the sprite named "Line" to the project.
2. Set the sprite’s position to 0, -180.
3. Right-click on the Line sprite and select "Duplicate."
4. Set the duplicate’s position to 0, -180.
These lines will act as a teleport point between the two backdrops. The bottom line will send the character to “Area 2,” and the top will send them to “Area 1.”
Teleporting
The main function of this code is to detect when the player touches the border line. When they do, the player will "teleport" to the corresponding backdrop.
To detect the character:
1. In the Line sprite’s code area add when down arrow key pressed.
2. Attach an if <> then block with an = operator inside the brackets.
3. Set the operator so that the backdrop number is equal to the “Area 1” backdrop number (ex: 1).
(This code will only run if the character is in Area 1 when the key is pressed. This will prevent the player from accidentally teleporting to the location they're already in.)
4. Add another if <> then block inside the statement.
5. Drag <touching Character?> into the statement’s brackets.
6. Inside the new if statement, add a broadcast with the message “teleport down.”
7. Add a wait 1 seconds block below the broadcast.
Copy the Code
The Line 2 sprite will use a similar code to the one just created.
1. Click and drag the code blocks onto the Line 2 sprite to copy them.
2. Change the when key pressed block to up arrow.
3. Change the backdrop number to match the "Area 2" backdrop number (ex: 2).
4. Set the broadcast message to “teleport up.”
At this point, you'll notice now that the character teleports, but when they do, they stay in the same place on the map. It's visually jarring, right?
To give the illusion of the character moving on the map, they'll need to start at a set position when they teleport.
Teleport Position
1. Select the Character sprite and add when I receive teleport up to the code area.
2. Attach go to x, y with a value of 0, -100 for the position.
3. Right-click and select "Duplicate" to copy the code blocks.
4. Change the when I receive block to teleport down.
5. Change the go to x, y position to 0, 120.
Now the character can walk around and touch the bottom or top border to change locations! Letting characters roam between backgrounds can help games feel more immersive and make the designed world feel a lot bigger, too.
Ready for more? Check out our many Scratch coding classes, or continue learning with the resources below:
What are Scratch sprites?
Python vs. Scratch
What is the Most Popular Game on Scratch?
Coding websites (and coding websites like Scratch)