Class: Sprite

me. Sprite

new Sprite(x, y, settings)

An object to display a fixed or animated sprite on screen.
Parameters:
Name Type Description
x Number the x coordinates of the sprite object
y Number the y coordinates of the sprite object
settings Object Contains additional parameters for the animation sheet
Properties
Name Type Argument Default Description
image me.video.renderer.Texture | Image | String reference to a texture, spritesheet image or to a texture atlas
framewidth Number <optional>
Width of a single frame within the spritesheet
frameheight Number <optional>
Height of a single frame within the spritesheet
anchorPoint me.Vector2d <optional>
{x:0.5, y:0.5} Anchor point to draw the frame at (defaults to the center of the frame).
Source:
sprite.js, line 31
Example
// create a standalone sprite, with anchor in the center
var sprite = new me.Sprite(0, 0, {
    image : "PlayerTexture",
    framewidth : 64,
    frameheight : 64,
    anchorPoint : new me.Vector2d(0.5, 0.5)
});

Extends

Members

<static> offset :me.Vector2d

global offset for the position to draw from on the source image.
Type:
Source:
sprite.js, line 55

animationpause :Boolean

pause and resume animation
default value : false;
Type:
  • Boolean
Source:
sprite.js, line 37

animationspeed :Number

animation cycling speed (delay between frame in ms)
default value : 100ms;
Type:
  • Number
Source:
sprite.js, line 46

Methods

<static> addAnimation(name, index, animationspeed) → {Number}

add an animation
For fixed-sized cell sprite sheet, the index list must follow the logic as per the following example :
Parameters:
Name Type Argument Description
name String animation id
index Array.<Number> | Array.<String> | Array.<Object> list of sprite index or name defining the animation. Can also use objects to specify delay for each frame, see below
animationspeed Number <optional>
cycling speed for animation in ms
Source:
sprite.js, line 242
See:
Returns:
frame amount of frame added to the animation (delay between each frame).
Type
Number
Example
// walking animation
this.addAnimation("walk", [ 0, 1, 2, 3, 4, 5 ]);
// eating animation
this.addAnimation("eat", [ 6, 6 ]);
// rolling animation
this.addAnimation("roll", [ 7, 8, 9, 10 ]);
// slower animation
this.addAnimation("roll", [ 7, 8, 9, 10 ], 200);
// or get more specific with delay for each frame. Good solution instead of repeating:
this.addAnimation("turn", [{ name: 0, delay: 200 }, { name: 1, delay: 100 }])
// can do this with atlas values as well:
this.addAnimation("turn", [{ name: "turnone", delay: 200 }, { name: "turntwo", delay: 100 }])
// define an dying animation that stop on the last frame
this.addAnimation("die", [{ name: 3, delay: 200 }, { name: 4, delay: 100 }, { name: 5, delay: Infinity }])

<protected, static> draw(renderer)

object draw
not to be called by the end user
called by the game manager on each game loop
Parameters:
Name Type Description
renderer me.CanvasRenderer | me.WebGLRenderer a renderer object
Source:
sprite.js, line 536

<static> flicker(duration, callback)

make the object flicker
Parameters:
Name Type Description
duration Number expressed in milliseconds
callback function Function to call when flickering ends
Source:
sprite.js, line 184
Example
// make the object flicker for 1 second
// and then remove it
this.flicker(1000, function () {
    me.game.world.removeChild(this);
});

<static> flipX(flip)

Flip object on horizontal axis
Parameters:
Name Type Description
flip Boolean enable/disable flip
Source:
sprite.js, line 210

<static> flipY(flip)

Flip object on vertical axis
Parameters:
Name Type Description
flip Boolean enable/disable flip
Source:
sprite.js, line 226

<private, static> getAnimationFrameObjectByIndex() → {Number}

Returns the frame object by the index.
Source:
sprite.js, line 468
Returns:
if using number indices. Returns {Object} containing frame data if using texture atlas
Type
Number

<static> getCurrentAnimationFrame() → {Number}

return the current animation frame index.
Source:
sprite.js, line 457
Returns:
current animation frame index
Type
Number

<static> isCurrentAnimation(name) → {Boolean}

return true if the specified animation is the current one.
Parameters:
Name Type Description
name String animation id
Source:
sprite.js, line 395
Returns:
Type
Boolean
Example
if (!this.isCurrentAnimation("walk")) {
    // do something funny...
}

<static> isFlickering() → {Boolean}

return the flickering state of the object
Source:
sprite.js, line 173
Returns:
Type
Boolean

<static> setAnimationFrame(index)

force the current animation frame index.
Parameters:
Name Type Argument Default Description
index Number <optional>
0 animation frame index
Source:
sprite.js, line 432
Example
// reset the current animation to the first frame
this.setAnimationFrame();

<static> setCurrentAnimation(name, onComplete)

set the current animation this will always change the animation & set the frame to zero
Parameters:
Name Type Argument Description
name String animation id
onComplete String | function <optional>
animation id to switch to when complete, or callback
Source:
sprite.js, line 341
Example
// set "walk" animation
this.setCurrentAnimation("walk");

// set "walk" animation if it is not the current animation
if (this.isCurrentAnimation("walk")) {
    this.setCurrentAnimation("walk");
}

// set "eat" animation, and switch to "walk" when complete
this.setCurrentAnimation("eat", "walk");

// set "die" animation, and remove the object when finished
this.setCurrentAnimation("die", (function () {
   me.game.world.removeChild(this);
   return false; // do not reset to first frame
}).bind(this));

// set "attack" animation, and pause for a short duration
this.setCurrentAnimation("die", (function () {
   this.animationpause = true;

   // back to "standing" animation after 1 second
   setTimeout(function () {
       this.setCurrentAnimation("standing");
   }, 1000);

   return false; // do not reset to first frame
}).bind(this));

<static> setRegion(region)

change the current texture atlas region for this sprite
Parameters:
Name Type Description
region Object typically returned through me.Texture.getRegion()
Source:
sprite.js, line 411
See:
  • me.Texture.getRegion
Example
// change the sprite to "shadedDark13.png";
mySprite.setRegion(game.texture.getRegion("shadedDark13.png"));

<protected, static> update(dt)

update the animation
this is automatically called by the game manager me.game
Parameters:
Name Type Description
dt Number time since the last update in milliseconds.
Source:
sprite.js, line 480
Copyright © 2011 - 2017, Olivier Biot, Jason Oster, Aaron McLeod
Documentation generated by JSDoc 3.4.0 on 2017-02-28T11:37:41+08:00 using the DocStrap template modified by codename-.