probleem met tekenen van zeshoekraster

Het lijkt erop dat ik wat moeite heb met het tekenen van een goed hex-raster:


Zoals je kunt zien, zijn de zeshoeken gewoon een beetje verkeerd uitgelijnd, hoewel ik geloof dat mijn wiskunde correct is (waarvan sommige geverifieerd zijn via http://www.redblobgames.com/grids/hexagons/).

Mijn methode van tekenen is om te beginnen bij de zeshoek linksboven (eerste tegel in de eerste rij) en die rij tegels te tekenen. Dan is er voor de volgende rij een negatieve X-offset en een positieve Y-offset, enz. totdat deze de middelste rij bereikt, waarbij de X-offsets toenemen tot 0:

private function drawHexGrid(inputGraphics:Graphics, inputPos:Point, inputGrid:HexGrid, inputTileSize:int):void {
    var rootThree:Number = Math.sqrt(3); // seems like this will be used a lot
    // total number of rows and also size of largest row (in tiles)
    var totalRows:int = (2 * inputGrid.size) - 1;
    // the other useful dimension of a hex tile
    var triSize:Number = rootThree * 0.5 * inputTileSize;
    var topLeft:Point = new Point(-(inputGrid.size - 1) * triSize, -(1.5 * (inputGrid.size - 1) * inputTileSize));
    topLeft.x += inputPos.x;
    topLeft.y += inputPos.y;
    var currentPos:Point = topLeft.clone();
    // step size between each tile and row
    var xStep:Number = rootThree * inputTileSize;
    var yStep:Number = triSize * rootThree;
    var offsetDirection:int = -1;
    var rowLimit:int = inputGrid.size;
    var offsetAmount:int = 0; // offsetAmount goes 1 to n, then back to 0 again, used for calculating thw row offsets
    var mazeTiles:Vector.<Tile> = inputGrid.getTiles();
    var tileCounter:int = 0; // index to cycle through mazeTiles
    for(var rowCount:int = 0; rowCount < totalRows; rowCount++){
        currentPos.x = topLeft.x + (offsetAmount * rootThree / -2 * inputTileSize);
        for(var counter:int = 0; counter < rowLimit; counter++){
            drawHexTile(inputGraphics, currentPos.x, currentPos.y, inputTileSize, mazeTiles[tileCounter++]);
            currentPos.x += xStep;
        }
        currentPos.y += yStep;
        if(rowCount == (inputGrid.size - 1)){
            offsetDirection *= -1;
        }
        rowLimit += offsetDirection * -1;
        offsetAmount -= offsetDirection;
    } // end of for loop
} // end of drawHexGrid()

De daadwerkelijke tekening van elke zeshoek staat in deze lus:

private function drawHexTile(inputGraphics:Graphics, inputX:int, inputY:int, inputSize:int, inputTile:Tile):void {
    inputGraphics.lineStyle(0.1, 0, 1);
    var convertToRadians:Number = Math.PI / 180;
    // easier to draw by wall, since need to look up each wall and can set a starting degree without having to worry about the 'end degree'
    // (since the end may not be 360 degrees if the starting degree is in the negatives or a high degree)
    var degrees:int = -150; // starting wall is the top left wall of the hexagon tile
    for(var counter:int = 0; counter < 6; counter++){
        if(inputTile.walls[counter] == true){
            inputGraphics.moveTo(inputX + (Math.cos(degrees * convertToRadians) * inputSize), 
                                    inputY + (Math.sin(degrees * convertToRadians) * inputSize));
            inputGraphics.lineTo(inputX + (Math.cos((degrees + 60) * convertToRadians) * inputSize), 
                                    inputY + (Math.sin((degrees + 60) * convertToRadians) * inputSize));
        }
        degrees += 60;
    }
} // end of drawHexTile() method

In het eerste gezicht denk ik dat het probleem te wijten is aan drijvende Point Math Accuracy, hoewel ik niet zeker weet hoe ik dit moet gaan over het oplossen / verbeteren.

alle ideeën?

Ik ben me ervan bewust dat mijn tekenmethode zou eindigen met veel overlappende lijnen, wat prima is voor het moment. Als het helpt, is de algemene code bedoeld voor een hexagon doolhof-generator, die prima werkt en dus kan worden genegeerd omdat het geen deel uitmaakt van het probleem.

En als het helpt, is hoe ik de zeshoekige tegels opbergt net in een lange array, als deze geïndexeerd:

where n=4
             0       1       2       3
         4       5       6       7       8
     9      10      11      12      13      14   
15      16      17      18      19      20      21
    22      23      24      25      26      27   
        28      29      30      31      32
            33      34      35      36

Antwoord 1, Autoriteit 100%

Probeer niet bij voorkeur voor uw eindproduct, al uw INT-waarden naar numwaarden te wijzigen. Kijken wat er gebeurt. Focus ook op uw code die betrekking heeft op de X-positie van elke nieuwe tegel.

van uw opmerkingen

… uh ….. dit werkte. Ik weet niet waarom. = | Ik heb gewoon een wereldwijde vervanging gedaan voor Inten naar getallen en het werkte. HM, zal teruggaan en handmatig vervangen om precies te zien wat int variabele deed het.

O! Ik heb het uitgezocht. In drawHexTile() had ik inputX en inputY ingesteld als int-types. Maar in werkelijkheid waren de berekende posities zwevende waarden, dus werden ze afgerond naar ints, wat impliciet de verkeerde uitlijning veroorzaakte. Simpele fout (door reflex), geen magie bij de oplossing.


Antwoord 2

Het lijkt op een probleem met drijvende komma in uw drawHexTile. heb je geprobeerd je tekeningcoördinaten naar beneden af te ronden, zodat je altijd een ronde pixelcoördinaten hebt? Iets als

inputGraphics.moveTo(Math.floor(inputX + (Math.cos(degrees * convertToRadians) * inputSize)), Math.floor(inputY + (Math.sin(degrees * convertToRadians) * inputSize)));
inputGraphics.lineTo(Math.floor(inputX + (Math.cos((degrees + 60) * convertToRadians) * inputSize)), Math.floor(inputY + (Math.sin((degrees + 60) * convertToRadians) * inputSize)));

Other episodes