Pathfinding in Isometric View (Part 2)

This is an expansion of my previous blog, Pathfinding in Isometric View.

If you followed my code exactly, you will notice that the character will have a “zig zag” movement on the isometric map.  It will move somewhat diagonally along the path, but then take a few more steps in the “x” coordinate.  Note these lines from the movePlayer() function:

if (playerX < destX) {
  context.player.x += 0.5;
} else if (playerX > destX) {
  context.player.x -= 0.5;
} else {
  context.player.x = destX;
}
if (playerY < destY) {
  context.player.y += 0.5;
} else if (playerY > destY) {
  context.player.y -= 0.5;
} else {
  context.player.y = destY;
}

In my other previous blog, Creating an Isometric World with EaselJS, I mentioned about how an isometric tile’s height is half its width.  Therefore, make sure your “y” amount is half of the “x” amount.  In my example, the amounts were equal.  Let’s modify the “x” amount a bit:

if (playerX < destX) {
  context.player.x += 1;
} else if (playerX > destX) {
  context.player.x -= 1;
} else {
  context.player.x = destX;
}
if (playerY < destY) {
  context.player.y += 0.5;
} else if (playerY > destY) {
  context.player.y -= 0.5;
} else {
  context.player.y = destY;
}

Ah, much better!

Another slight modification would be in the click event.  If you’ve noticed, you can only click on a tile once to move the character.  If you click a second tile to move the character to it, this line in movePlayerToTile():

var row = array[0],

gives you this error:

Uncaught TypeError: Cannot read property '0' of undefined

One reason is because I didn’t set the new “row” and “column” in the PlayerModel in the movePlayer() function:

...
if ( (playerX === destX) && (playerY === destY) ) {
 context.model.set('movePlayer', false);
 context.playerModel.set('row', context.playerModel.get('destRow'));
 context.playerModel.set('column', context.playerModel.get('destColumn'));
 context.playerModel.set('x', destX);
 context.playerModel.set('y', destY);
...

This basically resets the origin of the path, since you’re not on (0,0) anymore.

The other reason is because the pathfinding library I am using (Pathfinding.js) has a grid that isn’t reusable, so I have to clone it before calling its findPath API.  So instead of this in my createPath() function:

var path = context.finder.findPath(playerRow, playerColumn, destinationRow, destinationColumn, grid);

simply clone the grid:

var gridClone = grid.clone(),
    path = context.finder.findPath(playerRow, playerColumn, destinationRow, destinationColumn, gridClone);

And that should do it!

In case you’re wondering, I’ve been using my sheep character for the isometric world.  However, he doesn’t have the proper angles of a character in an isometric world.  He doesn’t have any animations, either.  So stay tuned for a future post on how to create a character in an isometric world!

Baaaa!
Baaaa!

SourceTree: A Graphical Interface for Git

Git is becoming more and more widely used by many in the workplace and at home.  While Git is very command-line driven, I think one of the things I miss about SVN are the GUIs available, especially when needing to see the differences between old and new files.  And while I’ve somehow gotten used to status, log, fetch, pull, push, commit, rebase, branch, checkout, cherry-pick, and whatever Git commands are out there, I still needed that extra feeling of security of seeing file changes, and git diff wasn’t enough.

That’s when I discovered SourceTree.  It’s a free graphical interface application for Git.  The topmost panel shows the history of your branch.  The bottom left shows the files that have been changed since your last commit.  The bottom right shows the differences between your working local file, highlighted on the left, and the committed version of the file.  And instead of typing out git commands in your terminal window, you can use the buttons and controls provided all around this app.  Personally, I have not abandoned the terminal and still do my git commands in there, but it’s always nice to be able to clearly see the diffs in a nice paneled layout before doing a commit or a push.

SourceTree
SourceTree