Ball Component

Properties

enabled
  Controls whether the Ball moves when its speed is non-zero.
Data type: boolean
Designer Writable true <ball name="ballName" enabled="true">
Code Writeable true ballName.enabled = true
Code Readable true let variable = ballName.enabled

heading
  The Ball's heading in degrees above the positive x-axis. Zero degrees is toward the right of the screen; 90 degrees is toward the top of the screen.
Data type: number
Designer Writable true <ball name="ballName" heading="-90">
Code Writeable true ballName.heading = -90
Code Readable true let variable = ballName.heading

interval
  The interval in milliseconds at which the Ball's position is updated. For example, if the Interval is 50 and the Speed is 10, then the Ball will move 10 pixels every 50 milliseconds.
Data type: number
Designer Writable true <ball name="ballName" interval="100">
Code Writeable true ballName.interval = 100
Code Readable true let variable = ballName.interval

originAtCenter
  Whether the x- and y-coordinates should represent the center of the Ball.
Data type: boolean
Designer Writable true <ball name="ballName" originAtCenter="true">
Code Writeable false
Code Readable false

paintColor
  The color of the Ball.
Data type: color
Designer Writable true <ball name="ballName" paintColor="FFab793b">
Code Writeable true ballName.paintColor = "FFab793b"
Code Readable true let variable = ballName.paintColor

radius
  The distance from the center of the Ball to its edge.
Data type: number
Designer Writable true <ball name="ballName" radius="20">
Code Writeable true ballName.radius = 20
Code Readable true let variable = ballName.radius

speed
  The speed at which the Ball moves. The Ball moves this many pixels every Interval milliseconds if Enabled is true.
Data type: number
Designer Writable true <ball name="ballName" speed="10">
Code Writeable true ballName.speed = 10
Code Readable true let variable = ballName.speed

visible
  Sets whether sprite should be visible.
Data type: boolean
Designer Writable true <ball name="ballName" visible="true">
Code Writeable true ballName.visible = true
Code Readable true let variable = ballName.visible

x
  The horizontal coordinate of the Ball, increasing as the Ball moves right. If the property OriginAtCenter is true, the coordinate is for the center of the Ball; otherwise, it is for the leftmost point of the Ball.
Data type: number
Designer Writable true <ball name="ballName" x="150">
Code Writeable true ballName.x = 150
Code Readable true let variable = ballName.x

y
  The vertical coordinate of the Ball, increasing as the Ball moves down. If the property OriginAtCenter is true, the coordinate is for the center of the Ball otherwise, it is for the uppermost point of the Ball.
Data type: number
Designer Writable true <ball name="ballName" y="150">
Code Writeable true ballName.y = 150
Code Readable true let variable = ballName.y

z
  How the Ball should be layered relative to other Balls and ImageSprites, with higher-numbered layers in front of lower-numbered layers.
Data type: number
Designer Writable true <ball name="ballName" z="0">
Code Writeable true ballName.z = 0
Code Readable true let variable = ballName.z

class
  The styling class of the the component
Data type: string
Designer Writable true <ball name="ballName" class="Test class">
Code Writeable false
Code Readable false

id
  The styling id of the the component
Data type: string
Designer Writable true <ball name="ballName" id="Test id">
Code Writeable false
Code Readable false

name
  The name of the component that will be used to refer to it in code.
Data type: string
Designer Writable true <ball name="ballName" name="testComponent">
Code Writeable false
Code Readable false

Methods

