An object to display a fixed or animated sprite on screen.
the x coordinates of the sprite object
the y coordinates of the sprite object
Configuration parameters for the Sprite object
Anchor point to draw the frame at (defaults to the center of the frame).
flip the sprite on the horizontal axis
flip the sprite on the vertical axis
Height of a single frame within the spritesheet
Width of a single frame within the spritesheet
reference to spritesheet image, a texture atlas, a video element, or to a texture atlas
name of this object
region name of a specific region to use when using a texture atlas, see TextureAtlas
a tint to be applied to this sprite
// create a single sprite from a standalone image, with anchor in the center
letsprite = newme.Sprite(0, 0, {
image :"PlayerTexture",
framewidth :64,
frameheight :64,
anchorPoint :newme.Vector2d(0.5, 0.5)
});
// create a single sprite from a packed texture
mytexture = newme.TextureAtlas(
me.loader.getJSON("texture"),
me.loader.getImage("texture")
);
letsprite = newme.Sprite(0, 0, {
image :mytexture,
region :"npc2.png",
});
// create a video sprite
letvideoSprite = newme.Sprite(0, 0, {
image :me.loader.getVideo("bigbunny"),
anchorPoint :newme.Vector2d(0.5, 0.5)
});
// scale the video sprite
videoSprite.currentTransform.scale(2);
// start playing the video (if video is preloaded with `autoplay` set to false)
videoSprite.play();
(G)ame (U)nique (Id)entifier"
a GUID will be allocated for any renderable object added
to an object container (including the me.game.world container)
Define the renderable opacity
Set to zero if you do not wish an object to be drawn
Whether the renderable object will always update, even when outside of the viewport
a reference to the parent object that contains this renderable
The anchor point is used for attachment behavior, and/or when applying transformations.
The coordinate system places the origin at the top left corner of the frame (0, 0) and (1, 1) means the bottom-right corner
a Renderable's anchor point defaults to (0.5,0.5), which corresponds to the center position.
Note: Object created through Tiled will have their anchorPoint set to (0, 0) to match Tiled Level editor implementation.
To specify a value through Tiled, use a json expression like json:{"x":0.5,"y":0.5}.
animation cycling speed (delay between frame in ms)
When enabled, an object container will automatically apply any defined transformation before calling the child draw method.
true
// enable "automatic" transformation when the object is activated
onActivateEvent: function () {
// reset the transformation matrix
this.currentTransform.identity();
// ensure the anchor point is the renderable center
this.anchorPoint.set(0.5, 0.5);
// enable auto transform
this.autoTransform = true;
....
}
the blend mode to be applied to this renderable (see renderer setBlendMode for available blend mode)
the renderable physic body
// define a new Player Class
classPlayerEntityextendsme.Sprite {
// constructor
constructor(x, y, settings) {
// call the parent constructor
super(x, y , settings);
// define a basic walking animation
this.addAnimation("walk", [...]);
// define a standing animation (using the first frame)
this.addAnimation("stand", [...]);
// set the standing animation as default
this.setCurrentAnimation("stand");
// add a physic body
this.body = newme.Body(this);
// add a default collision shape
this.body.addShape(newme.Rect(0, 0, this.width, this.height));
// configure max speed, friction, and initial force to be applied
this.body.setMaxVelocity(3, 15);
this.body.setFriction(0.4, 0);
this.body.force.set(3, 0);
this.isKinematic = false;
// set the display to follow our position on both axis
me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);
}
...
}
the renderable default transformation matrix
The edges here are the direction of the nth edge of the polygon, relative to
the nth point. If you want to draw a given edge from the edge value, you must
first translate to the position of the starting point.
If true, this renderable will be rendered using screen coordinates, as opposed to world coordinates. Use this, for example, to define UI elements.
a list of indices for all vertices composing this polygon
when true the renderable will be redrawn during the next update cycle
If true then physic collision and input events will not impact this renderable
make the renderable object persistent over level changes
true if this is a video sprite (e.g. a HTMLVideoElement was passed as as source)
A mask limits rendering elements to the shape and position of the given mask object. So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
The name of the renderable
global offset for the position to draw from on the source image.
an event handler that is called when the renderable leave or enter a camera viewport
Array of points defining the Polygon
Note: If you manually change points, you must call recalcafterwards so that the changes get applied correctly.
origin point of the Polygon
(Experimental) an optional shader, to be used instead of the default built-in one, when drawing this renderable (WebGL only)
The source texture object this sprite object is using
The shape type (used internally).
Whether to update this object when the game is paused.
bottom coordinate of the Rectangle
absolute center of this rectangle on the horizontal axis
absolute center of this rectangle on the vertical axis
the depth of this renderable on the z axis
Whether the renderable object is visible and within the viewport
returns true if this renderable is flipped on the horizontal axis
returns true if this renderable is flipped on the vertical axis
Whether the renderable object is floating (i.e. used screen coordinates), or contained in a floating parent container
The left coordinate of the Rectangle.
returns the parent application (or game) to which this renderable is attached to
the parent application or undefined if not attached to any container/app
right coordinate of the Rectangle
top coordinate of the Rectangle
add an animation
For fixed-sized cell sprite sheet, the index list must follow the
logic as per the following example :
animation id
list of sprite index or name defining the animation. Can also use objects to specify delay for each frame, see below
Optionalanimationspeed: numbercycling speed for animation in ms
frame amount of frame added to the animation (delay between each frame).
Sprite#animationspeed
// 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");
Returns true if the polygon contains the given point.
(Note: it is highly recommended to first do a hit test on the corresponding
bounding rect, as the function can be highly consuming with complex shapes)
x coordinate or a vector point to check
y coordinate
True if the polygon contain the point, otherwise false
Returns true if the polygon contains the given point.
(Note: it is highly recommended to first do a hit test on the corresponding
bounding rect, as the function can be highly consuming with complex shapes)
True if the polygon contain the point, otherwise false
Returns true if the rectangle contains the given rectangle
rectangle to test
True if the rectangle contain the given rectangle, otherwise false
draw this srite (automatically called by melonJS)
a renderer instance
Check if this rectangle is identical to the specified one.
Other rectangle.
true if equals
flip the renderable on the horizontal axis (around the center of the renderable)
Optionalflip: boolean = truetrue to flip this renderable.
Reference to this object for method chaining
flip the renderable on the vertical axis (around the center of the renderable)
Optionalflip: boolean = truetrue to flip this renderable.
Reference to this object for method chaining
Rotate this renderable towards the given target.
the renderable or position to look at
Reference to this object for method chaining
onCollision callback, triggered in case of collision, when this renderable body is colliding with another one
true if the object should respond to the collision (its position and velocity will be corrected)
// colision handler
onCollision(response) {
if (response.b.body.collisionType === me.collision.types.ENEMY_OBJECT) {
// makes the other object solid, by substracting the overlap vector to the current position
this.pos.sub(response.overlapV);
this.hurt();
// not solid
returnfalse;
}
// Make the object solid
returntrue;
},
check if this rectangle is intersecting with the specified one
Other rectangle.
true if overlaps
restore the rendering context after drawing (automatically called by melonJS).
a renderer object
Prepare the rendering context before drawing (automatically called by melonJS). This will apply any defined transforms, anchor point, tint or blend mode and translate the context accordingly to this renderable position.
a renderer object
Rotate this renderable by the specified angle (in radians).
The angle to rotate (in radians)
Optionalv: anyan optional point to rotate around
Reference to this object for method chaining
scale the renderable around his anchor point. Scaling actually applies changes to the currentTransform member wich is used by the renderer to scale the object when rendering. It does not scale the object itself. For example if the renderable is an image, the image.width and image.height properties are unaltered but the currentTransform member will be changed.
a number representing the abscissa of the scaling vector.
Optionaly: number = xa number representing the ordinate of the scaling vector.
Reference to this object for method chaining
scale the renderable around his anchor point
scaling vector
Reference to this object for method chaining
set the current animation this will always change the animation & set the frame to zero
animation id
OptionalresetAnim: string | Functionanimation id to switch to when complete, or callback
Optionalpreserve_dt: boolean = falseif false will reset the elapsed time counter since last frame
Reference to this object for method chaining
// 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", () => {
world.removeChild(this);
returnfalse; // do not reset to first frame
});
// set "attack" animation, and pause for a short duration
this.setCurrentAnimation("die", () => {
this.animationpause = true;
// back to "standing" animation after 1 second
setTimeout(function () {
this.setCurrentAnimation("standing");
}, 1000);
returnfalse; // do not reset to first frame
});
set new value to the Polygon
position of the Polygon
position of the Polygon
array of vector or vertice defining the Polygon
this instance for objecf chaining
set the vertices defining this Polygon
array of vector or vertice defining the Polygon
this instance for objecf chaining
Shifts the Polygon to the given position vector.
The x coordinate or a vector point to shift to.
Optionaly: numberThe y coordinate. This parameter is required if the first parameter is a number.
multiply the renderable currentTransform with the given matrix
the transformation matrix
Reference to this object for method chaining
Translates the Polygon by the specified offset.
The x offset or a vector point to translate by.
Optionaly: numberThe y offset. This parameter is required if the first parameter is a number.
Reference to this object for method chaining
Protectedupdate Protectedupdate function.
automatically called by the game manager game
time since the last update in milliseconds.
true if the Sprite is dirty