(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:
//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?
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:
var array = [];
array.push(0);
array.push(1);
Next, the code you have borks here:
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
Holy smokes! You did it! This is awesome. Thanks Kris!
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).
interesting things you code there.
Why don't you just use unity to make adventures for the browser? :=
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.