Start

End

Group

Website URL

Twitter

Skype

Location

Interests

I'm considering using Behaviors (Phaser.Plugin.Behavior) for my game, so I'm trying to understand if player movement could/should be modeled as a behavior, even if entity movement is accomplished via pathfinding (say EasyStar.js). There's no physics, btw.
So the basic idea is to use the the behavior's onUpdate method to do one of 3 things:
1) If path is not yet calculated, it will call the .calculate() method of EasyStar to advance the calculation processing
2) If the calculation is done, move the entity futher along the path, if not yet reached the target point
3) do nothing (or maybe remove the behavior?) if already arrived at target location.
Let me know if this looks like it could work or otherwise how Phaser.Plugin.Behavior and PathFinding could co-exist on a game.

Hi
If anyone is interested I created a basic enemy path chase system. It may be of use to someone else trying to make one themselves or to create a better version of it.
The basics of the sytem are quite simple (mainly 2 functions)
- I created a map array and a group of enemies
- In the update function I use the chaseMe() function for the enemies to use their "line of sight" to start the chase if the player isclose to the x and y on the stage
- If the player escapes, there is a short timer that will move the enemy (moveMonster() function) in a random direction where it may "see" you again and start the chase again
It is pretty basic - the demo is below, use cursor keys to move the player
http://html5gamer.mobi/projects/6/
You can view the source code in the browser (ctrl + u) or download the full demo in the zip file attached
Eric
6.zip

Contrary to the name, I am finding Easystar.js to be intensely not-easy.
I have created a tilemap in Tiled with: base, collision, and foreground layers. The collision layer consists of two tiles, a walkable (6669) and a non-walkable(540). I have set up easystar in my create and update loop as described in the docs (see below) but constantly get either "The path to the destination point was not found", or "Your start or end point is outside the scope of your grid.".
current code:
var level = map.layers[1].data;
easystar = new EasyStar.js();
easystar.setGrid(level);
easystar.setAcceptableTiles([6669]);
easystar.enableDiagonals();
easystar.enableCornerCutting();
easystar.findPath(player.x, player.y, 0, 0, function (path) {
console.log("HERE")
if (path === null) {
console.log("The path to the destination point was not found.");
} else {
for (var i = 0; i < path.length; i++) {
console.log("P: " + i + ", X: " + path.x + ",Y: " + path.y);
}
}
});
I have looked at just about every example, dissected every bit of code I can, and read every doc I can find on the subject matter but cant seem to make any headway.
Does anyone have any experience using easystar.js or pathfinding.js?

