Phaser boilerplate + plug in (easy star)

[gblekk]

Hi, long time lurker now, first post. Many years experience in HTML/php, a few years poking around with game design with javascript, few weeks poking at phaser, which has led me to my first experiences working with GitHub, node, and grunt. So you know! This forum has been lots of help on many other problems I've come across.

I am loving working with Luke Wilde's phaser boilerplate (https://github.com/lukewilde/phaser-js-boilerplate), and I've succeeded with a bunch of builds using the built in arcade physics, however now I am really wanting to implement point-and-click path finding and I've become totally stuck. I have been trying to integrate the easystar.js plug in (https://github.com/appsbu-de/phaser_plugin_pathfinding) . I've been unable to figure out where in the boilerplate I should be calling the plug in js file so that my game level will recognize it. I get a console error stating it doesn't recognize the path finding variables no matter what I've tried. I've gotten the plug in demo working, but I'm not familiar enough the setup of the plug in git to reverse engineer where it's calling the plug in to make it compatible with the boilerplate. So far all I'm attempting is to recreate the plug in demo in the boiler plate. The game loads okay, the console error comes up when I click on the map.

Could anyone link me to an example of the boilerplate working with a plug in, any plug in, or point me in the right direction? maybe just an example of where I would call the plug in js and then how I would reformat the pathfinder variable lines properly? Days of google-fu have been fruitless. I've found documentation on phaser plug ins but not how to implement them.

Thanks!

[UgnisKarolis]

I have not used this boilerplate as I am using our internal boilerplate  https://github.com/UgnisSoftware/Phaser-Starter-Kit. But generally you should add phaser_pathfinding-0.2.0.min.js to your index.html. This plugin then exposes a global Phaser.Plugin.PathFinderPlugin, so you can reach pathfinder with:

pathfinder = game.plugins.add(Phaser.Plugin.PathFinderPlugin);

and then use easystar.js as usual:

pathfinder.setGrid(twoDimensionalArray);pathfinder.setAcceptableTiles(arrayOfAcceptableTiles);pathfinder.findPath(startX, startY, endX, endY, callback);pathfinder.calculate();

However I would not use this plugin or easystar.js at all . A better way would be to download https://github.com/qiao/PathFinding.js and add it to your index.html, it would expose PF so you could:

var finder = new PF.AStarFinder();

To return an array with path:

var path = finder.findPath(start.x, start.y, end.x, end.y, grid);

I have used them both in my Turn base strategy game and easystar.js was buggy and slow. But maybe they fixed it, I can't be sure.

Drop me a line if you need more help with pathfinding, I might be able to dig some examples with phaser.

[gblekk]

Thanks for the reply!  I'll give pathfinding.js and let you know if I have any issues. 

 

 

[gblekk]

Hi!  Would you be able to provide me with a real simple example of the pathfinding script in action? I can't find any examples of having a sprite actually move along the path, just how to draw it the path in front of them.

[UgnisKarolis]

https://github.com/UgnisSoftware/Phaser-Sample-Pathfinding I have included both pathfinders (PathFinding and EasyStar). The example sprite is located at https://github.com/UgnisSoftware/Phaser-Sample-Pathfinding/blob/master/public/javascripts/states/map/views/Hero.js. Feel free to ask if you have any more questions.

[gblekk]

Thank you again, so much!  The grunt is throwing me an error, but I have it running okay on a local server. I'll let you know if I have any questions when I've had a chance to dissect it. 

[lukewilde]

Howdy,

 

I realise this reply is too late to be useful for you, but maybe it'll help someone else.

 

Pulling other JavaScript files into your project can be done by updating the Browserify Shim configuration inside the project's package.json file. We do this because Browserify Shim is able to pack non CommonJS JavaScript into your single JS bundle.

 

After it's available in your bundle, you may have to require it in app.js to peg it onto Phaser.

 

Give me a shout @lukewilde if you get stuck