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!
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...