Method name Description Parameters
bounce Makes this Ball bounce, as if off a wall. For normal bouncing, the edge argument should be the one returned by EdgeReached event.
ballName.bounce(edge)
ballName.bounce(0)
edge number
collidingWith Indicates whether a collision has been registered between this Ball and the passed other sprite.
ballName.collidingWith(other)
ballName.collidingWith("componentName")
other component
moveIntoBounds Moves the sprite back in bounds if part of it extends out of bounds, having no effect otherwise. If the sprite is too wide to fit on the canvas, this aligns the left side of the sprite with the left side of the canvas. If the sprite is too tall to fit on the canvas, this aligns the top side of the sprite with the top side of the canvas.
ballName.moveIntoBounds()
moveTo Sets the x and y coordinates of the Ball. If OriginAtCenter is true, the center of the Ball will be placed here. Otherwise, the top left edge of the Ball will be placed at the specified coordinates.
ballName.moveTo(x, y)
ballName.moveTo(0, 0)
x number
y number
moveToPoint Moves the Ball so that its origin is at the specified x and y coordinates.
ballName.moveToPoint(coordinates)
ballName.moveToPoint(200,200)
coordinates list
pointInDirection Turns this Ball to point toward the point with the coordinates (x, y).
ballName.pointInDirection(x, y)
ballName.pointInDirection(0, 0)
x number
y number
pointTowards Turns this Ball to point towards a given target sprite. The new heading will be parallel to the line joining the centerpoints of the two sprites.
ballName.pointTowards(target)
ballName.pointTowards("componentName")
target component
addEventListener Method used to create event listeners.
See Events below for samples.
eventName string
eventCallbackFunction callback

Events

Event name Description Parameters
collidedWith Event handler called when two enabled sprites (Balls or ImageSprites) collide. Note that checking for collisions with a rotated ImageSprite currently checks against its unrotated position. Therefore, collision checking will be inaccurate for tall narrow or short wide sprites that are rotated.
ballName.addEventListener(
    "collidedWith",
    function (other) {
        //Your code here
    }
)
other component
dragged Event handler for Dragged events. On all calls, the starting coordinates are where the screen was first touched, and the "current" coordinates describe the endpoint of the current line segment. On the first call within a given drag, the "previous" coordinates are the same as the starting coordinates; subsequently, they are the "current" coordinates from the prior call. Note that the Ball won't actually move anywhere in response to the Dragged event unless MoveTo is specifically called.
ballName.addEventListener(
    "dragged",
    function (startX, startY, prevX, prevY, currentX, currentY) {
        //Your code here
    }
)
startX number
startY number
prevX number
prevY number
currentX number
currentY number
edgeReached Event handler called when the Ball reaches an edge of the screen. If Bounce is then called with that edge, the sprite will appear to bounce off of the edge it reached. Edge here is represented as an integer that indicates one of eight directions north(1), northeast(2), east(3), southeast(4), south (-1), southwest(-2), west(-3), and northwest(-4).
ballName.addEventListener(
    "edgeReached",
    function (edge) {
        //Your code here
    }
)
edge number
flung When a fling gesture (quick swipe) is made on the sprite: provides the (x,y) position of the start of the fling, relative to the upper left of the canvas. Also provides the speed (pixels per millisecond) and heading (0-360 degrees) of the fling, as well as the x velocity and y velocity components of the fling's vector.
ballName.addEventListener(
    "flung",
    function (x, y, speed, heading, xvel, yvel) {
        //Your code here
    }
)
x number
y number
speed number
heading number
xvel number
yvel number
noLongerCollidingWith Event indicating that a pair of sprites are no longer colliding.
ballName.addEventListener(
    "noLongerCollidingWith",
    function (other) {
        //Your code here
    }
)
other component
touchDown When the user begins touching the sprite (places finger on sprite and leaves it there): provides the (x,y) position of the touch, relative to the upper left of the canvas
ballName.addEventListener(
    "touchDown",
    function (x, y) {
        //Your code here
    }
)
x number
y number
touchUp When the user stops touching the sprite (lifts finger after a TouchDown event): provides the (x,y) position of the touch, relative to the upper left of the canvas.
ballName.addEventListener(
    "touchUp",
    function (x, y) {
        //Your code here
    }
)
x number
y number
touched When the user touches the sprite and then immediately lifts finger: provides the (x,y) position of the touch, relative to the upper left of the canvas.
ballName.addEventListener(
    "touched",
    function (x, y) {
        //Your code here
    }
)
x number
y number