(MAI) Image Sprites and the Clock Timer Lesson

Image Sprites and the Clock Timer

Animating Objects

screenshot of UI: Drawing and Animation Ball Canvas ImageSprite A sprite is a graphical object placed within a canvas where it can react to touches and drags, interact with other sprites and the edge of the Canvas. They are located in the Drawing and Animation section of the Palette. You can choose a Ball or an ImageSprite.

A ball component is a particular kind of sprite that looks like a ball. An ImageSprite is a component for animating an object. The image for the object is specified in the Picture property for the ImageSprite. The Ball and ImageSprites react to touches and drags, interactions with other sprites, and the edge of the canvas.

The difference between a ball and an image sprite is that the ImageSprite can get its appearance from an image, while a ball's appearance can only be changed by varying its PaintColor and Radius properties.

An ImageSprite's speed is in pixels/second. It is determined by two properties. The interval property specifies how often the sprite will be moved. The Speed property specifies how many pixels the sprite will move each interval.

The heading property of an object specifies the direction it moves. It has a range of 360 degrees. Review the chart to learn the movement associated with the heading values.

rocket ball spaceCraft Heading The heading property sets the way the ball will move. Heading & Movement Chart 0: Object moves from left to right 90: Object moves from bottom to top 270: Object moves from top to bottom 315: Object moves from upper left to lower right scratch UI screen: The ball sprite has a speed of 8 pixels and an interval of 100.ms. This means that the ball will move 8 pixels every 1/10 of a second.

You can also use the set Ball.Heading block to change the direction of the ball during the program.

code block from scratch: when Ball1.EdgeReached edge do if Ball1 Heading = 315 then set Ball1 Heading to 135 else set Ball1 Heading to to 315

Clock

clock sensor UI: Sensors AccelerometerSensor BarcodeScanner ClockOne way to specify animation is to change an object in response to a timer event. Most commonly, you'll move sprites to different locations on the canvas at set time intervals. It works without involving any action from the user.

The internal time format used by the clock is called an instant. The clock's Now method returns the current time as an instant. The clock provides methods to manipulate instants, for example, return an instant that is several seconds, or months, or years from the given instant. It also provides methods to show the second, minute, hour, day, corresponding to a given instant.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION