-
-
Notifications
You must be signed in to change notification settings - Fork 646
Renderables
Overview - Object for simple drawing on screen. Used as a base class, no built-in image support, but you can write just about any logic on top of it.
This is the base object literal that MelonJS uses. It extends Rect, which is essentially a simple geometric rectangle, that stores various pieces of data to make it easy for working with a rectangle on screen. Such as collision, drawing sizes, etc. The renderable does not do a whole lot, other then give you a basic object to work with for rendering to the screen.
The details for the Renderable can be found here: http://melonjs.github.io/docs/me.Renderable.html.
A really simple implementation of a renderable can be done as follows:
var myRenderable = me.Renderable.extend({
init : function() {
// position, width, height
this.parent(new me.Vector2d(100, 100), 50, 50);
this.z = 1;
},
draw : function(context) {
context.save();
context.translate(this.pos.x, this.pos.y);
context.fillStyle = '#000';
context.fillRect(0, 0, this.width, this.height);
context.restore();
},
update : function() {
return false;
}
});
me.game.world.addChild(new myRenderable());
To explain the details, the extend is called. The init function is used as a contructor. The parent init is implemented by me.Rect
, which accepts a me.Vector2d
for the position, and integers for the width & height. The draw method simply uses the passed canvas context to draw a simple rectangle. The update returns false, as nothing needs to be processed for that object, since in this case it is not colliding with anything, nor moving.
Overview Useful for single static image to be drawn on screen.
The sprite object takes the Renderable steps further. It is an ideal object of choice when you want to work with a static image. It gives you features such as flipping the image, scaling, easier rotation, a flicker effect, and just makes it easier to draw a simple image over implementing it yourself with the me.Renderable
.
While the SpriteObject inherits all the properties and methods from the Renderable, it does implement its own: http://melonjs.github.io/docs/me.SpriteObject.html
Sprite Object requires very little code to get going:
game.MySprite = me.SpriteObject.extend({
init : function() {
this.parent(100, 100, me.loader.getImage('workstation'), 640, 480);
this.z = 1;
}
});
As explained in the resources section, the me.loader.getImage() accepts the name specified of an image in the resources hash.