1 decade ago by sleenee
I really like this community so I feel like posting another piece of possibly helpful code I use.
With this, your top-down character (like in zelda RPG-type games) will move towards your mouse-click location in a straight line (so it's not a path finding function, your character can get stuck).
It's useful for playable characters if you are tired of using the arrow-keys and just want to get somewhere with a left-mouse-click (which is in my code defined as 'context').
put this in your player-entity update function:
side-note:
the following lines might need to be adapted by you
Per default your character position will be the top-left corner of your collision box. This feels kind of unnatural. My character is 48 pixels high and 32 pixels wide so I adjusted the x-target by 16 (32/2) and the y-target by 48 so your character ends up with his feet where your clicked with the mouse.
The code also corrects for the camera-plugin.
In addition you will want to add these lines to your default arrow-movement code (if you have that). So you can interrupt your movement with the arrow keys if necessary.
so for example in my arrow-movement for going to the left I get this now:
The character animation code as defined by me in the entity init-function is like this:
so I have an animation for walking in all 4 directions and looking (but standing still) in all 4 directions.
Good luck with it and if you have questions , just ask.
Sleenee
With this, your top-down character (like in zelda RPG-type games) will move towards your mouse-click location in a straight line (so it's not a path finding function, your character can get stuck).
It's useful for playable characters if you are tired of using the arrow-keys and just want to get somewhere with a left-mouse-click (which is in my code defined as 'context').
put this in your player-entity update function:
//MOUSEINPUT
if( ig.input.pressed('context')){
this.destinationx = ig.input.mouse.x + ig.game.screen.x;
this.destinationy = ig.input.mouse.y + ig.game.screen.y;
}
if(this.destinationx < 9999999 && this.destinationy < 9999999 ){
//character is 48 hoog en 32 breed. corrigeer met 48 op y-as en 32/2 = 16 op x-as
this.distancetotargetx = this.destinationx - this.pos.x - 16 ;
this.distancetotargety = this.destinationy - this.pos.y - 48 ;
if (Math.abs(this.distancetotargetx) > 1 || Math.abs(this.distancetotargety) > 1){
if (Math.abs(this.distancetotargetx) > Math.abs(this.distancetotargety)){
if (this.distancetotargetx > 1){
this.vel.x = this.movementspeed;
this.xydivision = this.distancetotargety / this.distancetotargetx;
this.vel.y = this.xydivision * this.movementspeed;
this.currentAnim = this.anims.walkright;
this.formerpressed = 'right';
}
else{
this.vel.x = -this.movementspeed;
this.xydivision = this.distancetotargety / Math.abs(this.distancetotargetx);
this.vel.y = this.xydivision * this.movementspeed;
this.currentAnim = this.anims.walkleft;
this.formerpressed = 'left';
}
//einde Math.abs(this.distancetotarget.x) > Math.abs(this.distancetotarget.y)
}
else{
if (this.distancetotargety > 1){
this.vel.y = this.movementspeed;
this.xydivision = this.distancetotargetx / this.distancetotargety;
this.vel.x = this.xydivision * this.movementspeed;
this.currentAnim = this.anims.walkdown;
this.formerpressed = 'down';
}
else{
this.vel.y = -this.movementspeed;
this.xydivision = this.distancetotargetx / Math.abs(this.distancetotargety);
this.vel.x = this.xydivision * this.movementspeed;
this.currentAnim = this.anims.walkup;
this.formerpressed = 'up';
}
}
//einde this.distancetotargetx > 0 || this.distancetotargety > 0
}
else{
this.vel.y = 0;
this.vel.x = 0;
this.destinationx = 99999999;
this.destinationy = 99999999;
if(this.formerpressed == 'left'){
this.currentAnim = this.anims.lookleft;
}
else if (this.formerpressed == 'right'){
this.currentAnim = this.anims.lookright;
}
else if (this.formerpressed == 'up'){
this.currentAnim = this.anims.lookup;
}
else if (this.formerpressed == 'down'){
this.currentAnim = this.anims.lookdown;
}
}
//einde this.distancetotargetx && this.distancetotargety
}
//END MOUSEINPUT
side-note:
the following lines might need to be adapted by you
this.distancetotargetx = this.destinationx - this.pos.x - 16 ; this.distancetotargety = this.destinationy - this.pos.y - 48 ;
Per default your character position will be the top-left corner of your collision box. This feels kind of unnatural. My character is 48 pixels high and 32 pixels wide so I adjusted the x-target by 16 (32/2) and the y-target by 48 so your character ends up with his feet where your clicked with the mouse.
The code also corrects for the camera-plugin.
In addition you will want to add these lines to your default arrow-movement code (if you have that). So you can interrupt your movement with the arrow keys if necessary.
//set this.destinationx and dthis.destination y is for the movement by mouse-click this.destinationx = 99999999; this.destinationy = 99999999;
so for example in my arrow-movement for going to the left I get this now:
if( ig.input.state('left') ) {
this.vel.x = -200;
this.vel.y = 0;
this.currentAnim = this.anims.walkleft;
this.formerpressed = 'left';
//set this.destinationx and dthis.destination y is for the movement by mouse-click
this.destinationx = 99999999;
this.destinationy = 99999999;
}
The character animation code as defined by me in the entity init-function is like this:
this.addAnim( 'walkleft', 0.1, [4,5,6,7] ); this.addAnim( 'walkright', 0.1, [8,9,10,11] ); this.addAnim( 'walkup', 0.1, [12,13,14,15] ); this.addAnim( 'walkdown', 0.1, [0,1,2,3] ); this.addAnim( 'lookleft', 1, [4] ); this.addAnim( 'lookright', 1, [8] ); this.addAnim( 'lookup', 1, [12] ); this.addAnim( 'lookdown', 1, [0] );
so I have an animation for walking in all 4 directions and looking (but standing still) in all 4 directions.
Good luck with it and if you have questions , just ask.
Sleenee