Skip to main content

Animation

Create an Animation given a list of frames in AnimationOptions

To create an Animation from a SpriteSheet, use Animation.fromSpriteSheet

Hierarchy

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

publicevents

events: EventEmitter<AnimationEvents> = ...

publicframeDuration

frameDuration: number = 100

publicframes

frames: Frame[] = []

readonlyid

id: number = ...

publicopacity

opacity: number = 1

Gets or sets the opacity of the graphic, 0 is transparent, 1 is solid (opaque).

publicshowDebug

showDebug: boolean = false

Gets or sets wether to show debug information about the graphic

publicstrategy

strategy: AnimationStrategy = AnimationStrategy.Loop

publicoptionaltint

tint?: Color

publictransform

transform: AffineMatrix = ...

Accessors

publiccanFinish

  • get canFinish(): boolean

  • Returns true if the animation can end

    Returns boolean

publiccurrentFrame

  • get currentFrame(): Frame

publiccurrentFrameIndex

  • get currentFrameIndex(): number

publiccurrentFrameTimeLeft

  • get currentFrameTimeLeft(): number

  • Returns the amount of time in milliseconds left in the current frame

    Returns number

publicdirection

publicdone

  • get done(): boolean

  • Returns true if the animation is done, for looping type animations ex.AnimationStrategy.PingPong and ex.AnimationStrategy.Loop this will always return false

    See the ex.Animation.canFinish() method to know if an animation type can end

    Returns boolean

publicflipHorizontal

  • get flipHorizontal(): boolean
  • set flipHorizontal(value: boolean): void

  • Gets or sets the flipHorizontal, which will flip the graphic horizontally (across the y axis)

    Returns boolean

  • Parameters

    • value: boolean

    Returns void

publicflipVertical

  • get flipVertical(): boolean
  • set flipVertical(value: boolean): void

  • Gets or sets the flipVertical, which will flip the graphic vertically (across the x axis)

    Returns boolean

  • Parameters

    • value: boolean

    Returns void

publicheight

  • get height(): number

  • Gets or sets the height of the graphic (always positive)

    Returns number

publicisPlaying

  • get isPlaying(): boolean

  • Returns true if the animation is playing

    Returns boolean

publicisReversed

  • get isReversed(): boolean

  • Returns boolean

publiclocalBounds

  • Gets a copy of the bounds in pixels occupied by the graphic on the the screen. This includes scale.

    Returns BoundingBox

publicorigin

  • Gets or sets the origin of the graphic, if not set the center of the graphic is the origin

    Returns Vector

  • Parameters

    Returns void

publicrotation

  • get rotation(): number
  • set rotation(value: number): void

  • Gets or sets the rotation of the graphic

    Returns number

  • Parameters

    • value: number

    Returns void

publicscale

  • Gets or sets the scale of the graphic, this affects the width and

    Returns Vector

  • Parameters

    Returns void

publicspeed

  • get speed(): number
  • set speed(val: number): void

  • Current animation speed

    1 meaning normal 1x speed. 2 meaning 2x speed and so on.

    Returns number

  • Current animation speed

    1 meaning normal 1x speed. 2 meaning 2x speed and so on.

    Parameters

    • val: number

    Returns void

publicwidth

  • get width(): number

  • Gets or sets the width of the graphic (always positive)

    Returns number

Methods

publicclone

  • Returns a new instance of the graphic that has the same properties

    Returns Animation

publiccloneGraphicOptions

publicdraw

  • Draw the whole graphic to the context including transform

    Parameters

    Returns void

publicgoToFrame

  • goToFrame(frameNumber: number, duration?: number): void

  • Jump the animation immediately to a specific frame if it exists

    Optionally specify an override for the duration of the frame, useful for keeping multiple animations in sync with one another.

    Parameters

    • frameNumber: number
    • optionalduration: number

    Returns void

publicisStale

  • isStale(): boolean

  • Returns boolean

publicpause

  • pause(): void

  • Pauses the animation on the current frame

    Returns void

publicplay

  • play(): void

  • Plays or resumes the animation from the current frame

    Returns void

publicreset

  • reset(): void

  • Reset the animation back to the beginning, including if the animation were done

    Returns void

publicreverse

  • reverse(): void

  • Reverses the play direction of the Animation, this preserves the current frame

    Returns void

publictick

  • tick(elapsed: number, idempotencyToken?: number): void

  • Called internally by Excalibur to update the state of the animation potential update the current frame

    Parameters

    • elapsed: number

      Milliseconds elapsed

    • idempotencyToken: number = 0

      Prevents double ticking in a frame by passing a unique token to the frame

    Returns void

publicstaticfromSpriteSheet

  • Create an Animation from a SpriteSheet, a list of indices into the sprite sheet, a duration per frame and optional AnimationStrategy

    Example:

    const spriteSheet = SpriteSheet.fromImageSource({...});

const anim = Animation.fromSpriteSheet(spriteSheet, range(0, 5), 200, AnimationStrategy.Loop);

    Parameters

    • spriteSheet: SpriteSheet

      ex.SpriteSheet

    • spriteSheetIndex: number[]

      0 based index from left to right, top down (row major order) of the ex.SpriteSheet

    • durationPerFrame: number

      duration per frame in milliseconds

    • strategy: AnimationStrategy = AnimationStrategy.Loop

      Optional strategy, default AnimationStrategy.Loop

    Returns Animation

publicstaticfromSpriteSheetCoordinates

  • Create an Animation from a SpriteSheet given a list of coordinates

    Example:

    const spriteSheet = SpriteSheet.fromImageSource({...});

const anim = Animation.fromSpriteSheetCoordinates({
 spriteSheet,
 frameCoordinates: [
   {x: 0, y: 5, duration: 100, options { flipHorizontal: true }},
   {x: 1, y: 5, duration: 200},
   {x: 2, y: 5},
   {x: 3, y: 5}
 ],
 strategy: AnimationStrategy.PingPong
});

    Parameters

    Returns Animation

    Animation

Page Options