Renderables

Renderable types

Renderable

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 me.Renderable sets several default fields, and there's some you should be familiar with:

isRenderable. This defaults to true. It is a simple boolean used in the container draw function, to ensure it will actually call the object's draw method.

visible. This defaults to true. Generally you want to keep it true, unless you have a reason to hide the object. Set it to false if you wish the object to not update or draw, but you wish to keep it around over instantiating a new one.

inViewport. Defaults to false, and is managed for you by the engine. The container update process will use the visible boolean and calculate the position, to see if based off the camera location and the object position if it is viewable inside the viewport. Whenever this is false, the object will not be updated. This is important to know for things like animation, collision, etc. However, if you want an object to keep updating when it is outside of view, use the alwaysUpdate flag. Keep in mind that it does add performance penalties.

alwaysUpdate. Defaults to false. This can be set to true, so an object always updates whether it is visible or not. Use this only when you need to, as it will have and effect on performance.

updateWhenPaused. Defaults to false. When the pause event is fired, objects stop updating by default. This will allow the object to keep updating when set to true.

floating. Defaults to false. Floating is nice to use for things like an HUD, or other objects you want to always draw relative to the screen coordinates. For example, if there's an object you want to always view at 20,20 and stay in that position, set floating to true. Keep in mind, this overwrites anything done with inViewport, since the object will always be drawn in the viewport itself.

z. The z index. This is the property used for stating the draw order (configurable with the ObjectContainer). Lower number is drawn first. It is advised to use the value of 1 or higher.

anchorPoint. The default is a me.Vector2d(0.5, 0.5). The point at which should be used when rotating an object. The default is at the object's center. It expects a vector that contains values of 0 to 1.

alpha. Defaults to 1.0, meaning fully opaque. This is an alpha channel passed to the canvas context when the object is drawn. Can set your objects alpha to 0.5 if you want it to be 50% transparent.

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.

SpriteObject

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.