Show:
Module: p5.play
Parent Module: p5.play

A Sprite is the main building block of p5.play: an element able to store images or animations with a set of properties such as position and visibility. A Sprite can have a collider that defines the active area to detect collisions or overlappings with other sprites and mouse interactions.

To create a Sprite, use createSprite.

Methods

_collideWith
(
  • type
  • target
  • callback
)
Boolean
private

Defined in lib/p5.play.js:2949

Internal collision detection function. Do not use directly.

Handles collision with individual sprites or with groups, using the quadtree to optimize the latter.

Parameters:

  • type String
    • 'overlap', 'isTouching', 'displace', 'collide', 'bounce' or 'bounceOff'
  • target Sprite | Group
  • callback Function
    • if collision occurred (ignored for 'isTouching')

Returns:

Boolean:

true if a collision occurred

_collideWithOne
(
  • type
  • other
  • callback
)
Boolean
private

Defined in lib/p5.play.js:2999

Helper collision method for colliding this sprite with one other sprite.

Has the side effect of setting this.touching properties to TRUE if collisions occur.

Parameters:

  • type String
    • 'overlap', 'isTouching', 'displace', 'collide', 'bounce' or 'bounceOff'
  • other Sprite
  • callback Function
    • if collision occurred (ignored for 'isTouching')

Returns:

Boolean:

true if a collision occurred

addAnimation
(
  • label
  • animation
)

Defined in lib/p5.play.js:2584

Adds an animation to the sprite. The animation should be preloaded in the preload() function using loadAnimation. Animations require a identifying label (string) to change them. Animations are stored in the sprite but not necessarily displayed until Sprite.changeAnimation(label) is called.

Usage:

  • sprite.addAnimation(label, animation);

Alternative usages. See Animation for more information on file sequences:

  • sprite.addAnimation(label, firstFrame, lastFrame);
  • sprite.addAnimation(label, frame1, frame2, frame3...);

Parameters:

  • label String

    Animation identifier

  • animation Animation

    The preloaded animation

addImage
(
  • label
  • img
)

Defined in lib/p5.play.js:2556

Adds an image to the sprite. An image will be considered a one-frame animation. The image should be preloaded in the preload() function using p5 loadImage. Animations require a identifying label (string) to change them. The image is stored in the sprite but not necessarily displayed until Sprite.changeAnimation(label) is called

Usages:

  • sprite.addImage(label, image);
  • sprite.addImage(image);

If only an image is passed no label is specified

Parameters:

  • label String | p5.Image

    Label or image

  • [img] p5.Image optional

    Image

addSpeed
(
  • speed
  • angle
)

Defined in lib/p5.play.js:2521

Pushes the sprite in a direction defined by an angle. The force is added to the current velocity.

Parameters:

  • speed Number

    Scalar speed to add

  • angle Number

    Direction in degrees

addToGroup
(
  • group
)

Defined in lib/p5.play.js:2350

Adds the sprite to an existing group

Parameters:

  • group Object
attractionPoint
(
  • magnitude
  • pointX
  • pointY
)

Defined in lib/p5.play.js:2540

Pushes the sprite toward a point. The force is added to the current velocity.

Parameters:

  • magnitude Number

    Scalar speed to add

  • pointX Number

    Direction x coordinate

  • pointY Number

    Direction y coordinate

bounce
(
  • target
  • callback
)
Boolean

Defined in lib/p5.play.js:2887

Checks if the the sprite is overlapping another sprite or a group. If the overlap is positive the sprites will bounce affecting each other's trajectories depending on their .velocity, .mass and .restitution

The check is performed using the colliders. If colliders are not set they will be created automatically from the image/animation bounding box.

A callback function can be specified to perform additional operations when the collision occours. If the target is a group the function will be called for each single sprite colliding. The parameter of the function are respectively the current sprite and the colliding sprite.

Parameters:

  • target Object

    Sprite or group to check against the current one

  • [callback] Function optional

    The function to be called if overlap is positive

Returns:

Boolean:

True if overlapping

Example:

sprite.bounce(otherSprite, explosion);

function explosion(spriteA, spriteB) {
  spriteA.remove();
  spriteB.score++;
}
bounceOff
(
  • target
  • callback
)
Boolean

Defined in lib/p5.play.js:2918

Checks if the the sprite is overlapping another sprite or a group. If the overlap is positive the sprite will bounce with the target(s) treated as immovable.

