RPG Movements By Click 4 Directions
ViniGuerrero May 28th, 2018

Hey guys, has anyone ever made a script or have any idea on how could I achieve 4 directions movements using click?

It's similar to the MMORPG called Tibia. I want the player to go Up, Down, Left or Right only, no diagonal directions.

This is my current piece of code:

 

function updatePlayerPosition(moveType, player, eventData){
  var playerPos = player.getPosition();
  // 0 = Click / 1 = Keys
  if (moveType === 0){
    // Mouse Click Moving
    var x = eventData.screenPosition.x;
    var y = eventData.screenPosition.y;
    player.moveTo(x, y, 200);
  } else if (moveType === 1){
    // Keyboard W A S D
    var key = eventData.charName;
    switch (key.toUpperCase()) {
      case "A":
      player.playAnimation('walkLeft', 'ping-pong');
      player.setVelocity(-playerMove, 0);
      break;
      case "D":
      player.playAnimation('walkRight', 'ping-pong');
      player.setVelocity(playerMove, 0);
      break;
      case "W":
      player.playAnimation('walkUp', 'ping-pong');
      player.setVelocity(0, -playerMove);
      break;
      case "S":
      player.playAnimation('walkDown', 'ping-pong');
      player.setVelocity(0, playerMove);
      break;
      default: null
    }
  } else if (moveType === 2){
    // Player Stopped
    player.setVelocity(0, 0);
    player.getSprite().getCurrentAnimation().stop();
  }
}

 

I know I'll probably have to get the lastPosition and the clickPosition and make some kind of comparisson, but I'm not sure which, any clues on this?

Thanks in advance!

All 4 Comments
cleo May 28th, 2018

I think I have seen some code in the IsoActionCharacter behavior that does just hat. But I think that Tibia is a Tilemap game, not Isometric, so maybe it's going to be a bit different.

The way I would do it given that you have clickPosition and lastPosition:

var delta = wade.vec2.sub(clickPosition, lastPosition);
var up = {x: 0, y: -1};
var down = {x: 0, y: 1};
var left = {x: -1, y: 0};
var right = {x: 1, y: 0};
var deltaUp = wade.vec2.dot(delta, up);
var deltaDown = wade.vec2.dot(delta, down);
var deltaLeft = wade.vec2.dot(delta, left);
var deltaRight = wade.vec2.dot(delta, right);

Then you see which one is the largest number: if detaDown is the largest you move down, if deltaLeft is the largest you move left, ....

But I am not that good with vectors, when Gio sees this thread he'll have something to say about my solution :) Take it with a pinch of salt, but it should probably work.

ViniGuerrero May 28th, 2018

Yeap, that's another doubt I'm trying to find more info, I'm currently using a giant sprite as the map in a different layer, not sure if this is the correct way to do it... Just so I can understand, when you say compare deltas and move, do you mean by using moveTo(x, y) or setVelocity(arg1, arg2)?

I'm a little bit confused because my script works in a way if the user keeps the key pressed the character will keep walking and stop it's velocity on key release instead of adding values to x or y. Thanks for the support in this @cleo.

This is exactly what I need, but I was hoping for a simpler version of this with Wade:

http://jsfiddle.net/McFunkypants/eky9f/?utm_source=website&utm_medium=embed&utm_campaign=eky9f

 

cleo May 28th, 2018

For a tilemap game I would use wade's Tilemap and TilemapChatacter.  I wanted to paste a link to a tutorial but I couldn''t find a recent one.

There is this from this site's blog

http://clockworkchilli.com/blog/30_tilemaps_have_arrived

But that was before the latest version of wade, there is a tilemap editor now so should be easier.

ViniGuerrero May 28th, 2018

Thanks @cleo!

One question, how can I set the tilemap to be draw in the top left of the game ( take full Chrome width and height? )

I noticed it draws it at 0,0, I'm not sure if I'm supposed to change the camera or tile start draw position

Like in this screenshot: https://ibb.co/dPLC8J

I want the tile to take full window width and height, it will be even bigger than that and the camera will follow the player, however I need to first correct it's drawing position, what property is that one?

This tilemap will help a lot... I think now I'm only missing the click and go to using path functionality...

Post a reply
Add Attachment
Submit Reply
Login to Reply