Good afternoon,
I was hoping that the community could look over my code and see if something needs to be adjusted. I recently started learning Javascript and I just started learning Phaser and easystar yesterday so this might all look ridiculous. At the moment all I am trying to accomplish is pathfinding the way it is done in a point and click adventure game such as Monkey Island or Day of the Tentacle from Lucasarts. I am trying to achieve it much how AGS(Adventure Game Studio) allows the user to set it up. Basically, you import a room image and then you draw over the room with a chosen color(Sort of like drawing a mask) all the area's that a character can walk and find a path to and from.
What I am trying to achieve in my code is the same principle above and I am trying to use easystar and Phaser to accomplish this. Let me explain my code:
I have three images: the 'background' image which will load up the image of the room the character will be in. 'walkablepath' will be the image that contains the image mask. Anything that is hot pink is where the character can walk. 'maincharacter' is the player character that will find the path when we click on a part of the screen we want the player to go to.
At start we will create a 'bmd' object, create the walkable grid and then destroy the bmd object. The 'bmd' object is what will hold the walkable mask information. It will match the same size as the room image. It will have complete transparency and will be overlaid over the background image, but not visible to the user. 'walkableGrid' will be the grid data that easystar will use to calculate the walkable paths. 'walkableRGB' will contain the RGB value of Hot Pink so that we can find the hot pink pixels. 'gridCollection' will collect the X and Y pixel data in the 'bmd' object and push it to the 'walkableGrid' as it goes through each pixel line from top to bottom. The code will do this by iterating through each X and Y pixel in a loop. After that is completed, the mask will be destroyed, easystar will have a setup to determine the acceptable tiles in the grid.
Function calculateWalkPath() will be called each time the user clicks on the screen and the game will try and calculate the path for the user to walk and move him to his destination. Please see the code below:
//Set the initial game paramters - Will start with 800x600 resolution and will use WebGL as a renderer and default back to Canvas if WebGL is not present.
var game = new Phaser.Game(800,600, Phaser.AUTO, '', { preload: preload, create: create, update: update});
var easystar = new EasyStar.js(); //Lets get easy star in here.
var bmd; //This will be the object that will take the pixel data of the scene.
//Assets that will be preloaded at start
function preload(){
game.load.image('background', 'assets/room1.png'); //The game room background that will be loaded.
game.load.image('walkablepath', 'assets/walkablepath.png'); //The room's walkable area.
game.load.image('maincharacter', 'assets/character.png', 32, 48); //The main characters animated spritesheet who will be walking around the room.
}
//The first function called when we start our game
function create(){
//We are going to obtain the width and height of the background room.
var backWidth = game.cache.getImage("background").width;var backHeight = game.cache.getImage("background").height;
bmd = game.make.bitmapData(backWidth, backHeight); //Getting ready to determine the room size and get the pixel data of the walkable path.
game.add.sprite(0,0,'background'); // Will add the room background to the desktop. It will place the upper left part of the image to the upper left part of the screen.
bmd.alpha = 0; //Let's make sure the image is completely invisible to the users eyes.
bmd.draw('walkablepath', 0, 0); //Will overlay the transparent walkable path over the background image.
var walkableGrid = new Array(); //Lets make the grid that easy star will define as the walkable points.
var gridCollection; //This will collect the 2 dimensional array grids and push it to the walkableGrid.
var walkableRGB = "255105180"; //This is the RGB value of the area's the user can walk on. - Hot Pink is the RGB Color
//Following code will begin at the top left corner of the walkable area and check each pixel for the hot pink color. If it finds it, it will add a 0. If not, 1.
for (i = 0; i < backWidth; i++) {
gridCollection = "[";
for (j = 0; j < backWidth; j++) {
if (bmd.getPixelRGB(i, j) == "255105180"){
gridCollection = gridCollection + "0";
} else {
gridCollection = gridCollection + "1";
}
//If there is still more width in the image, it will add a comma. Otherwise it won't and the array can be closed off.
if (j != backWidth) {
gridCollection = gridCollection + ",";
}
}
//Close up and then Push the Array to the walkable grid
gridCollection = gridCollection + "]";
walkableGrid.push(gridCollection);
}
bmd.kill(); //let's destroy the walkable area path we created from view - we need to find a better way to do this process.
easystar.setGrid(walkableGrid); //Let's add the 2 dimensional grid array we just created to Easy star's pathfinding grid.
easystar.setAcceptableTiles([0]); //Let's also make sure that easy star is aware that the 0 tiles are the tiles that the player can walk on.
}
function update(){
}
function calculateWalkPath() { //This function will be called every time the user clicks on a path to walk to.
//Now let's calculate the path and presumably use tweening to move the character from it's current x and y position to it's next calculated position
easystar.findPath(xClickDest, yClickDest, playerXpos, playerYpos, function( path ) {
if (path === null) {
//Do something like a shrug animation from the character for not being able to find a path.
} else {
game.add.tween(maincharacter).to( { x: path[0].x }, 2000, Phaser.Easing.Linear.None, true);
game.add.tween(maincharacter).to( { y: path[0].y }, 2000, Phaser.Easing.Linear.None, true);
}
});
//Let's get this party started.
easystar.setIterationsPerCalculation(1000);
easystar.calculate();
}
I have to admit, I did not test this code yet. I rather have a fresh pair of eyes on this as I spent a good half hour trying to figure this out today and feel rather brain dead. Now, my questions are these: Will this code operate correctly? Did I use Phaser and Easystar correctly? What about memory management and speed and what is a better way to manage this? How would you improve it? Also, can I set more than one acceptable tile for easystar and how?
Thanks for looking and for your assistance.

