In this part the adjacent cells of the acual node are called. This can get handy if we want to implement some kind of pathfinding algorithm. The base for this code is part 2.2. See part 1 for the creation of the basic grid.
Here is what we are going to create. By clicking a tile its adjacent cells are shown. By the color of the line one can also distinguish between blocked and unblocked neighbors.
First we add a new MovieClip() right after the tileFocus clip.
var tileNeighbors = new MovieClip(); tileNeighbors.mouseEnabled = false; addChild(tileNeighbors);
The following code replaces the old mouseClickHandler:
function mouseClickHandler ( event:* ) { if ( actualNode !== null ) { if ( actualNode.blocked == false ) { actualNode.blocked = true; drawTile(actualNode.tileRef, 0x000000, 1); } else { actualNode.blocked = false; drawTile(actualNode.tileRef, 0x66ff66, 1); } var neighs:Array = getNeighbors(actualNode); tileNeighbors.graphics.clear(); for each ( var nObj in neighs ) { if ( nObj.blocked == false ) { tileNeighbors.graphics.lineStyle(1, 0x0000ff); tileNeighbors.graphics.drawRect(actualNode.xPos - 7.5, actualNode.yPos - 7.5, 15, 15); tileNeighbors.graphics.drawRect(nObj.xPos - 2.5, nObj.yPos - 2.5, 5, 5); tileNeighbors.graphics.moveTo( actualNode.xPos + ( nObj.xPos - actualNode.xPos ) * 0.25, actualNode.yPos + ( nObj.yPos - actualNode.yPos ) * 0.25); tileNeighbors.graphics.lineTo( nObj.xPos + ( actualNode.xPos - nObj.xPos ) * 0.1, nObj.yPos + ( actualNode.yPos - nObj.yPos ) * 0.1); } else { tileNeighbors.graphics.lineStyle(1, 0xff0000); tileNeighbors.graphics.drawRect(actualNode.xPos - 7.5, actualNode.yPos - 7.5, 15, 15); tileNeighbors.graphics.drawRect(nObj.xPos - 2.5, nObj.yPos - 2.5, 5, 5); tileNeighbors.graphics.moveTo( actualNode.xPos + ( nObj.xPos - actualNode.xPos ) * 0.25, actualNode.yPos + ( nObj.yPos - actualNode.yPos ) * 0.25); tileNeighbors.graphics.lineTo( nObj.xPos + ( actualNode.xPos - nObj.xPos ) * 0.1, nObj.yPos + ( actualNode.yPos - nObj.yPos ) * 0.1); } } } }
The mouseClickHandler now contains the drawing function for the adjacent cells. If a neighbor is not blocked a blue rectangle and line are drawn. If it is blocked the same is done in red.
The next code goes below the getNode
function.
function stringToNode ( nodeString ) { var nodePos = posArray.indexOf(nodeString); if ( nodePos > -1 ) { return nodeArray[nodePos]; } else { return null; } }
Don’t forget to alter the stringToNode
function to the one above.
function getNeighbors ( centerNode ) { var u = centerNode.u; var v = centerNode.v; var sArray:Array = new Array(); sArray.push((u-1)+"."+(v-1)); sArray.push((u-1)+"."+(v )); sArray.push((u-1)+"."+(v+1)); sArray.push((u )+"."+(v-1)); sArray.push((u )+"."+(v+1)); sArray.push((u+1)+"."+(v-1)); sArray.push((u+1)+"."+(v )); sArray.push((u+1)+"."+(v+1)); var resultArray:Array = new Array(); for each ( var sObj in sArray ) { var nObj = stringToNode(sObj); if ( nObj !== null) { resultArray.push(nObj); } } return resultArray; }
This function just traces the neighbors possible positions. The stringToNode
function verifies if the node exists and returns an array with the available node references.
For your convenience and on multiple request here is the source: ZIP (70KB).
More articles in grid based games:
- Grid based games - Part 1: The basic grid
- Grid based games - Part 2.1: The basic grid with interaction
- Grid based games - Part 2.2: The basic grid with interaction alternative
- Grid based games - Part 3: Adjacent cells
- Grid based games - Part X.0: Hexmap and movement
- Grid based games - Part X.1: Hexmaps and terrain
- Grid based games - Part 5.1: Learning from the big ones
- Grid based Games - Part 5.2: Towers
- Grid based games - Part 5.3: Pathfinding
Pingback: Grid based games – Part 2.2: The basic grid with interaction alternative « LÞ kegogrog blog