Rotate Text in Gamelab?

CS Discoveries Unit and Lesson Discussion
1

Is there a code to rotate text in Gamelab, or do we have to make the text a Sprite to rotate it? Here is the code if anyone wants to take a look.

Thanks!

2

Great question. I think you would have to make it a Sprite to rotate it? I will ask the rest of the team.

3

The easiest way to do it would be to make the text a sprite, but there is a kinda funky way around it. The underlying library that we use (p5.js) has a lot of functions that we don’t directly expose, but which you can use if you know about them. The two that we’d need for this are rotate(), which will rotate every command that follows it around the origin of the canvis and translate() which will change the origin of the canvas. To accomplish text that is rotated 45 degrees around the center of the canvas, we’d need to:

  1. Move the origin of the canvas to the center with translate(200, 200)
  2. Call rotate(45) to rotate subsequent commands
  3. Set textAlign(CENTER, CENTER) so that the text can rotate around center
  4. Use text() to put your text on the screen
  5. Reset the canvas rotation with rotate(-45) to make sure we don’t rotate the next things we put on screen
  6. Reset the canvas origin with translate(-200, -200) so any additional things we put on screen are located properly

Note that you could skip steps 5 and 6 if you saved the rotated stuff for the very end of the draw loop, but it’s still good practice to put things back where you found them :slight_smile:

All that said, probably easiest to just make the sprite. If you want to check out an example of how this all works I created a remix of your code here https://studio.code.org/projects/gamelab/wWoId4JbPqEFCbp_UBzlOg/view

1 Like
4

That was the only thing I could come up with, but I knew there were many others out there with a lot more experience, and making the text a Sprite was not easy through the GameLab animation tab very easily. Thanks for helping!!!

5

Thank you! I shared with the student to give him the remix, but also the explanation. I appreciate your help! I figured the easiest way was with a Sprite, but I also wanted to give him another explanation so that he can be exposed to more options and codes. I’m really loving seeing how creative and persistent my students are!

1 Like
6

This is the sort of thing that will really make you appreciate functions with parameters when you get them. :slight_smile:

1 Like