TechnoApps
Module 5
Adding a Sprite on the Canvas
Grade 10
DISCLAIMER
The images and works found on this material may include content(s) that is/are copied or sourced from third parties. All intellectual property rights, including copyrights, trademarks, and other
proprietary rights, in such content remain the property of their respective owners.
We do not claim ownership of or responsibility for any copyrighted material that is not our own. The inclusion of such content is intended for informational or illustrative purposes only and does not imply
endorsement or affiliation with the original creators or copyright holders.
© 2024. TechnoKids Philippines.
TechnoApps / Module 5
Adding a Sprite on the Canvas
Overview
Target Skills
By the end of this module, you should be able to:
1. Add a canvas on the screen.
2. Place a sprite on the canvas.
Materials Needed
For this module, you will need the following:
● computer unit or mobile device with internet connection
● browser
● App Inventor 2
TechnoKids Philippines | 2
TechnoApps / Module 5
Adding a Sprite on the Canvas
Lecture
If you want to apply animations to your application, you will need a canvas and the appropriate
sprites. You will find these components in App Inventor Designer’s Drawing and Animation palette.
Adding a Canvas on the Screen
The canvas is a touch-sensitive rectangular-shaped panel where drawings can be done and
animations can be applied. It has the following properties:
● BackgroundColor changes the background color of the canvas.
● BackgroundImage changes the background image of the canvas.
● FontSize is the size of the font. It has the default value of 14.0.
● FontWidth is the width of the lines drawn on the canvas. It has the default value of 12.0.
● PaintColor is the color in which lines are drawn on the canvas.
● Visible indicates if the component is shown or hidden.
● Width is the width size of the canvas.
● Height is the height size of the canvas.
To add a canvas on the screen, go to App Inventor Designer. Drag a Canvas component from the
Drawing and Animation palette toward the screen in the Viewer panel.
Placing a Sprite on the Canvas
There are only two components that can be contained in a canvas: ball and image sprite. You can
find both animation components inside the Drawing and Animation palette.
TechnoKids Philippines | 3
TechnoApps / Module 5
Adding a Sprite on the Canvas
A ball is a round sprite that performs interaction with other sprites, canvas, and user. An image
sprite also functions the same as a ball. The difference between a ball and an image sprite is that the
latter gets its appearance from an image file, while the former’s appearance can only be altered by
changing its PaintColor and Radius properties.
Here are the properties of the ball:
● Enabled - controls whether the sprite moves when its speed is non-zero.
● Heading - the sprite’s heading in degrees above the positive x-axis; 0 degrees is toward the
right, while 90 degrees is toward the top of the screen.
● Interval - the frequency of the sprite’s movement in milliseconds.
● PaintColor - the color of the ball.
● Radius - indicates the size or radius of the ball component.
● Speed - the speed at which the sprites move in pixels.
● Visible - if the sprite is visible, the value of this is true.
● X - the x-coordinate of the ball with the starting point at the leftmost.
● Y - the y-coordinate of the ball with the starting point at the topmost.
● Z - indicates how the sprite should be layered relative to the other sprite. Higher number is
placed on top.
To put a ball sprite inside the canvas, go to the Drawing and Animation palette, then drag Ball inside
the canvas.
Here are the properties of the image sprite:
● Picture - the picture displayed for the image sprite.
● Enabled - if checked, makes the image sprite active.
● Interval - the frequency of the image sprite’s movement in milliseconds.
● Rotates - if checked, rotates the image sprite to match its heading.
● Visible - makes the image sprite visible or invisible.
TechnoKids Philippines | 4
TechnoApps / Module 5
Adding a Sprite on the Canvas
● Heading - the direction of the image sprite’s travel in degrees.
● X - the x-coordinate of the image sprite with the starting point at the leftmost.
● Y - the y-coordinate of the image sprite with the starting point at the topmost.
● Speed - the number of pixels the image sprite moves each period.
● Width - the width size of the image sprite.
● Height - the height size of the image sprite.
To put an image sprite inside the canvas, go to the Drawing and Animation palette, then drag
ImageSprite inside the canvas.
To assign a picture on an image sprite, click on the image sprite
component, then look for the Picture property in the Properties
panel. Refrain from adding an image sprite that is bigger than
320x430 pixels to avoid unexpected errors when you are running
your application.
When you have chosen an image for your sprite,
it will appear on the canvas, though the portion
of the image that can be seen is only the portion
which the canvas currently occupies. You can
adjust the size by setting the width and height of
the image sprite.
TechnoKids Philippines | 5
TechnoApps / Module 5
Adding a Sprite on the Canvas
Activity
Delicious Proposal
Before starting the activity, make sure to download the resources needed for this activity:
● [Link]
● [Link]
1. Open App Inventor and create a new project. Name the project “DeliciousProposal”.
2. Drag a Label component from the User Interface palette and rename it to “MessageLbl”.
Change these properties:
● BackgroundColor: Dark Gray
● Text: Blank
● Width: Fill parent
● Height: 40px
3. Drag a Canvas component to your screen from the Drawing and Animation palette. Rename
the canvas to “AppCanvas”. Then, change its properties:
● Width: Fill parent
● Height: 395px
TechnoKids Philippines | 6
TechnoApps / Module 5
Adding a Sprite on the Canvas
● Set [Link] as your background image.
● Set None as the background color.
4. Drag an Image Sprite to your screen from the Drawing and Animation palette. Rename the
image sprite to “CakeImgSpr”. Then, change its properties:
● Change the coordinates of the Image Sprite to X: 60, Y: 30
● Set [Link] as its Picture property.
5. Click on Screen1. Then, in its Title property, type the title of the application (e.g. “Save The
Cake”).
TechnoKids Philippines | 7
TechnoApps / Module 5
Adding a Sprite on the Canvas
6. Run your application.
Review
Matching Type: Match the descriptions under column A with the items under column B. Write the
letter of the correct answer on the blank before each item.
Column A Column B
_____ 1. Refers to the Y size of the canvas A. Rotates
B. Height
_____ 2. Sets the color in which lines are drawn on the C. Speed
canvas D. PaintColor
E. Picture
_____ 3. Refers the number of pixels the sprite moves
F. X
each period
_____ 4. If checked, the image sprite turns around to
match its heading
_____ 5. Sets the placement of the image sprite along the
horizontal (left or right)
TechnoKids Philippines | 8