The check is performed using the colliders. If colliders are not set they will be created automatically from the image/animation bounding box.

A callback function can be specified to perform additional operations when the collision occours. If the target is a group the function will be called for each single sprite colliding. The parameter of the function are respectively the current sprite and the colliding sprite.

Parameters:

  • target Object

    Sprite or group to check against the current one

  • [callback] Function optional

    The function to be called if overlap is positive

Returns:

Boolean:

True if overlapping

Example:

sprite.bounceOff(otherSprite, explosion);

function explosion(spriteA, spriteB) {
  spriteA.remove();
  spriteB.score++;
}
changeAnimation
(
  • label
)

Defined in lib/p5.play.js:2684

Changes the displayed animation. See Animation for more control over the sequence.

Parameters:

  • label String

    Animation identifier

changeImage
(
  • label
)

Defined in lib/p5.play.js:2663

Changes the displayed image/animation. Equivalent to changeAnimation

Parameters:

  • label String

    Image/Animation identifier

collide
(
  • target
  • callback
)
Boolean

Defined in lib/p5.play.js:2825

Checks if the the sprite is overlapping another sprite or a group. If the overlap is positive the sprite will bounce with the target(s) treated as immovable with a restitution coefficient of zero.

The check is performed using the colliders. If colliders are not set they will be created automatically from the image/animation bounding box.

A callback function can be specified to perform additional operations when the collision occours. If the target is a group the function will be called for each single sprite colliding. The parameter of the function are respectively the current sprite and the colliding sprite.

Parameters:

  • target Object

    Sprite or group to check against the current one

  • [callback] Function optional

    The function to be called if overlap is positive

Returns:

Boolean:

True if overlapping

Example:

sprite.collide(otherSprite, explosion);

function explosion(spriteA, spriteB) {
  spriteA.remove();
  spriteB.score++;
}
destroy ()

Defined in lib/p5.play.js:2297

Alias for remove()

displace
(
  • target
  • callback
)
Boolean

Defined in lib/p5.play.js:2856

Checks if the the sprite is overlapping another sprite or a group. If the overlap is positive the current sprite will displace the colliding one to the closest non-overlapping position.

The check is performed using the colliders. If colliders are not set they will be created automatically from the image/animation bounding box.

A callback function can be specified to perform additional operations when the collision occours. If the target is a group the function will be called for each single sprite colliding. The parameter of the function are respectively the current sprite and the colliding sprite.

Parameters:

  • target Object

    Sprite or group to check against the current one

  • [callback] Function optional

    The function to be called if overlap is positive

Returns:

Boolean:

True if overlapping

Example:

sprite.displace(otherSprite, explosion);

function explosion(spriteA, spriteB) {
  spriteA.remove();
  spriteB.score++;
}
display ()
private final

Defined in lib/p5.play.js:2178

Manages the positioning, scale and rotation of the sprite Called automatically, it should not be overridden

draw ()

Defined in lib/p5.play.js:2243

Manages the visuals of the sprite. It can be overridden with a custom drawing function. The 0,0 point will be the center of the sprite. Example: sprite.draw = function() { ellipse(0,0,10,10) } Will display the sprite as circle.

frameDidChange () Boolean

Defined in lib/p5.play.js:2495

Wrapper to access animation.frameChanged

Returns:

Boolean:

true if the animation frame has changed

getAnimationLabel () String

Defined in lib/p5.play.js:2674

Returns the label of the current animation

Returns:

String:

label Image/Animation identifier

getDirection () Number

Defined in lib/p5.play.js:2326

Calculates the movement's direction in degrees.

Returns:

Number:

Angle in degrees

getScaledHeight () Number

Defined in lib/p5.play.js:1636

Gets the scaled height of the sprite.

Returns:

Number:

Scaled height

getScaledWidth () Number

Defined in lib/p5.play.js:1626

Gets the scaled width of the sprite.

Returns:

Number:

Scaled width

getSpeed () Number

Defined in lib/p5.play.js:2316

Calculates the scalar speed.

Returns:

Number:

Scalar speed

isTouching
(
  • target
)
Boolean

Defined in lib/p5.play.js:2810

Alias for overlap(), except without a callback parameter. The check is performed using the colliders. If colliders are not set they will be created automatically from the image/animation bounding box.

