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 Configuration parameters for the Sprite object
Properties
Name Type Argument Default Description
image me.video.renderer.Texture | HTMLImageElement | HTMLCanvasElement | 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
flipX Number <optional>
flip the sprite on the horizontal axis
flipY Number <optional>
flip the sprite on the vertical axis
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 33
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 57

alpha :Number

Define the renderable opacity
Set to zero if you do not wish an object to be drawn
Type:
  • Number
Inherited From:
Default Value:
  • 1.0
Source:
renderable.js, line 209
See:
  • me.Renderable#setOpacity
  • me.Renderable#getOpacity

ancestor :me.Container|me.Entity

a reference to the parent object that contains this renderable, or undefined if it has not been added to one.
Type:
Inherited From:
Default Value:
  • undefined
Source:
renderable.js, line 221

animationpause :Boolean

pause and resume animation
Type:
  • Boolean
Default Value:
  • false
Source:
sprite.js, line 39

animationspeed :Number

animation cycling speed (delay between frame in ms)
Type:
  • Number
Default Value:
  • 100
Source:
sprite.js, line 48

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 208
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 ]);
// standing animation
this.addAnimation("stand", [ 11, 12 ]);
// 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 }])
// set the standing animation as default
this.setCurrentAnimation("stand");

<static> flicker(duration, callback) → {me.Sprite}

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 180
Returns:
Reference to this object for method chaining
Type
me.Sprite
Example
// make the object flicker for 1 second
// and then remove it
this.flicker(1000, function () {
    me.game.world.removeChild(this);
});

<static> getCurrentAnimationFrame() → {Number}

return the current animation frame index.
Source:
sprite.js, line 458
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 389
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 169
Returns:
Type
Boolean

<static> reverseAnimation(name) → {me.Sprite}

reverse the given or current animation if none is specified
Parameters:
Name Type Argument Description
name String <optional>
animation id
Source:
sprite.js, line 371
See:
Returns:
Reference to this object for method chaining
Type
me.Sprite

<static> setAnimationFrame(index) → {me.Sprite}

force the current animation frame index.
Parameters:
Name Type Argument Default Description
index Number <optional>
0 animation frame index
Source:
sprite.js, line 429
Returns:
Reference to this object for method chaining
Type
me.Sprite
Example
// reset the current animation to the first frame
this.setAnimationFrame();

<static> setCurrentAnimation(name, onComplete) → {me.Sprite}

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 310
Returns:
Reference to this object for method chaining
Type
me.Sprite
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) → {me.Sprite}

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 405
See:
  • me.Texture.getRegion
Returns:
Reference to this object for method chaining
Type
me.Sprite
Example
// change the sprite to "shadedDark13.png";
mySprite.setRegion(game.texture.getRegion("shadedDark13.png"));