ImageSprite Component

Properties

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

heading
  The ImageSprite'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 <imagesprite name="imagespriteName" heading="0">
Code Writeable true imagespriteName.heading = 0
Code Readable true let variable = imagespriteName.heading

height
  The height of the ImageSprite in pixels.
Data type: number
Designer Writable false
Code Writeable true imagespriteName.height = 50
Code Readable true let variable = imagespriteName.height

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

picture
  Specifies the path of the sprite's picture.
Data type: string
Designer Writable true <imagesprite name="imagespriteName" picture="cat.png">
Code Writeable true imagespriteName.picture = "cat.png"
Code Readable true let variable = imagespriteName.picture

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. The sprite rotates around its centerpoint.
Data type: boolean
Designer Writable true <imagesprite name="imagespriteName" rotates="true">
Code Writeable true imagespriteName.rotates = true
Code Readable true let variable = imagespriteName.rotates

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

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

width
  The width of the ImageSprite in pixels.
Data type: number
Designer Writable false
Code Writeable true imagespriteName.width = 50
Code Readable true let variable = imagespriteName.width

x
  The horizontal coordinate of the left edge of the ImageSprite, increasing as the ImageSprite moves right.
Data type: number
Designer Writable true <imagesprite name="imagespriteName" x="200">
Code Writeable true imagespriteName.x = 200
Code Readable true let variable = imagespriteName.x

y
  The vertical coordinate of the top edge of the ImageSprite, increasing as the ImageSprite moves down.
Data type: number
Designer Writable true <imagesprite name="imagespriteName" y="200">
Code Writeable true imagespriteName.y = 200
Code Readable true let variable = imagespriteName.y

z
  How the ImageSprite 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 <imagesprite name="imagespriteName" z="0">
Code Writeable true imagespriteName.z = 0
Code Readable true let variable = imagespriteName.z

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

id
  The styling id of the the component
Data type: string
Designer Writable true <imagesprite name="imagespriteName" 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 <imagesprite name="imagespriteName" name="testComponent">
Code Writeable false
Code Readable false

Methods

Method name Description Parameters
bounce Makes this ImageSprite bounce, as if off a wall. For normal bouncing, the edge argument should be the one returned by EdgeReached.
imagespriteName.bounce(edge)
imagespriteName.bounce(0)
edge number
collidingWith Indicates whether a collision has been registered between this ImageSprite and the passed other sprite.
imagespriteName.collidingWith(other)
imagespriteName.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.
imagespriteName.moveIntoBounds()
moveTo Moves the ImageSprite so that its left top corner is at the specified x and y coordinates.
imagespriteName.moveTo(x, y)
imagespriteName.moveTo(100, 100)
x number
y number
moveToPoint Moves the ImageSprite so that its origin is at the specified x and y coordinates.
imagespriteName.moveToPoint(coordinates)
imagespriteName.moveToPoint(300,300)
coordinates list
pointInDirection Turns this ImageSprite to point toward the point with the coordinates (x, y).
imagespriteName.pointInDirection(x, y)
imagespriteName.pointInDirection(0, 0)
x number
y number
pointTowards Turns this ImageSprite to point towards a given target sprite. The new heading will be parallel to the line joining the centerpoints of the two sprites.
imagespriteName.pointTowards(target)
imagespriteName.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.
imagespriteName.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 ImageSprite won't actually move anywhere in response to the Dragged event unless MoveTo is specifically called.
imagespriteName.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 ImageSprite 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).
imagespriteName.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.
imagespriteName.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.
imagespriteName.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
imagespriteName.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.
imagespriteName.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.
imagespriteName.addEventListener(
    "touched",
    function (x, y) {
        //Your code here
    }
)
x number
y number