Returns whether or not this sprite is overlapping another sprite or group. Modifies the sprite's touching property object.

Parameters:

  • target Object

    Sprite or group to check against the current one

Returns:

Boolean:

True if touching

limitSpeed
(
  • max
)

Defined in lib/p5.play.js:2363

Limits the scalar speed.

Parameters:

  • max Number

    Max speed: positive number

mirrorX
(
  • dir
)
Number

Defined in lib/p5.play.js:2114

Sets the sprite's horizontal mirroring. If 1 the images displayed normally If -1 the images are flipped horizontally If no argument returns the current x mirroring

Parameters:

  • dir Number

    Either 1 or -1

Returns:

Number:

Current mirroring if no parameter is specified

mirrorY
(
  • dir
)
Number

Defined in lib/p5.play.js:2131

Sets the sprite's vertical mirroring. If 1 the images displayed normally If -1 the images are flipped vertically If no argument returns the current y mirroring

Parameters:

  • dir Number

    Either 1 or -1

Returns:

Number:

Current mirroring if no parameter is specified

mouseUpdate ()

Defined in lib/p5.play.js:1970

Updates the sprite mouse states and triggers the mouse events: onMouseOver, onMouseOut, onMousePressed, onMouseReleased

nextFrame ()

Defined in lib/p5.play.js:2438

overlap
(
  • target
  • callback
)
Boolean

Defined in lib/p5.play.js:2782

Checks if the the sprite is overlapping another sprite or a group. The check is performed using the colliders. If colliders are not set they will be created automatically from the image/animation bounding box.

A callback function can be specified to perform additional operations when the overlap occours. If the target is a group the function will be called for each single sprite overlapping. The parameter of the function are respectively the current sprite and the colliding sprite.

Parameters:

  • target Object

    Sprite or group to check against the current one

  • [callback] Function optional

    The function to be called if overlap is positive

Returns:

Boolean:

True if overlapping

Example:

sprite.overlap(otherSprite, explosion);

function explosion(spriteA, spriteB) {
  spriteA.remove();
  spriteB.score++;
}
overlapPixel
(
  • pointX
  • pointY
)
Boolean

Defined in lib/p5.play.js:2726

Checks if the given point corresponds to a transparent pixel in the sprite's current image. It can be used to check a point collision against only the visible part of the sprite.

Parameters:

  • pointX Number

    x coordinate of the point to check

  • pointY Number

    y coordinate of the point to check

Returns:

Boolean:

result True if non-transparent

overlapPoint
(
  • pointX
  • pointY
)
Boolean

Defined in lib/p5.play.js:2762

Checks if the given point is inside the sprite's collider.

Parameters:

  • pointX Number

    x coordinate of the point to check

  • pointY Number

    y coordinate of the point to check

Returns:

Boolean:

result True if inside

pause ()

Defined in lib/p5.play.js:2460

Alias for animation.stop()

play ()

Defined in lib/p5.play.js:2471

Alias for animation.play() with extra logic

Plays/resumes the sprite's current animation. If the animation is currently playing this has no effect. If the animation has stopped at its last frame, this will start it over at the beginning.

previousFrame ()

Defined in lib/p5.play.js:2449

remove ()

Defined in lib/p5.play.js:2280

Removes the Sprite from the sketch. The removed Sprite won't be drawn or updated anymore.

setAnimation
(
  • label
)
private

Defined in lib/p5.play.js:2701

Sets the animation from a list in _predefinedSpriteAnimations.

Parameters:

  • label String

    Animation identifier

setCollider
(
  • type
  • offsetX
  • offsetY
  • width
  • height
  • rotation
)

Defined in lib/p5.play.js:2026

Sets a collider for the sprite.

In p5.play a Collider is an invisible circle or rectangle that can have any size or position relative to the sprite and which will be used to detect collisions and overlapping with other sprites, or the mouse cursor.

If the sprite is checked for collision, bounce, overlapping or mouse events a rectangle collider is automatically created from the width and height parameter passed at the creation of the sprite or the from the image dimension in case of animated sprites.

Often the image bounding box is not appropriate as the active area for collision detection so you can set a circular or rectangular sprite with different dimensions and offset from the sprite's center.

