API Docs for: 6.0.1
Show:

SpriteAnimation Class

Extends Base
Module: scrawlFrame

SpriteAnimation

Instantiation

  • scrawl.makeSpriteAnimation()

Purpose

  • wraps a entity sheet image
  • acts as the link between a Picture object and the entity images on the entity sheet
  • holds data about cells in the entitysheet animation
  • controls the animation playback

Access

  • scrawl.spriteanimation.SPRITEANIMATIONNAME
  • scrawl.spriteanimation.[scrawl.entity.PICTURENAME.spriteAnimation]

SpriteAnimation attributes can also be set and retrieved directly using Picture.get() and Picture.set() functions, where a Picture entity is associated with the SpriteAnimation object via its .animSheet attribute

Constructor

SpriteAnimation

(
  • [items]
)

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Methods

clone

(
  • items
)
chainable

Clone a Scrawl.js object, optionally altering attribute values in the cloned object

Note that any callback or fn attribute functions will be referenced by the clone, not copied to the clone; these can be overwritten with new anonymous functions by including them in the items argument object

(This function is replaced by the path extension)

Parameters:

  • items Object

    Object containing attribute key:value pairs; will overwrite existing values in the cloned, but not the source, Object

Returns:

Cloned object

Example:

var box = scrawl.makeBlock({
    width: 50,
    height: 50
    });
var newBox = box.clone({
    height: 100
    });
newBox.get('width');        //returns 50
newBox.get('height');       //returns 100

get

(
  • item
)

Retrieve an attribute value. If the attribute value has not been set, then the default value for that attribute will be returned.

Parameters:

  • item String

    Attribute key

Returns:

Attribute value

Example:

var box = scrawl.makeBlock({
    width: 50,
    });
box.get('width');               //returns 50
box.get('height');              //returns 0
box.get('favouriteAnimal');     //returns undefined

getData

() private

Returns an Object in the form {copyX:Number, copyY:Number, copyWidth:Number, copyHeight:Number}, representing the coordinates and dimensions of the current frame to be displayed by a Picture entity

(Only used by SpriteAnimation objects)

Returns:

Data object

getDataBackward

() private

getData helper object

getDataForward

() private

getData helper object

numberConvert

(
  • val
  • dim
)
private

Stamp helper function - convert string percentage values to numerical values

Parameters:

  • val String

    coordinate String

  • dim Number

    dimension value

Returns:

Number - value

parse

()

Turn the object into a JSON String

Returns:

object of object's currently set attributes

set

(
  • items
)
private chainable

Inherited from Base but overwritten in source\scrawlImageLoad.js:741

Set attribute values - will also set the currentFrame attribute to the appropriate value when the running attribute is changed

(Only used by SpriteAnimation objects)

Parameters:

  • items Object

    Object containing attribute key:value pairs

Returns:

This

Properties

comment

String

Comment, for accessibility

Default: ''

currentFrame

Number

The current frame of the animation, from frame 0

Default: 0

frames

Array

An Array of animation frame data Objects, to be used for producing an animation sequence. Each Object in the Array has the following form:

  • {x:Number, y:Number, w:Number, h:Number, d:Number}

... where:

  • x and y represent the starting coordinates for the animation frame, in pixels, from the top left corner of the image
  • w and h represent the dimensions of the animation frame, in pixels
  • d is the duration for each frame, in milliseconds

Animation frames are played in the order they are presented in this Array

Default: []

lastCalled

Date private

Datestamp when SpriteAnimation.getData() function was last called

Default: 0

loop

String

Playback String; permitted values include:

  • 'pause' - pause the animation on the current frame
  • 'end' - play the animation once (default)
  • 'loop' - play the animation continuously
  • 'reverse' - reverse the direction in which the animation runs

Default: 'end'

name

String

Unique identifier for each object; default: computer-generated String based on Object's type

running

String

Animation running String: permitted values include:

  • 'forward' - play the animation from the first frame towards the last frame
  • 'backward' - play the animation from the last frame towards the first frame
  • 'complete' - animation has reached the last (or first) frame and has completed

Default: 'complete'

scrawl.work.animKeys

Array private

Array of keys used with SpriteAnimation object

speed

Number

The speed at which the animation is to play. Values less than 1 will slow the animation, while values greater than one will speed it up. Setting the speed to 0 will pause the animation

Default: 1

timestamp

String

Creation timestamp

Default: ''

title

String

Title, for accessibility

Default: ''

type

String final

Inherited from Base but overwritten in source\scrawlImageLoad.js:661

Default: 'SpriteAnimation'