Solved!Thx Khris! Phaser.io & Easystar to recreate AGS Pathfinding in Javascript

Started by Joseph DiPerla, Sat 30/09/2017 15:12:48

Previous topic - Next topic

Joseph DiPerla

(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
//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?
Joseph DiPerla--- http://www.adventurestockpile.com
Play my Star Wars MMORPG: http://sw-bfs.com
See my Fiverr page for translation and other services: https://www.fiverr.com/josephdiperla
Google Plus Adventure Community: https://plus.google.com/communities/116504865864458899575

Khris

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
var array = [];
array.push(0);
array.push(1);


Next, the code you have borks here:
Code: javascript
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

Joseph DiPerla

Joseph DiPerla--- http://www.adventurestockpile.com
Play my Star Wars MMORPG: http://sw-bfs.com
See my Fiverr page for translation and other services: https://www.fiverr.com/josephdiperla
Google Plus Adventure Community: https://plus.google.com/communities/116504865864458899575

eri0o

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

live demo

At the time I got my pathfinding code from Xueqiao Xu's PathFinding.js. 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.

selmiak

interesting things you code there.

Why don't you just use unity to make adventures for the browser? :=

Joseph DiPerla

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.
Joseph DiPerla--- http://www.adventurestockpile.com
Play my Star Wars MMORPG: http://sw-bfs.com
See my Fiverr page for translation and other services: https://www.fiverr.com/josephdiperla
Google Plus Adventure Community: https://plus.google.com/communities/116504865864458899575

SMF spam blocked by CleanTalk