Search the Community

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.

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! I need some help with pathfinder written in phaser and easystar. I'm not too experienced with it, but I trying mix it togather :> Look at code (sorry for chaos... its my 1000`th attempt .__. ) There is probably one little mistake and it doesnt work :< daaamn map 40x40 tiles: 1,2,3,4 --> acceptable 1 and 4. Thanks! var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); var easystar = new EasyStar.js(); var currentCowboyXtile var currentCowboyYtile function preload() { game.load.tilemap('desert', 'img/desert.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', 'img/objects.png'); game.load.image('bullet', 'img/bullet.png'); game.load.image('arrow', 'img/arrow.png'); game.load.image('cactus1', 'img/cactus1.png'); game.load.image('cowboy', 'img/arrow.png'); currentCowboyXtile = 400; currentCowboyYtile = 400; } var map; var layer; var marker; var currentTile; var cursors; var sprite; var weapon; var fireButton; var enemyDirection; var tileSize = 32; var mapSize = 40; var currentPlayerXtile; var currentPlayerYtile; easystar.setGrid(map); easystar.setAcceptableTiles([1,4]); easystar.enableDiagonals(); easystar.enableCornerCutting(); easystar.setIterationsPerCalculation(1000); easystar.enableDiagonals(); function create() { obstacleGroup = game.add.group(); game.add.tileSprite(0, 0, 1920, 1920, 'desert'); game.world.setBounds(0, 0, 1920, 1920); game.physics.startSystem(Phaser.Physics.ARCADE); map = game.add.tilemap('desert'); map.addTilesetImage('Desert', 'tiles'); currentTile = map.getTile(24, 28); layer = map.createLayer('Ground'); layer.resizeWorld(); marker = game.add.graphics(); marker.lineStyle(2, 0x000000, 1); marker.drawRect(0, 0, 32, 32); cursors = game.input.keyboard.createCursorKeys(); /////////////////////////////////////////////// // Creates 30 bullets, using the 'bullet' graphic weapon = game.add.weapon(30, 'bullet'); // The bullet will be automatically killed when it leaves the world bounds weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; // Because our bullet is drawn facing up, we need to offset its rotation: weapon.bulletAngleOffset = 90; // The speed at which the bullet is fired weapon.bulletSpeed = 700; // Speed-up the rate of fire, allowing them to shoot 1 bullet every 60ms weapon.fireRate = 90; // Add a variance to the bullet angle by +- this value weapon.bulletAngleVariance = 5; sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'arrow'); sprite.anchor.setTo(0.5, 0.5); cowboy = game.add.sprite(currentCowboyXtile, currentCowboyYtile, 'arrow' ,obstacleGroup); cowboy.anchor.setTo(0.5, 0.5); //map.putTile(30, 30, 10, layer); map.setCollisionByExclusion([1,4]); game.physics.enable(sprite, Phaser.Physics.ARCADE); game.physics.enable(cowboy, Phaser.Physics.ARCADE); sprite.body.collideWorldBounds = true; //game.physics.startSystem(sprite, Phaser.Physics.P2JS); weapon.trackSprite(sprite, 18, 6, true); game.camera.follow(sprite, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); ///////////////////////////////////////////////////////// fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR); var cactus1; for (var yt = 0; yt < map.length; yt++) { var tile = map[yt]; for (var xt = 0; xt < map[yt].length; xt++) { if (tile[xt] == 1) { cactus1 = game.add.isoSprite(xt * tileSize, yt * tileSize, 0, 'cactus1', 0, obstacleGroup); } else if (tile[xt] == 2) { cactus1 = game.add.isoSprite(xt * tileSize, yt * tileSize, 0, 'cactus2', 0, obstacleGroup); } if (tile[xt] == 1 || tile[xt] == 2) { cactus1.anchor.set(0.5); // Let the physics engine do its job on this tile type game.physics.enable(cactus1, Phaser.Physics.ARCADE); // This will prevent our physic bodies from going out of the screen cactus1.body.collideWorldBounds = true; // Make the cactus body immovable cactus1.body.immovable = true; } } } setInterval(function(){ easystar.findPath(currentCowboyXtile, currentCowboyYtile, currentPlayerXtile, currentPlayerYtile, function( path ) { if (path === null) { console.log("The path to the destination point was not found."); } if (path) { currentNextPointX = path[1].x; currentNextPointY = path[1].y; } if (currentNextPointX < currentCowboyXtile && currentNextPointY < currentCowboyYtile) { // left up console.log("GO LEFT UP"); enemyDirection = "NW"; } else if (currentNextPointX == currentCowboyXtile && currentNextPointY < currentCowboyYtile) { // up console.log("GO UP"); enemyDirection = "N"; } else if (currentNextPointX > currentCowboyXtile && currentNextPointY < currentCowboyYtile) { // right up console.log("GO RIGHT UP"); enemyDirection = "NE"; } else if (currentNextPointX < currentCowboyXtile && currentNextPointY == currentCowboyYtile) { // left console.log("GO LEFT"); enemyDirection = "W"; } else if (currentNextPointX > currentCowboyXtile && currentNextPointY == currentCowboyYtile) { // right console.log("GO RIGHT"); enemyDirection = "E"; } else if (currentNextPointX > currentCowboyXtile && currentNextPointY > currentCowboyYtile) { // right down console.log("GO RIGHT DOWN"); enemyDirection = "SE"; } else if (currentNextPointX == currentCowboyXtile && currentNextPointY > currentCowboyYtile) { // down console.log("GO DOWN"); enemyDirection = "S"; } else if (currentNextPointX < currentCowboyXtile && currentNextPointY > currentCowboyYtile) { // left down console.log("GO LEFT DOWN"); enemyDirection = "SW"; } else { enemyDirection = "STOP"; } }); easystar.calculate(); }, timeStep); } function update() { game.physics.arcade.collide(sprite, layer); marker.x = layer.getTileX(game.input.activePointer.worldX) * 32; marker.y = layer.getTileY(game.input.activePointer.worldY) * 32; if (game.input.mousePointer.isDown) { /* if (game.input.keyboard.isDown(Phaser.Keyboard.SHIFT)) { currentTile = map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)); } else*/ { if (map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)) != currentTile) { map.putTile(currentTile, layer.getTileX(marker.x), layer.getTileY(marker.y)) } } } if (game.input.keyboard.isDown(Phaser.Keyboard.A)) { game.camera.x -= 4; } else if (game.input.keyboard.isDown(Phaser.Keyboard.D)) { game.camera.x += 4; } if (game.input.keyboard.isDown(Phaser.Keyboard.W)) { game.camera.y -= 4; } else if (game.input.keyboard.isDown(Phaser.Keyboard.S)) { game.camera.y += 4; } if (fireButton.isDown) { weapon.fire(); } ////////////////////////////////////////////////// sprite.body.velocity.x = 0; sprite.body.velocity.y = 0; sprite.body.angularVelocity = 0; if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { sprite.body.angularVelocity = -250; } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { sprite.body.angularVelocity = 250; } if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) { game.physics.arcade.velocityFromAngle(sprite.angle, 125, sprite.body.velocity); } else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { game.physics.arcade.velocityFromAngle(sprite.angle, -125, sprite.body.velocity); } /////////////////////////////////////// var enemySpeed = 90; if (enemyDirection == "N") { cowboy.body.velocity.x = -enemySpeed; cowboy.body.velocity.y = -enemySpeed; } else if (enemyDirection == "S") { cowboy.body.velocity.x = enemySpeed; cowboy.body.velocity.y = enemySpeed; } else if (enemyDirection == "E") { cowboy.body.velocity.x = enemySpeed; cowboy.body.velocity.y = -enemySpeed; } else if (enemyDirection == "W") { cowboy.body.velocity.x = -enemySpeed; cowboy.body.velocity.y = enemySpeed; } else if (enemyDirection == "SE") { cowboy.body.velocity.x = enemySpeed; cowboy.body.velocity.y = 0; } else if (enemyDirection == "NW") { cowboy.body.velocity.x = -enemySpeed; cowboy.body.velocity.y = 0; } else if (enemyDirection == "SW") { cowboy.body.velocity.x = 0; cowboy.body.velocity.y = enemySpeed; } else if (enemyDirection == "NE") { cowboy.body.velocity.x = 0; cowboy.body.velocity.y = -enemySpeed; } else if (enemyDirection == "STOP") { cowboy.body.velocity.x = 0; cowboy.body.velocity.y = 0; } else // JUST IN CASE IF enemyDirection wouldnt exist we stop the cowboy movement { cowboy.body.velocity.x = 0; cowboy.body.velocity.y = 0; } currentPlayerXtile = Math.floor(sprite.body.position.x / tileSize); currentPlayerYtile = Math.floor(sprite.body.position.y / tileSize); if (currentPlayerXtile < 0) currentPlayerXtile = 0; if (currentPlayerYtile < 0) currentPlayerYtile = 0; if (currentPlayerXtile > 28) currentPlayerXtile = 28; if (currentPlayerYtile > 28) currentPlayerYtile = 28; currentCowboyXtile = Math.floor(cowboy.body.position.x / tileSize); currentCowboyYtile = Math.floor(cowboy.body.position.y / tileSize); // PREVENT FROM GOING OUT FROM THE LOGICAL ARRAY BECAUSE OF THE PHASER PHYSICS ENGINE if (currentCowboyXtile < 0) currentCowboyXtile = 0; if (currentCowboyYtile < 0) currentCowboyYtile = 0; if (currentCowboyXtile > 28) currentCowboyXtile = 28; if (currentCowboyYtile > 28) currentCowboyYtile = 28; } function render() { }

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

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!

I'm using easystar plugin for phaser and there's something wrong about it. I don't know maybe my configurations is wrong, but i often get f*cked up path. Here's my config: easystar.enableDiagonals();easystar.disableCornerCutting();easystar.setGrid(grid);easystar.setAcceptableTiles([1]); grid: [ [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ] ]Results (green tiles is calculated path):