Author Topic: Solved!Thx Khris! Phaser.io & Easystar to recreate AGS Pathfinding in Javascript  (Read 1185 times)

Joseph DiPerla

  • Joseph DiPerla, Adventure Game Creator Wannabe!
    • I can help with backgrounds
    • I can help with characters
    • I can help with play testing
    • I can help with story design
    • I can help with translating
    • I can help with voice acting
    • I can help with web design
(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: Adventure Game Studio
  1. //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.
  2. var game = new Phaser.Game(800,600, Phaser.AUTO, '', { preload: preload, create: create, update: update});
  3. var easystar = new EasyStar.js(); //Lets get easy star in here.
  4. var bmd; //This will be the object that will take the pixel data of the scene.
  5.  
  6. //Assets that will be preloaded at start
  7. function preload(){
  8.         game.load.image('background', 'assets/room1.png'); //The game room background that will be loaded.
  9.         game.load.image('walkablepath', 'assets/walkablepath.png'); //The room's walkable area.
  10.         game.load.image('maincharacter', 'assets/character.png', 32, 48); //The main characters animated spritesheet who will be walking around the room.
  11.        
  12.        
  13. }
  14.  
  15. //The first function called when we start our game
  16. function create(){
  17.         //We are going to obtain the width and height of the background room.
  18.         var backWidth = game.cache.getImage("background").width;var backHeight = game.cache.getImage("background").height;
  19.         bmd = game.make.bitmapData(backWidth, backHeight); //Getting ready to determine the room size and get the pixel data of the walkable path.
  20.         bmd.load('walkablepath'); //This will load the walkable path into memory.
  21.         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.
  22.         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.
  23.        
  24.         var walkableGrid = new Array(); //Lets make the grid that easy star will define as the walkable points.
  25.         var gridCollection;      //This will collect the 2 dimensional array grids and push it to the walkableGrid.
  26.         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
  27.         var color; //Will contain the pixel color of where the walkablepath search index is on.
  28.        
  29.         //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.
  30.         for (i = 0; i < backWidth; i++) {
  31.                
  32.                 gridCollection = "[";
  33.                
  34.                 for (j = 0; j < backHeight; j++) {
  35.                 color = bmd.getPixelRGB(i, j); //Store the color date of X and Y pixel
  36.                        
  37.                                                        
  38.                
  39.                 if (color.rgba == walkableRGB){
  40.                        
  41.                         gridCollection = gridCollection + "0";
  42.                        
  43.                 }
  44.                
  45.                 if (color.rgba != walkableRGB) {
  46.                        
  47.                         gridCollection = gridCollection + "1";
  48.                        
  49.                 }
  50.                
  51.                 //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.
  52.                 if (i != backWidth) {
  53.                         gridCollection = gridCollection + ",";
  54.                        
  55.                 }
  56.                
  57.                        
  58.         }
  59.         //Close up and then Push the Array to the walkable grid
  60.             gridCollection = gridCollection + "]";
  61.                 walkableGrid.push(gridCollection);
  62.        
  63.                
  64.                
  65.       }
  66.      
  67.         bmd.destroy(); //let's destroy the walkable area path we created from view - we need to find a better way to do this process.
  68.         easystar.setGrid(walkableGrid);  //Let's add the 2 dimensional grid array we just created to Easy star's pathfinding grid.
  69.         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.
  70.         game.input.onDown.add(calculateWalkPath, this);
  71.        
  72.        
  73.        
  74. }
  75.  
  76. function update(){
  77.        
  78. }
  79.  
  80. function calculateWalkPath() {  //This function will be called every time the user clicks on a path to walk to.
  81.         console.log(game.input.x + ", " + game.input.y + "/");
  82.         console.log(mainchar.x + ", " + mainchar.y + "/");
  83.         //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
  84.         easystar.findPath(game.input.x, game.input.x, mainchar.x, mainchar.y, function( path ) {
  85.                
  86.         if (path === null) {
  87.                 //Do something like a shrug animation from the character for not being able to find a path.
  88.         } else {
  89.                
  90.                 mainchar.x = path[0].x;
  91.                 mainchar.y = path[0].y;
  92.                 console.log(path[0].x);
  93.                 console.log(path[0].y);
  94.                
  95.         }
  96. });
  97.  
  98. //Let's get this party started.
  99. easystar.setIterationsPerCalculation(1000);
  100. easystar.calculate();
  101.  
  102. }

Any suggestions for you gurus on how to make this work a little better?
« Last Edit: 04 Oct 2017, 14:17 by 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

Khris

  • partook in silencing a crtitc despite facts
    • Lifetime Achievement Award Winner
    • I can help with play testing
    • I can help with scripting
    • I can help with translating
    • Khris worked on one or more games that was nominated for an AGS Award!
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
  1. var array = [];
  2. array.push(0);
  3. array.push(1);

Next, the code you have borks here:
Code: Javascript
  1. if (path === null) {
  2.         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
« Last Edit: 02 Oct 2017, 15:58 by Khris »
Fail at Floaty Rog' now!  still having to deal with what games are going through

Joseph DiPerla

  • Joseph DiPerla, Adventure Game Creator Wannabe!
    • I can help with backgrounds
    • I can help with characters
    • I can help with play testing
    • I can help with story design
    • I can help with translating
    • I can help with voice acting
    • I can help with web design
Holy smokes! You did it! This is awesome. Thanks Kris!
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

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

  • ǝsıɔɹǝxǝ ʞɔǝu puɐ uıɐɹq
    • I can help with play testing
    • I can help with proof reading
    • I can help with translating
    • I can help with web design
    • selmiak worked on one or more games that won an AGS Award!
    •  
    • selmiak worked on one or more games that was nominated for an AGS Award!
interesting things you code there.

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

Joseph DiPerla

  • Joseph DiPerla, Adventure Game Creator Wannabe!
    • I can help with backgrounds
    • I can help with characters
    • I can help with play testing
    • I can help with story design
    • I can help with translating
    • I can help with voice acting
    • I can help with web design
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