me.Sprite(x, y, settings)

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 Attributes Default Description
image me.video.renderer.Texture | HTMLImageElement | HTMLCanvasElement | String

reference to a texture, spritesheet image or to a texture atlas

name String <optional>
""

name of this object

region String <optional>

region name of a specific region to use when using a texture atlas, see me.Renderer.Texture

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).

Example
// create a single sprite from a standalone image, 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)
});

// create a single sprite from a packed texture
game.texture = new me.video.renderer.Texture(
    me.loader.getJSON("texture"),
    me.loader.getImage("texture")
);
var sprite = new me.Sprite(0, 0, {
    image : game.texture,
    region : "npc2.png",
});

Extends

Members

static offset :me.Vector2d

global offset for the position to draw from on the source image.

Default Value:
  • <0.0,0.0>

static source :me.video.renderer.Texture

The source texture object this sprite object is using

alpha :Number

Define the renderable opacity
Set to zero if you do not wish an object to be drawn

Inherited From:
Default Value:
  • 1.0
See:
  • me.Renderable#setOpacity
  • me.Renderable#getOpacity

ancestor :me.Container|me.Entity

a reference to the parent object that contains this renderable

Inherited From:
Default Value:
  • undefined

animationpause :Boolean

pause and resume animation

Default Value:
  • false

animationspeed :Number

animation cycling speed (delay between frame in ms)

Default Value:
  • 100

Methods

static addAnimation(name, index, animationspeedopt) → {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 Attributes 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

Returns:
Number -

frame amount of frame added to the animation (delay between each frame).

See:
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

Returns:
me.Sprite -

Reference to this object for method chaining

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.

Returns:
Number -

current animation frame index

static isCurrentAnimation(name) → {Boolean}

return true if the specified animation is the current one.

Parameters:
Name Type Description
name String

animation id

Returns:
Boolean
Example
if (!this.isCurrentAnimation("walk")) {
    // do something funny...
}

static isFlickering() → {Boolean}

return the flickering state of the object

Returns:
Boolean

static reverseAnimation(nameopt) → {me.Sprite}

reverse the given or current animation if none is specified

Parameters:
Name Type Attributes Description
name String <optional>

animation id

Returns:
me.Sprite -

Reference to this object for method chaining

See:

static setAnimationFrame(indexopt) → {me.Sprite}

force the current animation frame index.

Parameters:
Name Type Attributes Default Description
index Number <optional>
0

animation frame index

Returns:
me.Sprite -

Reference to this object for method chaining

Example
// reset the current animation to the first frame
this.setAnimationFrame();

static setCurrentAnimation(name, onCompleteopt) → {me.Sprite}

set the current animation this will always change the animation & set the frame to zero

Parameters:
Name Type Attributes Description
name String

animation id

onComplete String | function <optional>

animation id to switch to when complete, or callback

Returns:
me.Sprite -

Reference to this object for method chaining

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()

Returns:
me.Sprite -

Reference to this object for method chaining

See:
  • me.Texture.getRegion
Example
// change the sprite to "shadedDark13.png";
mySprite.setRegion(game.texture.getRegion("shadedDark13.png"));