Create interactive gaming apps with sprites.
Sprites are images that can be placed on the Stage in the Canvas. They can react to being touched or dragged across the screen, or colliding with other sprites or the edge of the screen.
A Sprite Type is a category of Sprites that you can add to your app. For example, in a video game you might have a Main Character Sprite Type and Obstacle Sprite Types.
A Sprite is a single instance of a Sprite Type. In the video game example, you could have a single Obstacle Sprite Type, but multiple Obstacle Sprites in your app. They would be multiple Sprites of the same Sprite Type.
Groups of sprites that have the same behavior should belong to the same sprite type. In the example below, WallType is a Sprite Type, and there are multiple Sprites of this type in the app (ie. the walls).
Whenever the ball touches any of the WallType Sprites, the ball goes back to its starting location.
To add a Sprite Type to your app, click on the Stage of your Canvas.
This will automatically bring you to the Canvas tab.
Underneath your component tree, where you would see a component menu in the Design tab, you will see your Sprite Type menu.
You can click on 'Add Sprite Type' to add a new Sprite Type to your app.
Click on the Canvas to see the menu of Canvas components you can add to your project.
You will see this menu under the component tree, where the Component menu is usually shown in the Designer.
Select a Sprite Type and drag it onto your Canvas to create an instance of a Sprite Type. This is a single Sprite.
In the below GIF, there is a canvas with a Sprite, called Sprite1. There is also a Sprite Type in the Sprite Type menu called Sprite_Type1. When a Sprite is dragged from Sprite_Type1 and dropped onto the Canvas, we see a new Sprite, called Sprite_2.
In the GIF below, we see that when one Sprite (the Thunkable Beaver) collides with another Sprite (the tree trunk), the appearance of the Tree Sprite changes.
This demonstrates the following:
Picture List: we see the image displayed by the Tree sprite changing
Bounce: We see the Beaver sprite bounce off of the Tree sprite. As it bounces, it has a speed of 50% of its original speed
Passes Through: the Beaver Sprite does not pass through the Tree sprite until it has collided with the Tree sprite 3 times
Z: The Beaver sprite has a higher Z-value than the Tree sprite, so the beaver passes in front of the tree
The Picture List of Sprite_Type2
Demonstration of cycling through Image List