Twitter - Subreddit - Dev Blog - Discord
Hello my name is Sam, I'm also the lead artist for Super Combat Squadron. We're a small indie dev team trying to put out a lightweight browser RTS. It's been just myself and one other programmer been developing the game for about a year now but, due to unforeseen circumstances, the lead programmer has had to take a step away from the project for personal reasons. I'm still in contact with him for help in the transitionary period but I'm looking to replace him on the team with some new programmers.
Currently we just completed our first internal playtest and got some good feedback from that, and the roadmap for the future was to push towards the first public demo, and then if the feedback looks good and things work out, were considering running a Kickstarter or other crowdfunding attempt to get the funding to take the game further.
The ideal skill set we're looking for would include:
Phaser and JavaScript (goes without saying).
A previous title or some example of your work with Phaser.
Possessing a strong focus on:
Networking
Pathfinding
AI
Loves and plays RTS or MOBA games a bonus.
Your position in all this would be helping tackle some bugs and featured we identified and fixing some issues blocking a public demo release. We're trying to cut the fat and make it purely a bee-line to public demo release. As previously mentioned, I'd love for it to transition into a longstanding paying role through crowdfunding, worst case scenario we stop at public demo release if the interest just isn't there.
If you are interested, you can contact me here, or at our email address: laxvikinggames@gmail.com

I'm developing point&click quest adventure (something like Machinarium)
I have a background, for example, like on the bkg1.ipg
I want to define some zone where the character can move. Example on bkg1-marked.jpg. Reaching the end of the red zone the character should stop.
Also, it would be great to have ability to make it with some pathfinding like f.e. there are stairs on the background image and the character stays somewhere else on the "first floor". Player clicks on top of the stairs and the character goes there, according to the zone where he can walk
Does Phaser have any tools for that?

Hey guys!
I make this zombie game: https://pietrzakacper.github.io/Project-Nostradamus/build/
As you can see on the demo, zombies do not react on each other. For now they have only set of predefined points that they should move on. I calculate path to each point using EasyStar.js. My question is, how should I manage zombies movement, so they won't block themselves. I tried updating grid for EasyStar with zombies positions and recalculating path every frame ( or every certain time ) but this didn't work. I thought of implementing Boids algorithm ( mainly separation rule ) but I am not sure how will this work with head-on collisions. Do you have any ideas how can I solve this ?
Here is the code: https://github.com/pietrzakacper/Project-Nostradamus/tree/master/src

I want to clone what this Russian guy achieved for my game exactly but the programmer says that its not physically possible to do anything other than A* based grid movement. It's incredibly frustrating because I've seen Atari games where entities on screen can pathfind around without the need of a grid but still colliding with each other and respecting collisions with the grid, and he hasn't been able to explain to me what's so hard about pathfinding that isn't A* based because I've seen a thousand games that do it before us no problem at all.
Like, how do you program pathfinding and collision like THIS?

So I kinda need a bit of help with pathfinding. I have been using the Easystar.js library as well as this pathfinding plugin for Phaser to do pathfinding for my topdown game.
I ended up with this in my update function:
testenemy.forEach(function(item) {
//pathfinding portion
let tilemap = teststageMap;
pathfinder.setCallbackFunction(function(path) {
item.path = path || [];
for(i = 0; i < item.path.length; i++) {
let goingX = item.path[i].x;
let goingY = item.path[i].y;
this.game.physics.arcade.moveToXY(item, goingX * 32, goingY * 32, 75);
}
});
pathfinder.preparePathCalculation([Math.round(item.x / 32), Math.round(item.y / 32)], [Math.round(testplayer.x / 32), Math.round(testplayer.y / 32)]);
pathfinder.calculatePath();
}, this);
However instead the enemy following a path around walls to get to the target player, the enemy just blindly takes a straight path towards the player so it wouldn't be able to get to me if there were any walls in it's path.
Please help! I have been stuck at this problem for days and i don't know what to do!

