Animation Components
Ball
A ball component is a particular kind of sprite (animated object) that looks like a ball.
A ball is a round sprite that is contained by a canvas, can react to touches and
drags, interact with other sprites (image sprites and other balls) and the edge of
the canvas, and move according to its properties. For example, to have a ball move
4 pixels toward the top of a canvas every 500 milliseconds (half second), you can
set the Speed
property to 4, the Interval
property to
500, the Heading
property to 90 (degrees), and the
Enabled
property to True. You can change these and other properties to
modify the ball's behavior.
The difference between a ball and an image sprite is that the latter can get its
appearance from an image, while a ball's appearance can only be changed by varying
its PaintColor
and Radius
properties.
Properties
-
Radius
- Radius of the ball.
-
PaintColor
- Color used for drawing the ball.
-
Enabled
- If true, ball is active.
-
Interval
- Frequency of ball's movement in milliseconds.
-
Visible
- If set, ball is visible.
-
Heading
- Direction of the ball's travel.
-
X
- Ball's x-coordinate.
-
Y
- Ball's y-coordinate.
-
Speed
- Number of pixels ball moves each period.
Events
-
CollidedWith(component other)
-
Called when two animated components (image sprites or balls) have collided. The
argument
other
represents the other component in the collision.
-
Dragged(number startX, number startY, number prevX, number prevY, number currentX, number currentY)
-
The ball was dragged. See the canvas
Dragged
event for a description of the arguments.
-
EdgeReached(number edge)
-
Called when ball reaches the edge of the screen. The
edge
argument tells which edge (or corner) was reached, encoded as follows:- north = 1
- northeast = 2
- east = 3
- southeast = 4
- south = -1
- southwest = -2
- west = -3
- northwest = -4
-
NoLongerCollidingWith(component other)
- Called when two animated components have stopped colliding.
-
-
Touched(number x, number y)
- Called when user touches the ball.
-
Methods
-
Bounce(number edge)
-
Makes the ball bounce, as if off a wall (or corner). The meaning of the argument
is the same as in
EdgeReached
. You can set up theEdgeReached
event to make the ball bounce off whichever edge was reached, causing the ball to appear to bounce elastically from all edges and corners.
-
boolean CollidingWith(component other)
- Reports whether this ball is colliding with the given component.
-
MoveIntoBounds()
- If the ball is out of bounds, this method moves it back in bounds.
-
MoveTo(number x,number y)
- Moves the ball directly to the given point.
ImageSprite
An image sprite component is an animated object that can interact with a canvas, balls, and other image sprites.
An image sprite is an animated object that is contained by a canvas, can react to
touches and drags, interact with other sprites (image sprites and other balls) and
the edge of the canvas, and move according to its properties. For example, to have
a sprite move 10 pixels to the left every second, you can set the
Speed
property to 10, the Interval
property to 1000
(milliseconds), the Heading
property to 180 (degrees), and the
Enabled
property to True. You can change these and other properties to
modify the image sprite's behavior.
Properties
-
Picture
- Picture displayed for the sprite.
-
Enabled
- If set, the sprite is active.
-
Interval
- Frequency of sprite's movement, in milliseconds.
-
Picture
- The picture that determines the sprite's appearence
-
Rotates
- If true, the sprite image rotates to match the sprite's heading.If false, the sprite image does not rotate when the sprite changes heading.
-
Visible
- If set, image sprite is visible.
-
Heading
- Direction of the image sprite's travel in degrees. Zero is horizontally to the right (east), 90 is straight up, 180 is to the left, and 270 is straight down.
-
X
- Image sprite's x-coordinate. Zero is the left edge of the canvas.
-
Y
- Image sprite's y-coordinate. Zero is the top edge of the canvas.
-
Speed
- Number of pixels image sprite moves each period.
-
Width
- Image sprite width.
-
Height
- Image sprite height.
Events
-
CollidedWith(component other)
-
Called when two animated components (image sprites or balls) have collided. The
argument
other
represents the other sprite in the collision.
-
Dragged(number startX, number startY, number prevX, number prevY, number currentX, number currentY)
-
The sprite was dragged. See the Canvas
Dragged
event for a description of the arguments.
-
EdgeReached(number edge)
-
Called when image sprite reaches the edge of the screen. The
edge
argument tells which edge (or corner) was reached, encoded as follows:- north = 1
- northeast = 2
- east = 3
- southeast = 4
- south = -1
- southwest = -2
- west = -3
- northwest = -4
-
NoLongerCollidingWith(component other)
- Called when two animated components have stopped colliding.
-
-
Touched(number x, number y)
- Called when user touches the image sprite.
-
Methods
-
Bounce(number edge)
-
Makes the image sprite bounce, as if off a wall (or corner). The meaning of the
argument is the same as in
EdgeReached
. You can set up theEdgeReached
event to make the sprite bounce off whichever edge was reached, causing the sprite to appear to bounce elastically from all edges and corners.
-
boolean CollidingWith(component other)
- Reports whether this image sprite is colliding with the given component.
-
MoveIntoBounds()
- If the image sprite is out of bounds, this method moves it back in bounds.
-
MoveTo(number x,number y)
- Moves the image sprite directly to the given point.