Where do I put the text in an animation?

CS Discoveries
1

My students are on lesson 13. We are having trouble getting the animation to run AND show the text. We have put the text inside and outside the loop. Same with the draw sprites. We are either getting the text with no animation. Or the animation with no text.

2

Greetings once more @slpruit,

As for your issue it probably pertains to the way your executing your draw calls within the loop…

I’m quite sure you have a sound understanding of the draw loop but I’ll summarize it here → (it is a loop in which a dynamic speed can be set to execute ongoing code for a given project) and executes instructions going downward to ensure that they layer properly when drawn (otherwise they may not be visible)

Here I’ll provide an example down below showing what i mean…

// WARNING: this example will not have a functioning animation
// you will have to substitute it with a working one before any
// animation is shown
var wallpaper = createSprite(200, 200)
wallpaper.setAnimation("demoAnim")
function draw() {
background(255); // refresh layer starts here
drawSprites();
// OPTIONAL: create a textbox so it doesn't mesh with the sprite
fill(0);
rect(0, 350, 400, 50);
// draw the text after the animation is drawn on the screen
fill(255); // this is mandatory if you decide you want a textbox
textSize(20);
text("The Quick Brown Fox Jumped Over\nThe Lazy Brown Dog", 0, 370);
}

Hope this helps best of luck to you and your students!

1 Like
3

Great example @varrience ! Yes, if you place the text after the drawSprite() in the draw loop, the text should appear. The computer reads text from top to bottom so first it will draw all the sprites including backgrounds THEN it will draw the text on top.
~Michelle