Hi everyone
I'm implementing a 3d map with just some squares and I wanna know what's the best way to make a pathfinding algorithm between these squares...
My first thought was loading a mesh with just the path, but i'm not sure what will i need to implement and what babylon already has.
Can someone give me some tips? I already implemented the A*, but just with divs...
Thanks in advance!

Hello people, I am making a little isometric game and I need to determine some range of movement. So I wanted to know if someone had a efficient way to get the positions of every tile that the player can reach. Here is a visual exemple of what I need. I've already have basic A* pathfinding. Thanks

I use easystarJS and the PhaserPlugin to generate coordinates for pathfinding. This works well and I've got an array called "Path" which contains every x/y coordinates that a sprite should be moved to. The pathfinding "Event" fires 1 time when clicking on a map layer. some code: this.findPathTo = function(tilex, tiley) { pathfinder.setCallbackFunction(function(path) { //callback with path var path = path; //path array with ever x / y coordinate for every tile to walk over for (var i = 0, ilen = path.length; i < ilen; i++){ var num = i;/* setTimeout(function(){// This is a bad idear, what to put here? console.log(path[num]); reference.DBugger.x = path[num].x * 20; reference.DBugger.y = path[num].y * 20; }, 100);*/ } }); pathfinder.preparePathCalculation([0,0], [tilex,tiley]); //pathfinding functions pathfinder.calculatePath(); //pathfinding functions }What I want to achieve is that the Sprite => reference.DBugger (Sprite for testing) moves through all the coordinates in that array piece by piece. If I uncomment that function atop, the sprite is already at the position were I have clicked. The best way would be some function that checks when the sprite has reached path[0] coordinates and then applies path[1] coordination and so on. any suggestions? kind regards

Hello all, I'm having super hard time while trying to implement https://github.com/bgrins/javascript-astar to my testproject @ http://eljuko.com/pathfindingTest/ you can see the js source here http://eljuko.com/pathfindingTest/scripts/main.js I'm getting pretty frustrated with this since it "almost" works but not at all . So please help the stupid to right direction. known issues; - u can't click twice in the same spot. or ofc u can but it wont fire. - sometimes fails to create path - silly waypoints sometimes - grid in -90 degree angle?! EDIT: after few hours of more buttscratching, i kinda start to get to bottom of this. something is not removing the goal node from the closed list when the object reaches its destination. anyone knows this plugin? If anyone knows how to get this working or can provide an algorithm that works; i'll be forever grateful Thanks, eljuko - the stupid

Hi, i tried to create a simple game where u can move a player over a mesh with clicks. i browsed already the realted topics in this forum and took as much i could from there. the world should be a simple island and i took the rabbit from the samples as the player. all files here: https://www.dropbox.com/sh/9o3qq6zv2zt9qjc/AABZZrUQQ1dTYC3WA-xJPyv_a?dl=0%2C now there are few things i got to ask: 1. click to move: i tried few things to get the player turning to the click like e.g. in polycraft. best result was that the rabbit was always turning his back to the click XD 2. pathfinding: if we place things like trees on the ground, how to get the rabbit move around them automatically? is there anything built-in from babylon for pathfinding or anyone already tried pathfinding.js in 3D context? 3. gravity: which way is better? physics or move with collision and apply the gravity like in the code? i would like to have a linear moving the wohle time, in example when the rabbit goes up. I think this would be enough for the beginning, any suggestions are welcome

My Litle Testing project of a tower defense game : This is my first experience with pixijs and to do a game .. http://js.aapvp.com/ In this project you have colision detection .. Path finding with https://github.com/qiao/PathFinding.js/ Its in 2d Bird View Well comment is welcome Feel Free to use code if needed !!

