Our extenderEntity for convinience

random.js

me.ExtendEntity = me.ObjectEntity.extend({
    init: function(x, y, settings) {
        
        // melonJS / Tiled sprite width and height fallback
        if(settings.spritewidth == undefined) settings.spritewidth = settings.width || 32;
        if(settings.spriteheight == undefined) settings.spriteheight = settings.height || 32;
        
        this.parent(x, y, settings);
        // melonJS position fix.
        this.pos.y = y;
        this.pos.x = x;
        
        // Include "settings" to object.
        this.settings = settings;
        
        this.events = {
            mouseover   : [],
            mouseout    : [],
            click       : [],
            dragstart   : [],
            dragend     : []
        };
        this.mouseDown = false;
        this.lastMouseDown = 0;
        this.canDrag = false;
        this.drag = false;
        this.dragCoords = {
            x : 0,
            y : 0
        }
        
        this.texts = [];
        this.font = new me.Font('arial', 18, '#000000', 'top');
        
        me.input.registerMouseEvent(
            'mousedown',
            this.collisionBox,
            function() {
                if(this.visible && this.isOnTop()) {
                    //drag stuff
                    if(this.canDrag) {
                        var inputX = me.input.mouse.pos.x || me.input.touches.x;
                        var inputY = me.input.mouse.pos.y || me.input.touches.y;
                        this.dragCoords = {
                            x : inputX - this.pos.x,
                            y : inputY - this.pos.y
                        }
                        this.triggerEvent('dragstart');
                        this.drag = true;
                    }
                    
                    //click stuff
                    var d = new Date();
                    this.lastMouseDown = d.getTime();
                    this.mouseDown = true;
                }
            }.bind(this)
        );
        me.input.registerMouseEvent(
            'mouseup',
            this.collisionBox,
            function() {
                if(this.visible) {
                    //drag stuff
                    if(this.drag) {
                        this.triggerEvent('dragend');
                    }
                    this.drag = false;
                    
                    //click stuff
                    if(this.mouseDown) {
                        var d = new Date();
                        if(d.getTime() - this.lastMouseDown <= 300 ) {
                            this.triggerEvent('click');
                        }
                    }
                }
            }.bind(this)
        );
        me.input.registerMouseEvent(
            'mousemove', 
            null, 
            function() {
                mX = me.input.mouse.pos.x;
                mY = me.input.mouse.pos.y;
                
                if (this.collisionBox.containsPoint(me.input.mouse.pos)) {
                    this.triggerEvent('mouseover');
                }
                else if (!this.mDown) {
                    this.triggerEvent('mouseout');
                }
                return true;
            }.bind(this)
        );
    },
    
    isOnTop : function() {
        var objs = me.game.getObjects();
        var inputX = me.input.mouse.pos.x + me.game.viewport.pos.x, inputY = me.input.mouse.pos.y + me.game.viewport.pos.y;
        var lastGUID = '', count = objs.length;
        
        for (var i = 0, obj; i < count, obj = objs[i]; i++) {
            if((inputX >= obj.pos.x) && (inputX < obj.pos.x + obj.width)) { //X coords check
                if((inputY >= obj.pos.y) && (inputY < obj.pos.y + obj.height)) { //y check
                    lastGUID = obj.GUID;
                }
            }
        }
        
        if(lastGUID === this.GUID) return true;
        return false;
    },
    
    on : function(type, fn) {
        this.events[type].push(fn);
    },
    
    moveToTop : function(){
        me.game.moveToTop(this);
    },
                
    triggerEvent : function(type) {
        for(var i = 0; i < this.events[type].length; i++) {
            this.events[type][i]();
        }
    },
    
    update : function() {
        if(this.drag) {
            this.pos.x = me.input.mouse.pos.x - this.dragCoords.x;
            this.pos.y = me.input.mouse.pos.y - this.dragCoords.y;
        }
		try {
			this.updateMovement();
		} catch(err) {
			console.log(this.settings.name + ' has an error: ' + err.message);
		}
        this.parent(this);
        return this;
    },
    
    draggable : function(bool) {
        this.canDrag = bool;
        if(!bool) {
            this.drag = false;
        }
    },
    
    addText : function(text, settings) {
        settings = merge_options({
            font        : 'arial',
            align        : 'top',
            x             : 0,
            y             : 20,
            centered     : false,
            centeredX     : true,
            centeredY     : true,
            size         : 20,
            color         : "#000000",
            bold         : true,
            italic         : false,
            shadowColor : 'transparent',
            shadowBlur    : 5,
            shadowOffsetX : 0,
            shadowOffsetY : 0
        }, settings);
        
        
        if (settings.centered === true) {
            settings.centeredX = true;
            settings.centeredY = true;
        }
        
        var textID = {
            text : text,
            settings : settings
        };
        
        this.texts.push(textID);
        
        return textID;
    },
    
    draw : function(context) {
        //Draw font
        context.save();
        this.parent( context );
        for(var i = this.texts.length, text; i--, text = this.texts[i];) {
            this.font.set(text.settings.font, text.settings.size, text.settings.color, text.settings.align);
            if(text.settings.bold) this.font.bold();
            if(text.settings.italic) this.font.italic();
            
            var fontMetrics = this.font.measureText(context, text.text);
            var x = text.settings.x,
                y = text.settings.y;
            if(text.settings.centeredX) {
                x = (this.width - fontMetrics.width) / 2;
            }
            if(text.settings.centeredY) {
                y = this.hHeight + (fontMetrics.height / 2);
            }
            x += (this.pos.x - this.vp.pos.x);
            y += (this.pos.y - this.vp.pos.y);
            
            context.shadowColor = text.settings.shadowColor;
            context.shadowOffsetX = text.settings.shadowOffsetX;
            context.shadowOffsetY = text.settings.shadowOffsetY;
            context.shadowBlur = text.settings.shadowBlur;
            
            this.font.draw(context, text.text, x, y);
        };
        context.restore();
        return context;
    }

});

function merge_options(defaults, overwrites){
    var merged = {};
    for (var attrname in defaults) { merged[attrname] = defaults[attrname]; }
    for (var attrname in overwrites) { merged[attrname] = overwrites[attrname]; }
    return merged;
}