Setting up an environment
To get started you will need to create and initialize a grid object.
To create the grid you will need to use the Grid.js file.
this.mGrid = new Grid(100, 100);
The two integers represent how many cells in the x and y direction there are.
You will also want to set the position and size of the grid, both are in world coordinates, to make sure that it is aligned properly.
this.mGrid.setPosition(xPos, yPos);
this.mGrid.setWidth(width);
this.mGrid.setHeight(height);
this.mGrid.setSize(width, height);
After the grid is initialized you will want to add obstacles into the grid. There are two options to add obstacles.
Option 1: Import existing walls
Walls can be added to your scene from a json file. To add the walls you will need to use the SceneFileParser.js. Your json file has to set up the walls in form:
"Walls": [
{
"Color": [0, 1, 0.75, 1],
"Pos": [100, 70.3571428571],
"Width": 5,
"Height": 80
}, ...as many walls as you need
]
In your scene, you then only need to call
this.sceneParser.parseWalls("JSON", this.walls, this.mGrid);
Where sceneParser is a SceneFileParser object, this.walls is an empty gameObjectSet, and this.mGrid is your initialized grid.
Option 2: Add walls manually
If you do not want to use the SceneFileParser, you may create walls manually
Walls can be created as any object that has a .getXform() function. They then will be added to the grid using a .addStatic(object) function
//create the object
var wall3 = new Renderable();
wall3.setColor([0, 1, .75, 1]);
wall3.getXform().setPosition(250, 35);
wall3.getXform().setSize(10, 100);
//add the object to the grid
this.mGrid.addStatic(wall1);
Moving players
Once you have the grid initialized and have obstacles, you will want to use the Path.js file to find paths and move a player or npc.
Initialize the Path Object
this.sceneParser.parseWalls("JSON", this.walls, this.mGrid);
Where mGrid is the initialized grid and xform is the transform of the object that you want to be moved. After the Path object is created you will need to pass in a starting location and end location that you want the object to move towards.
this.mPath.findPath(startPos, endPos);
Both positions are an array that contains an x and y in world coordinates. You will now simply need to call update on the path object to start moving your object.
//in update function
this.mPath.update();
If you don’t call update on the path, it will never handle the movement for your player or npc.
If you want the object to follow a series of points you will need to define an array of world coordinate positions and call findMultiPath instead of findPath. It is still updated the same way
Var waypoints = [[x, y], [x, y], [x, y]]
this.mPath.findMultiPath(startPos, waypoints);
//in update function
this.mPath.update();