Mouse Controlled Entity

[tedis...@gmail.com]

So in version 1 of melonJS, I was able to do this:

game.MouseControlledEntity = me.ObjectEntity.extend({

/**
* on mouse down handler
* @param {Event} e - MelonJS Event Object
*/
onMouseDown: function(e){
this._target = {};
this._target.x = e.gameWorldX - Math.floor( this.width / 2 );
this._target.y = e.gameWorldY - Math.floor( this.height / 2 );
this._setDirection(this._target.x - this.pos.x, this._target.y - this.pos.y);
this.renderable.setCurrentAnimation( this.direction );
},

/**
* set direction
* @private
* @param {number} dx
* @param {number} dy
*/
_setDirection:function( dx, dy ){
if( Math.abs( dx ) > Math.abs( dy ) ){
this.direction = ( dx > 0) ? "right" : "left";

}else{
this.direction = ( dy > 0) ? "down" : "up";
}
},

/**
* calculate step for every update
* @private
*/
_calculateStep: function(){

if( this._target ){

var dx = this._target.x - this.pos.x;
var dy = this._target.y - this.pos.y;

if(Math.abs(dx) < this.maxVel.x
&& Math.abs(dy) < this.maxVel.x){
delete this._target;
return;
}

var angle = Math.atan2(dy, dx);
this.vel.x = Math.cos(angle) * this.accel.x * me.timer.tick;
this.vel.y = Math.sin(angle) * this.accel.y * me.timer.tick;
}
},
});

game.HeroEntity = game.MouseControlledEntity.extend({

init: function(x, y, settings) {

settings.image = "girl";
settings.spritewidth = 24;
settings.spriteheight = 36;

// call the constructor
this.parent(x, y, settings);

// set the default horizontal & vertical speed (accel vector)
this.setVelocity( 3, 3);

this.gravity = 0;
this.setFriction(0.5, 0.5);

this.collidable = true;

this.renderable.addAnimation("down", [0,1,2]);
this.renderable.addAnimation("left", [3,4,5]);
this.renderable.addAnimation("right", [6,7,8]);
this.renderable.addAnimation("up", [9,10,11]);

// set the display to follow our position on both axis
me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);

this.direction = "down";

//has to bee release
me.input.registerPointerEvent('mousedown', me.game.viewport, this.onMouseDown.bind(this));
},

update: function() {

this._calculateStep();

// check & update player movement
this.updateMovement();

// update animation if necessary
if (this.vel.x!=0 || this.vel.y!=0) {
// update object animation
this.parent();
return true;
}

// else inform the engine we did not perform
// any update (e.g. position, animation)
return false;
},

/**
* on destroy handler
*/
onDestroyEvent : function() {
me.input.releasePointerEvent('mousedown', me.game.viewport);
},
});

How do I modify the code so that it works in version 3? By changing game.MouseControlledEntity = me.ObjectEntity.extend to game.MouseControlledEntity = me.Entity.extend, there is an error saying "melonJS.js:14999 Uncaught TypeError: Cannot read property 'width' of null". Thanks!

[aaron.g...@gmail.com]

Hi there. Be sure to check against the upgrade guides on how one updates to use the new class/super methods as well:

https://github.com/melonjs/melonJS/wiki/Upgrade-Guide#10x-to-11x

If you also have a look at the docs, you can see the options for settings have changed a bit: http://melonjs.github.io/melonJS/docs/me.Entity.html#Entity

If you're using an animation sheet, like from the platformer tutorial, specify framewidth and frameheight for the dimensions of each frame within the image. If you're using a whole image, you can omit them.

It's hard to say for sure, but i think the error you're getting is because of the settings being off. If you're still having trouble, post your WIP code.

[melonJS]

you can also use the code of the shape example as a reference, on how to do this on melonJS 3.x, as the shapes can also be moved using the mouse

Live example :

http://melonjs.github.io/melonJS/examples/shapes/

Entity source code :

https://github.com/melonjs/melonJS/blob/3.1.0/examples/shapes/js/entities/entities.js

[tedis...@gmail.com]

Still having troubles. Well it was taken straight out from https://github.com/Kibo/melonjs-cookbook/tree/master/cookbook/mouseControlledEntity but the code was based on version 0.9.9. A lot seems to have changed by now.

Tried changing this.parent(x, y, settings); to this._super(me.Entity, "init", [x, y, settings]); doesn't help.

Thanks again.