Canvas and Stage

Topic

Canvas and Stage

Topic Progress:

The Canvas is a user-interface component that is essential in displaying sprites and building games.

Upon adding a canvas component to your application’s screen, Thunkable will automatically generate a stage and a default sprite. You can view these from the newly unlocked canvas tab.

Sprites are images that can be manipulated by the application. They are our actors or characters which can do tasks inside our application such as: 

  • Move around the screen
  • Colliding or Interacting with other Sprites
  • Changing orientation

A stage is where your sprites will be placed. 

You can think of these three systems like a whiteboard:

  • The canvas is like the frame of the board, which holds the whiteboard in place and on the wall.
  • The stage is like the underlying whiteboard, where things will be drawn and displayed.
  • The sprites are like the text or the drawings you would make on the whiteboard.

Go ahead and add a canvas to your application and then navigate to the canvas tab.

Now select the stage component in your placed components section like below.

On the right side of the screen, you will see all of your stage properties. Here you can give your stage a background, or simply set its background to a single colour. 

On your stage, you can also move and scale your sprites.

To add more default sprites, simply drag one of the sprites types onto the screen.

To add a new sprite type, click “Add sprite type”. This will generate a second default sprite. You will then need to drag this new sprite onto the stage for it to display.

Have a play around with some of these features & properties and see how they display differently when you run your application on your preferred device before continuing on to the next lesson.

@

Not recently active