Adventure Game Studio | Forums

Community => General Discussion => Topic started by: Joseph DiPerla on Sat 30/09/2017 15:12:48

Title: Solved!Thx Khris! Phaser.io & Easystar to recreate AGS Pathfinding in Javascript
Post by: Joseph DiPerla on Sat 30/09/2017 15:12:48
(See the next post down by Khris for the solution)

Good morning,

Disclaimer: I apologize if this is in the wrong forum. Mods, feel free to move or even delete. I was looking to see if the "Ask your questions" thread was stickied around somewhere, but no dice. So maybe you can all help here.

I was trying to use Javascript and the frameworks Phaser.io and easystar.js to recreate pathfinding the way it is accomplished in AGS using masks and such. I can't seem to figure it out. I figured since we have some AGS developers here and adventure gamers, maybe this might work out better with your help. I have tried Stack Overflow and HTML Game Dev Forums and still do not have an answer. Contacting the authors of the frameworks resulted in no response. So maybe as a community here, you can all put my brain to rest on the matter.

You can see the other posts I made on this here: http://www.html5gamedevs.com/topic/30836-need-help-to-fix-making-an-adventure-game-pathfinding-room-using-easystar-and-phaser/
https://stackoverflow.com/questions/44359015/pathfinding-via-an-image-mask-using-phaser-and-easystar-in-javascript-path-not
Maybe what others have been saying in those threads might work as inspiration or a muse for you in helping me here.

Basically I Want to recreate a room image and a mask. The character can walk around the room only where the mask is colored in a certain color(Pink in this case) and use easystar to calculate the path. But it seems the mask and the image are not syncing up correctly.

Here is my demo: http://www.sw-bfs.com/examples/udemy/  You can use the Java console to see what is happening.
This is the room background: http://www.sw-bfs.com/examples/udemy/assets/room1.png
The walkable path I am using as a path: http://www.sw-bfs.com/examples/udemy/assets/walkablepath.png
The character image: http://www.sw-bfs.com/examples/udemy/assets/character.png

The latest code I wrote for this:
Code (ags) Select
//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.
bmd.load('walkablepath'); //This will load the walkable path into memory.
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.
mainchar = game.add.sprite(200,516,'maincharacter'); // 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.

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 = "rgba(255,105,180,1)"; //This is the RGB value of the area's the user can walk on. - Hot Pink is the RGB Color
var color; //Will contain the pixel color of where the walkablepath search index is on.

//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 < backHeight; j++) {
color = bmd.getPixelRGB(i, j); //Store the color date of X and Y pixel



if (color.rgba == walkableRGB){

gridCollection = gridCollection + "0";

}

if (color.rgba != walkableRGB) {

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 (i != backWidth) {
gridCollection = gridCollection + ",";

}


}
//Close up and then Push the Array to the walkable grid
    gridCollection = gridCollection + "]";
walkableGrid.push(gridCollection);



      }
     
bmd.destroy(); //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.
game.input.onDown.add(calculateWalkPath, this);



}

function update(){

}

function calculateWalkPath() {  //This function will be called every time the user clicks on a path to walk to.
console.log(game.input.x + ", " + game.input.y + "/");
console.log(mainchar.x + ", " + mainchar.y + "/");
//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(game.input.x, game.input.x, mainchar.x, mainchar.y, function( path ) {

if (path === null) {
//Do something like a shrug animation from the character for not being able to find a path.
} else {

mainchar.x = path[0].x;
mainchar.y = path[0].y;
console.log(path[0].x);
console.log(path[0].y);

}
});

//Let's get this party started.
easystar.setIterationsPerCalculation(1000);
easystar.calculate();

}


Any suggestions for you gurus on how to make this work a little better?
Title: Re: Maybe you can all help: Phaser.io and Easystar to recreate AGS Pathfinding in JS
Post by: Khris on Mon 02/10/2017 15:01:54
You're composing an array by creating a string of characters. While that's possible if you're calling JSON.parse() on the result I guess, what you need to do is to create an actual array:
Code (javascript) Select
var array = [];
array.push(0);
array.push(1);


Next, the code you have borks here:
Code (javascript) Select
if (path === null) {
mainchar.x = path.x;

You're specifically making sure path is null, and only then try to access a member of it. How is that supposed to work?

Also, please do not confuse JavaScript and Java. Despite the misleading name, the two are completely unrelated, separate languages.

I'll take a look at your script and will come back with suggestion.


Edit: got it: https://github.com/khrismuc/phaser-a-star
Live demo: https://khrismuc.github.io/phaser-a-star/index.html
Title: Re: Maybe you can all help: Phaser.io and Easystar to recreate AGS Pathfinding in JS
Post by: Joseph DiPerla on Mon 02/10/2017 16:26:04
Holy smokes! You did it! This is awesome. Thanks Kris!
Title: Re: Maybe you can all help: Phaser.io and Easystar to recreate AGS Pathfinding in JS
Post by: eri0o on Wed 04/10/2017 01:17:08
Hey Joseph!

I see your problem is solved.

I have some old code for a basic proof of concept of the follow path in a picture in javascript.

code repo (https://github.com/ericoporto/TouchyEngine)

live demo (https://ericoporto.github.io/TouchyEngine/)

At the time I got my pathfinding code from Xueqiao Xu's PathFinding.js (https://experiments.withgoogle.com/chrome/pathfindingjs). My code part is making images become a grid to be fed on the pathfinding algorithm. So maybe this is useful for you. Here's the link for the Repo for Xueqiao Xu's PathFinding.js (https://github.com/qiao/PathFinding.js).
Title: Re: Maybe you can all help: Phaser.io and Easystar to recreate AGS Pathfinding in JS
Post by: selmiak on Wed 04/10/2017 08:12:04
interesting things you code there.

Why don't you just use unity to make adventures for the browser? :=
Title: Re: Solved! Thanks Khris: Phaser.io and Easystar to recreate AGS Pathfinding in JS
Post by: Joseph DiPerla on Wed 04/10/2017 14:16:10
That's pretty interesting Eri0o! I believe that is a similar system to what I was trying to do. I basically took every pixel from the mask and translated it to a walkable area based on it's pixel data. Each Pixel then became a spot on the Grid for EasyStar to find.

Selmiak: While I think unity is a powerful system and also free with the option to port to many other OS, there are still restrictions to it and there is also a learning curve as well. As much as I like Adventure Creator, creating games on it is not as easy as AGS or as easy as your own personal system. Plus, doing these things is a fun learning experience and gives some personal satisfaction. I Was hoping to learn to create an adventure game engine so that maybe one day I can also offer a portable port of AGS in the future.