Unit 3 Lesson 24 Level 9 sprite disappears

CS Discoveries Coding and Debugging Help
1

I am having trouble with this lesson, it plays fine, but when it switches background the bunny is no longer on the screen. I have tried multiple solutions but nothing works. Any advice would be appreciated. Here is my code:

var coin = createSprite(200,10);
coin.setAnimation(“coin_gold_1”);
setCoin();

var bunny = createSprite(200,350);
bunny.setAnimation(“bunny1_ready_1”);

var score = 0;

function draw() {
background(“white”);

if(keyDown(“left”)){
bunny.x = bunny.x - 2;
}

if(keyDown(“right”)){
bunny.x = bunny.x + 2;
}

if(coin.y > 400){
setCoin();
}
if (coin.isTouching(bunny)) {
score = score + 1;
setCoin();
}
if (score < 2) {
simpleBackground();
} else {
funnyBackground();
}

textSize(20);
text("Score: " + score, 10, 10, 100, 100);
drawSprites();
}

function setCoin(){
coin.x = randomNumber(50, 350);
coin.y = -30;
coin.velocityY = randomNumber(3, 7);
}
function simpleBackground() {
background(“lightBlue”);
}
function funnyBackground() {
var rainbow = createSprite(200, 200);
rainbow.setAnimation(“rainbow_1”);
}

2

Share the link to your project

3

@jspurr,

If you can share this project with us, we can better diagnose the problem. The code itself is only part of the game. Sometimes, it’s the sprites that are the issue and we can’t see them when you just share the code.

Also, the more information you have from below, the better we can help.

Mike

[Posts in the debugging category need to have the following pieces of information included in order to help other teachers or our moderator team best help you. Feel free to delete everything in brackets before posting your request for debugging help.]
Link to the project or level: [replace with link to the curriculum or get the “Share” link to a project]
What I expect to happen: [replace with a detailed description of the behavior you’re trying to create]
What actually happens: [replace with a detailed description of what actually happens when the code runs including any errors or unexpected behavior]
What I’ve tried: [replace with a detailed description of what you’ve already tried to do to solve the problem]

4

Here is the link! Sorry didn’t think to just share the link…duh!

5

This is happening due to how GameLab works: It will render your bunny first, then will draw the rainbow. To fix this, you can use .depth. Here’s how:
Instead of just declaring the sprite and giving it an animation, set it’s depth to 0. This will render it before the bunny and the coin, since bunny’s depth is 2 and the coin’s depth is 1. To not have to search for which depth is the minimum. This however isn’t a good approach to this situation… It’s better to use groups. They allow you to quickly manage which sprites get drawn first. Here’s how groups work:

You create groups the same way you create sprites, except instead of writing createSprite(x, y) you use createGroup(). No parameters required.
You can add a sprite to a group using group.add(sprite). You can add as many as you want in there.
But what’s all of this for? First of all, it’s for drawing. You can draw a group using drawSprites(group). This can be useful in a lot of situations, including yours. You could’ve drawn the rainbow group first (that you’d have to create) and draw it before drawing the bunny group (that you also would have to create)
That’s not the only reason, groups also allow you to perform operations to all sprites in a group, like setColliderEach(), and the number of sprites in a group in some projects can be even higher than 50, so it would be a pain to just type the name of every sprite and then perform the same exact action. You can read about groups more on the code.org reference: Code.org Tool Documentation
There’s a whole category for groups! It’s a big aspect of GameLab that you should definitely learn. Almost everyone uses groups, especially for big projects.

6

@jspurr,

What @impixel says is correct. Another way to handle it would be to create the rainbow background above all of your other sprites (before the coin and bunny) and use the .visible block to make it invisible. (rainbow.visible = 0)

Then, when you want it to appear, it can be made visible again.

Since it was created before the bunny and coin, it will be behind them. Just another approach.

Good luck!

Mike

1 Like