As I have been building on a RTS game based on hexagon grid built in javascript. I stumbled across a problem regarding the coordinate system. Have been trying to implement a A-star system to find paths. But it seems a horizontal hex gird could cause some problems so far when it comes to odd and even.

It was made horizontal as it is the way it is rendered to make all graphics not overlapping improper.

Have tried this code, but its not good enough, and stuck at what Im missing for my two functions GetWorldXpos and GetWorldYpos.

  function DrawHex(context, hexagonData, isEven, x, y) { var heightValue; heightValue = GetIntNoDecimals(hexagonData.heightValue); //parseInt(hexagonData.heightValue, 10); //sets up so if the height of sea-levels is achived it should be equal level heightValue = CheckForLakeLevel(heightValue); //Gets color code depengin on height var colorCode = GetColorCode(heightValue, hexagonData.heightValue); if(isEven){ //creates and draws object var hex = new HexagonObj(GetLargeMapXpos(x), GetLargeMapYpos(y), GetWorldXpos(x + 1, y), GetWorldYpos(x, y)); hex.Draw(context, 0.99, lmapData.spaceing, colorCode, (heightValue), 0); //Adds data for usage how to draw other worl dependent objects lmapHeightData.push(new LargeGridData(GetLargeMapXpos(x), GetLargeMapYpos(y), GetWorldXpos(x, y), GetWorldYpos(x, y), heightValue)); } else { //creates and draws object var hex = new HexagonObj(GetLargeMapXpos(x), GetLargeMapYpos(y) + lmapData.spaceing, GetWorldXpos(x, y), GetWorldYpos(x, y)); hex.Draw(context, 0.99, lmapData.spaceing, colorCode, (heightValue), 0); lmapHeightData.push(new LargeGridData(GetLargeMapXpos(x), GetLargeMapYpos(y) + lmapData.spaceing, GetWorldXpos(x, y), GetWorldYpos(x, y), heightValue)); } } //Gets what is the coordinate to be drawn on screen function GetLargeMapXpos(x) { var lgX = ((lmapData.posX + lmapData.spaceing) * x) + lmapData.areaPosX + lmapData.correctionX; return lgX; } //Gets what is the coordinate to be drawn on screen function GetLargeMapYpos(y) { return (lmapData.posY * y) + lmapData.areaPosY + lmapData.correctionY; } //Gets what is the coordinate for current hexagon function GetWorldXpos(x, y) { return (x + lmapData.cameraPosX) - ((y + lmapData.cameraPosY) * 2); } //Gets what is the coordinate for current hexagon function GetWorldYpos(x, y) { return y + lmapData.cameraPosY + (x + lmapData.cameraPosX); }   

I have been building a RTS game based on a hexagon grid in JavaScript and I stumbled across a problem regarding the coordinate system. I have been trying to implement an A-star system to find paths, but it seems that a horizontal hex grid could cause some problems so far when it comes to odd and even.

It was made horizontal as it is the way it is rendered to make all graphics not overlapping improperly.

I have tried this code, but it's not good enough, and I'm stuck at what I'm missing for my two functions GetWorldXpos and GetWorldYpos.

function DrawHex(context, hexagonData, isEven, x, y) { var heightValue; heightValue = GetIntNoDecimals(hexagonData.heightValue); //parseInt(hexagonData.heightValue, 10); //sets up so if the height of sea-levels is achived it should be equal level heightValue = CheckForLakeLevel(heightValue); //Gets color code depengin on height var colorCode = GetColorCode(heightValue, hexagonData.heightValue); if(isEven){ //creates and draws object var hex = new HexagonObj(GetLargeMapXpos(x), GetLargeMapYpos(y), GetWorldXpos(x + 1, y), GetWorldYpos(x, y)); hex.Draw(context, 0.99, lmapData.spaceing, colorCode, (heightValue), 0); //Adds data for usage how to draw other worl dependent objects lmapHeightData.push(new LargeGridData(GetLargeMapXpos(x), GetLargeMapYpos(y), GetWorldXpos(x, y), GetWorldYpos(x, y), heightValue)); } else { //creates and draws object var hex = new HexagonObj(GetLargeMapXpos(x), GetLargeMapYpos(y) + lmapData.spaceing, GetWorldXpos(x, y), GetWorldYpos(x, y)); hex.Draw(context, 0.99, lmapData.spaceing, colorCode, (heightValue), 0); lmapHeightData.push(new LargeGridData(GetLargeMapXpos(x), GetLargeMapYpos(y) + lmapData.spaceing, GetWorldXpos(x, y), GetWorldYpos(x, y), heightValue)); } } //Gets what is the coordinate to be drawn on screen function GetLargeMapXpos(x) { var lgX = ((lmapData.posX + lmapData.spaceing) * x) + lmapData.areaPosX + lmapData.correctionX; return lgX; } //Gets what is the coordinate to be drawn on screen function GetLargeMapYpos(y) { return (lmapData.posY * y) + lmapData.areaPosY + lmapData.correctionY; } //Gets what is the coordinate for current hexagon function GetWorldXpos(x, y) { return (x + lmapData.cameraPosX) - ((y + lmapData.cameraPosY) * 2); } //Gets what is the coordinate for current hexagon function GetWorldYpos(x, y) { return y + lmapData.cameraPosY + (x + lmapData.cameraPosX); } 

As I have been building on a RTS game based on hexagon grid built in javascript i stumbled across a problem regarding the coordinate system. Have been trying to implement a A-star system to find paths. But it seems a horizontal hex gird could cause some problems so far when it comes to odd and even.

As I have been building on a RTS game based on hexagon grid built in javascript. I stumbled across a problem regarding the coordinate system. Have been trying to implement a A-star system to find paths. But it seems a horizontal hex gird could cause some problems so far when it comes to odd and even.