There are many ways to call this method. The first argument determines the type of collider you are creating, which in turn changes the remaining arguments. Valid collider types are:

  • point - A point collider with no dimensions, only a position.

    setCollider("point"[, offsetX, offsetY])

  • circle - A circular collider with a set radius.

    setCollider("circle"[, offsetX, offsetY[, radius])

  • rectangle - An alias for aabb, below.

  • aabb - An axis-aligned bounding box - has width and height but no rotation.

    setCollider("aabb"[, offsetX, offsetY[, width, height]])

  • obb - An oriented bounding box - has width, height, and rotation.

    setCollider("obb"[, offsetX, offsetY[, width, height[, rotation]]])

Parameters:

  • type String

    One of "point", "circle", "rectangle", "aabb" or "obb"

  • [offsetX] Number optional

    Collider x position from the center of the sprite

  • [offsetY] Number optional

    Collider y position from the center of the sprite

  • [width] Number optional

    Collider width or radius

  • [height] Number optional

    Collider height

  • [rotation] Number optional

    Collider rotation in degrees

setDefaultCollider ()

Defined in lib/p5.play.js:1956

Creates a default collider matching the size of the placeholder rectangle or the bounding box of the image.

setFrame
(
  • x
  • y
)

Defined in lib/p5.play.js:2505

Rotate the sprite towards a specific position

Parameters:

  • x Number

    Horizontal coordinate to point to

  • y Number

    Vertical coordinate to point to

setFrame
(
  • frame
)

Defined in lib/p5.play.js:2426

Parameters:

  • frame Number

    Frame number (starts from 0).

setSpeed
(
  • speed
  • angle
)

Defined in lib/p5.play.js:2383

Set the speed and direction of the sprite. The action overwrites the current velocity. If direction is not supplied, the current direction is maintained. If direction is not supplied and there is no current velocity, the current rotation angle used for the direction.

Parameters:

  • speed Number

    Scalar speed

  • [angle] Number optional

    Direction in degrees

setSpeedAndDirection
(
  • speed
  • angle
)

Defined in lib/p5.play.js:2417

Alias for setSpeed()

Parameters:

  • speed Number

    Scalar speed

  • [angle] Number optional

    Direction in degrees

setVelocity
(
  • x
  • y
)

Defined in lib/p5.play.js:2304

Sets the velocity vector.

Parameters:

  • x Number

    X component

  • y Number

    Y component

update ()

Defined in lib/p5.play.js:1864

Updates the sprite. Called automatically at the beginning of the draw cycle.

Properties

_rotation

Number private

Defined in lib/p5.play.js:1376

Internal rotation variable (expressed in degrees). Note: external callers access this through the rotation property above.

Default: 0

animation

Animation

Defined in lib/p5.play.js:1697

Reference to the current animation.

bounciness

Number

Defined in lib/p5.play.js:1798

Sprite bounciness (alias to restitution).

collider

Object

Defined in lib/p5.play.js:1286

The sprite's current collider. It can either be an Axis Aligned Bounding Box (a non-rotated rectangle) or a circular collider. If the sprite is checked for collision, bounce, overlapping or mouse events the collider is automatically created from the width and height of the sprite or from the image dimension in case of animate sprites

You can set a custom collider with Sprite.setCollider

debug

Boolean

Defined in lib/p5.play.js:1666

If set to true, draws an outline of the collider, the depth, and center.

Default: false

depth

Number

Defined in lib/p5.play.js:1409

Determines the rendering order within a group: a sprite with lower depth will appear below the ones with higher depth.

Note: drawing a group before another with drawSprites will make its members appear below the second one, like in normal p5 canvas drawing.

Default: One more than the greatest existing sprite depth, when calling createSprite(). When calling new Sprite() directly, depth will initialize to 0 (not recommended).

frameDelay

Number

Defined in lib/p5.play.js:1814

Sprite animation frame delay (alias to animation.frameDelay).

friction

Number

Defined in lib/p5.play.js:1274

Friction factor, reduces the sprite's velocity. The friction should be close to 0 (eg. 0.01) 0: no friction 1: full friction

Default: 0

groups

Array

Defined in lib/p5.play.js:1684

Groups the sprite belongs to, including allSprites

height

Number

Defined in lib/p5.play.js:1569

Height of the sprite's current image. If no images or animations are set it's the height of the placeholder rectangle.

Default: 100

immovable

Boolean

Defined in lib/p5.play.js:1329

If set to true the sprite won't bounce or be displaced by collisions Simulates an infinite mass or an anchored object.

Default: false

life

Number

Defined in lib/p5.play.js:1654

Cycles before self removal. Set it to initiate a countdown, every draw cycle the property is reduced by 1 unit. At 0 it will call a sprite.remove() Disabled if set to -1.

Default: -1

lifetime

Number

Defined in lib/p5.play.js:1782

Sprite lifetime (alias to life).

mass

Number

Defined in lib/p5.play.js:1318

The mass determines the velocity transfer when sprites bounce against each other. See Sprite.bounce The higher the mass the least the sprite will be affected by collisions.

Default: 1

maxSpeed

Number

Defined in lib/p5.play.js:1264

Set a limit to the sprite's scalar speed regardless of the direction. The value can only be positive. If set to -1, there's no limit.

Default: -1

mouseActive

Boolean

Defined in lib/p5.play.js:1448

If set to true sprite will track its mouse state. the properties mouseIsPressed and mouseIsOver will be updated. Note: automatically set to true if the functions onMouseReleased or onMousePressed are set.

Default: false

mouseIsOver

Boolean

Defined in lib/p5.play.js:1460

True if mouse is on the sprite's collider. Read only.

mouseIsPressed

Boolean

Defined in lib/p5.play.js:1469

True if mouse is pressed on the sprite's collider. Read only.

originalHeight

Number

Defined in lib/p5.play.js:1615

Unscaled height of the sprite If no images or animations are set it's the height of the placeholder rectangle.

Default: 100

originalWidth

Number

Defined in lib/p5.play.js:1604

Unscaled width of the sprite If no images or animations are set it's the width of the placeholder rectangle.

Default: 100

position

p5.Vector

Defined in lib/p5.play.js:1230

The sprite's position of the sprite as a vector (x,y).

previousPosition

p5.Vector

Defined in lib/p5.play.js:1237

The sprite's position at the beginning of the last update as a vector (x,y).

removed

Boolean

Defined in lib/p5.play.js:1646

True if the sprite has been removed.

restitution

Number

Defined in lib/p5.play.js:1342

Coefficient of restitution. The velocity lost after bouncing. 1: perfectly elastic, no energy is lost 0: perfectly inelastic, no bouncing less than 1: inelastic, this is the most common in nature greater than 1: hyper elastic, energy is increased like in a pinball bumper

Default: 1

rotateToDirection

Boolean

Defined in lib/p5.play.js:1398

Automatically lock the rotation property of the visual element (image or animation) to the sprite's movement direction and vice versa.

Default: false

rotation

Number

Defined in lib/p5.play.js:1355

Rotation in degrees of the visual element (image or animation) Note: this is not the movement's direction, see getDirection.

Default: 0

rotationSpeed

Number

Defined in lib/p5.play.js:1387

Rotation change in degrees per frame of thevisual element (image or animation) Note: this is not the movement's direction, see getDirection.

Default: 0

scale

Number

Defined in lib/p5.play.js:1425

Determines the sprite's scale. Example: 2 will be twice the native size of the visuals, 0.5 will be half. Scaling up may make images blurry.

Default: 1

shapeColor

Color

Defined in lib/p5.play.js:1675

If no image or animations are set this is the color of the placeholder rectangle

touching

Object

Defined in lib/p5.play.js:1301

Object containing information about the most recent collision/overlapping To be typically used in combination with Sprite.overlap or Sprite.collide functions. The properties are touching.left, touching.right, touching.top, touching.bottom and are either true or false depending on the side of the collider.

velocity

p5.Vector

Defined in lib/p5.play.js:1255

The sprite's velocity as a vector (x,y) Velocity is speed broken down to its vertical and horizontal components.

velocityX

Number

Defined in lib/p5.play.js:1750

Sprite x velocity (alias to velocity.x).

visible

Boolean

Defined in lib/p5.play.js:1439

The sprite's visibility.

Default: true

width

Number

Defined in lib/p5.play.js:1534

Width of the sprite's current image. If no images or animations are set it's the width of the placeholder rectangle.

Default: 100

x

Number

Defined in lib/p5.play.js:1718

Sprite x position (alias to position.x).

y

Number

Defined in lib/p5.play.js:1734

Sprite y position (alias to position.y).

y

Number

Defined in lib/p5.play.js:1766

Sprite y velocity (alias to velocity.y).