RPG Path Finding Movements By Click
ViniGuerrero June 5th, 2018

Hey guys, I was able to make my character move using Tilemap Character's behaviour and now I'm trying to achieve the same using click event.

However, I'm gettin' some weird positions on click as well as not corresponding X and Y, only one of each per click, example, if I click Tile { x: 4, y: 8 } the character will move to x:4 but not to y:8 on the first time I click it. I'm using setDestination, any ideas on what could be wrong? Here's my piece of code for that:

 

// Map Settings
var mapTileSettings = { numTiles:{x:18, y:15}, tileSize:{x:72, y:72 }};
var mapSettings = createGameMap();
wade.tilemap.init(mapTileSettings);
wade.tilemap.setTiles(mapSettings.myMap, mapSettings.tileTemplates);



// Player Movement
this.onClick = function(eventData){
  var clickPos = eventData.screenPosition;
  var player = wade.getObjectByName(gameMaster).getBehavior();
  var tilePos = wade.tilemap.getTileCoordinates(clickPos.x, clickPos.y);
  player.clearDestinations();
  player.setDestination({x:tilePos.x, y:tilePos.y});
}

// Player Definition
var sprite = new Sprite();
// sprite.setSize(0.10, 0.14);
sprite.setLayer(2); // Using layer 2 because I have a fixed text (follow camera) in layer 1
var playerObj = new SceneObject(sprite);
playerObj.setName(gameMaster);
// Tilemap behavior
var behavior = playerObj.addBehavior(TilemapCharacter);
behavior.maxPathLength = 200;
behavior.rotationOffset = 1;
behavior.allowDiagonal = false;
behavior.movementSpeed = 200;
behavior.automaticRotations = false;
behavior.drawCollisionBox = false;
behavior.animations.walk_n = "walkUp";
behavior.animations.walk_s = "walkDown";
behavior.animations.walk_e = "walkRight";
behavior.animations.walk_w = "walkLeft";
wade.addSceneObject(playerObj, true);

 

Any ideas on why am I gettin' these wrong weird position on player.setDestination({x:tilePos.x, y:tilePos.y}); function?

Thanks in advance!

All 4 Comments
Gio June 5th, 2018

Hi

That could be a bug in the tilemap code, but I cannot reproduce the problem that you're describing. In my tests, when I use player.setDestination(...) it just goes there.

If you can send me your code (including the code that generates the map - the whole project) I can try to reproduce it and find a solution for it.

 

ViniGuerrero June 5th, 2018

Hi Gio! Thanks for the support in this.

Could you please take a look on why I get weird destinations when clicking?

Also, when you click somewhere, after the player moves, you can't move on keyboard keys anymore. (using player.setDestination)

This is my repo https://bitbucket.org/vini-guerrero/wadegame/src/master/ 

Thanks in advance, let me know if you need anything on this...

ViniGuerrero June 5th, 2018

Could this be related to the tileSize setting? I only get weird positions when click to move on map... 

Gio June 6th, 2018

Hi

I had a quick look, I spotted a couple of problems:

First and most important, you are overriding the behavior's onMoveComplete even handler. In player.js, replace:

behavior.onMoveComplete = function(){

with:

playerObj.onMoveComplete = function(){

In general, unless you are writing your own custom behaviors, it's best not to override an existing behavior's event handler (such as onMoveComplete). Instead, add the event handler to the object itself so you can be sure you are not overriding anything. Or, if you need multiple user-defined handlers for the same event, create custom behaviors, each with its own event handler.

Secondly, you don't want to use the screenPosition coordinates for your click events. You need to transform the sceen position into the coordinate space of the tilemap layer (also known as world space coordinates). This ensures that things work even when you move the camera, zoom out, etc. So in app.js, in the onClick function, you can do:

var clickPos = wade.screenPositionToWorld(wade.tilemap.getTerrainLayerId, eventData.screenPosition);

Also note that there is an easier way of handling click events on the tilemap terrain. In app.js, add this as a member function of your app, instead of using this.onClick:

this.onTilemapTerrainMouseDown = function(data)
{
    // your tile coordinates are in data.gridCoords

    // your world space coordinates are in data.worldCoords
}

Finally, you don't need to call clearDestinations()

Post a reply
Add Attachment
Submit Reply
Login to Reply