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.