So I'm trying to figure out pathfinding for my game which is a little different from your typical top-down tilemap game. The main difference is that sprites need to be able to walk around other sprites but the sprites themselves aren't confined to tiles. i.e. a sprite can be any width, any dimension and take up space on as many tiles based on its dimensions and position on the world map. This creates a unique problem because I cannot define tiles as walkable and non-walkable (and therefore, cannot use the famous pathfinding plugin for phaser) ... the sprites themselves need to be walkable and non-walkable. But I honestly don't have the time, inclination or know-how to rewrite the plugin for sprites. I understand the advanced math behind pathfinding - so, my first plan was to create a fake tilemap layer the plugin could use with really small tiles. The game would update the tiles as walkable, non-walkable whenever a sprite moved ... the idea of the really small tiles was to be able to accommodate any size sprite with a multitude of tiles (5 x 5 tiles would work if the smallest sprite was 10 x 10). This, of course, proved to have major performance issues (just try making a tilelayer with tiles 5x5 and the width/height of the layer being 1000/1000)! so I'm now of the opinion it's not a viable option for pathfinding. I think, however, if I overlayed a JS grid system of some sort (instead of using a fake performance-heavy tilemap layer) which translated to the tilemap matrix the pathfinder plugin uses, it could work. But I don't know. To be honest, I'm completely confused, and running around in circles. I would appreciate any help/direction from those more experienced than me. Thanks!

While using the AStar.js plugin (from the official Phaser plugin repository), I have been running into a strange bug. Whenever I try to find a path between any two points on my map, the findPath function returns a path of zero length every time. Even more odd, the path, regardless of where I set it to begin or end, always has a start point and goal of (32, 47). This point does exist on my map and is the closest walkable tile to the bottom-right of the map, but there appears to be nothing else of significance about it. It is never mentioned in my code; the number 47 does not even exist in any of my files. The path should not cross that point and a quick manual calculation of A* on my map suggests that (32, 47) would not even be considered, since it should find a direct path to the goal fairly quickly. Does anyone know what might be causing this problem? The only useful tutorial I found online specific to this plugin is the example by Rafarel that is currently a pull request for the Phaser Examples repository. I copied parts of it directly and still had the same bug. If anyone else has a tutorial or example of using this plugin they would like to share, I (and probably quite a few others) would appreciate it, especially if it showed a common use of A* in games, such as pathfinding for multiple characters. Some relevant code: this.AStar = this.game.plugins.add(new Phaser.Plugin.AStar(this));this.AStar.setAStarMap(this.tileMap, 'Tile Layer 1', 'tiles_3_final');this.pathfindKey = this.input.keyboard.addKey(Phaser.Keyboard.ONE);this.pathfindKey.onDown.add(this.pathfindFromCharToChar, this);pathfindFromCharToChar: function() { var path = this.AStar.findPath(new Phaser.Point(40, 18), new Phaser.Point(9, 17)); // var path = ast.findPath(this.player.tilePos, this.otherChar.tilePos); // I tried this and several other ways to get points; // I can confirm that the method of passing the points // in is not part of the problem. this.player.tilePos.x = path.nodes[3].x; // Returns an error, as the path, which should be ~42 nodes long (43 with the start point), // is only 1 node long. this.player.tilePos.y = path.nodes[3].y; this.player.x = tilePos.x*32; this.player.y = tilePos.y*32;},EDIT: After some more digging around in the console, I found some information that might be useful. Forgive me if I ramble on a bit, but I figure that I might as well, since anyone who tries to help either has already gone through the exact same issue and can skip it, or would otherwise have to go through this whole process themselves. The findPath() function is properly passed the correct startPoint (40, 18) and goalPoint (9, 17). However, both start and goal return an AStarNode with an x and y of (32, 47), meaning that something happens in the below segment of code in AStar.js to cause the bug. I can confirm that _tilemap, _layerIndex, goalPoint.y, and goalPoint.x all reference the proper things. Going into properties.astarNode at the correct locations show that the astarNode.x and astarNode,y are set to 32 and 47, respectively. Phaser.Plugin.AStar.prototype.findPath = function(startPoint, goalPoint){ var path = new Phaser.Plugin.AStar.AStarPath(); var start = this._tilemap.layers[this._layerIndex].data[startPoint.y][startPoint.x].properties.astarNode; //:AStarNode; var goal = this._tilemap.layers[this._layerIndex].data[goalPoint.y][goalPoint.x].properties.astarNode path.start = start; path.goal = goal; this._open = []; this._closed = []; this._visited = []; this._open.push(start); ...}While searching for examples originally, I found this Stack Overflow question about AStar.js. I ignored it at the time, but thankfully remembered now. Of course, it remains unanswered, but it did point out that each AStarNode contains the x and y coordinates of the last location to use the same tile as it. So (0, 0), using tile 5, is marked as being at (49, 49), as is everything else that uses tile 5. Likewise, everything using tile 16 is marked as (32, 47). I hadn't noticed since 16 is the only currently used walkable tile, and I didn't think to try using AStar on a non-walkable tile. So the next thing to look at is where the astarNode property is set up on each tile. The updateMap is automatically called when you setup a map for AStar, and can also be manually called after a change to the map. I set up some variables (not shown below) to track whatever the previous tile was so I could check the astarNode property and see if the x and y are changing. Phaser.Plugin.AStar.prototype.updateMap = function(){ var tile; var walkable; //for each tile, add a default AStarNode with x, y and walkable properties according to the tilemap/tileset datas for(var y=0; y < this._tilemap.height; y++) { for(var x=0; x < this._tilemap.width; x++) { tile = this._tilemap.layers[this._layerIndex].data[y][x]; walkable = this._tilemap.tilesets[this._tilesetIndex].tileProperties[tile.index - 1][this._walkablePropName] !== "false" ? true : false; tile.properties.astarNode = new Phaser.Plugin.AStar.AStarNode(x, y, walkable); } }};And apparently, as expected, they are. Going through it line by line, and checking for changes, I can tell that it is line 166 that is changing it. And so the next stop is in the AStarNode constructor, shown below (with comments removed for length). Phaser.Plugin.AStar.AStarNode = function(x, y, isWalkable){ this.x = x; this.y = y; this.g = 0; this.h = 0; this.f = 0; this.parent; this.walkable = isWalkable; this.travelCost;};The console says nothing unexpected happens there (not that I really expected anything to). So I am stuck once again. Somehow, this line of code... tile.properties.astarNode = new Phaser.Plugin.AStar.AStarNode(x, y, walkable);...or a related line is causing other tiles to have their properties changed. All I can think of is that somehow an update to Phaser may have broken this plugin, as it doesn't appear to have been updated since 2.0.4 (at least). I read back through about half of Phaser's entire changelog and cannot see anything that obviously would break this plugin. So that's everything I have found out. Does anyone else who knows more about changes in how Phaser deals with tile properties (or anyone else) know anything that might be causing this problem?

Hello everyone, I'm actually working on a Phaser Game. I'm already done a pathfinding for getting the path my soldier should take. Now I would like to make tweens for it and create a chained tween with each tile of the path. Every infos I found don't speak about creating a tween object. Like it we could add new steps to it and after assign it to a sprite for example and play it. Sorry for my english... (FrenchStyle ^^) github : GreG28

Hi all, today y manage to make my little AI exercise to work, it's a classical path finding exercise using A* to solve, this is my first JS medium/heavy project and it can be improved A LOT mainly because I did the A star thing myself from scratch which was fun but hard. It needs some cool animations and player control improvements but if you run it and open the console you can see all the steps to solve it when I'm finished it will be on my website but for the time being here is the source code. If any one could check it out and tel me if something could get improved i will appreciate it a lot I have being studding JS and checking other people code and I think I did good practices but I'm not sure. (I'ts SLOW so if you run it it may look like it will crash but hang on and it will solve the puzzle , I think this is because my heuristic isn't the best but i will try different one soon) If someone is interested o could do a tutorial for this so let me know.

Hi guys! I'm testing phaser for a small game that i'm doing. I noticed that there is no pathfinding implemented in phaser. Which libraries are you using for this? I've used "Pathfinding.js" in the past, but it requires a matrix grid. The data property in the tilemaps of phaser are stored in a single array, instead of a matrix. So using this library requires me to keep replicating the changes in the tilemap data property into a matrix. How can achieve this more easily?