Wie scrolle ich Hex-Kacheln?

Ich scheine keine Antwort auf diese Frage zu finden. Ich habe eine Karte mit Hex-Kacheln. Ich möchte das Scrollen implementieren.

Code derzeit:

drawTilemap = function() {
    actualX = Math.floor(viewportX / hexWidth);
    actualY = Math.floor(viewportY / hexHeight);
    offsetX = -(viewportX - (actualX * hexWidth));
    offsetY = -(viewportY - (actualY * hexHeight));

    for(i = 0; i < (10); i++)
    {
        for(j = 0; j < 10; j++)
        {
            if(i % 2 == 0) {
                x = (hexOffsetX * i) + offsetX;
                y = j * sourceHeight;
            } else {
                x = (hexOffsetX * i) + offsetX;
                y = hexOffsetY + (j * sourceHeight);
            }

            var tileselected = mapone[actualX + i][j];

            drawTile(x, y, tileselected);
        }
    }
}

Der Code, den ich bisher geschrieben habe, behandelt nur die X-Bewegung. Es funktioniert noch nicht so, wie es sein sollte. Wenn Sie sich mein Beispiel auf jsfiddle.net unten ansehen, werden Sie feststellen, dass beim Bewegen nach rechts und beim Erreichen der nächsten Hex-Kachel ein Problem mit der X-Position und den Berechnungen auftritt, die stattgefunden haben.

Es scheint, dass ein einfaches Stück Mathematik fehlt. Leider konnte ich noch kein Beispiel finden, das das Scrollen enthält.

http://jsfiddle.net/hd87E/1/

Stellen Sie sicher, dass keine horizontale Bildlaufleiste vorhanden ist, und versuchen Sie dann, sich mit dem Pfeil -> nach rechts auf der Tastatur nach rechts zu bewegen. Sie werden das Problem sehen, wenn Sie das Ende der ersten Kachel erreichen.

Entschuldigung für den schrecklichen Code, ich lerne!

Prost

Ob hexadezimal oder nicht, ich würde vorschlagen, dass Ihre Standortvariablen (x, y) auf die Spielwelt zeigen und nur bei Bedarf in / von den Bildschirmkoordinaten konvertiert werden. Wenn Sie von Bildschirm zu Welt konvertieren Sie hinzufügen (CameraX, CAMERAY) , dann teilen durch (tileStepX, tileStepY). Wenn Sie von Welt zu Bildschirm konvertieren, multiplizieren Sie mit (tileStepX, tileStepY) und subtrahieren dann (cameraX, cameraY). Beachten Sie, dass es bei Hexes eine geringfügige Komplikation gibt, die Sie mit columnOffset behandeln.

Hier ist eine einfachere Version Ihres Codes mit x, y, firstX, firstY in Weltkoordinaten:

drawTilemap = function() {
    // Convert top left of the screen (0, 0) to world coordinates
    firstX = Math.floor(cameraX / 45);
    firstY = Math.floor(cameraY / 50);

    for( x = firstX; x < firstX + 10; x++ )  // world coordinates
    {
        var columnOffset = oddRowOffset * (x % 2);

        for( y = firstY; y < firstY + 10; y++ )  // world coordinates
        {
            // Make sure this world coordinate is part of the map
            if ( 0 <= y && y < mapone.length && 0 <= x && x < mapone[y].length )
            {
                // Convert world coordinates to screen coordinates
                drawTile((x * tileStepX) - cameraX,
                         (y * tileStepY + columnOffset) - cameraY,
                         mapone[y][x]);
            }
        }
    }
}

Hab die Antwort gefunden! Hier anzeigen : http://jsfiddle.net/ck6Vq/1/embedded/result/

Sie sind sich nicht sicher, ob jemand etwas Ordentlicheres als den folgenden Code finden kann?

drawTilemap = function() {
    firstX = Math.floor(cameraX / 45);
    offsetX = cameraX % 45;
    if(firstX > 0) {
        firstX = firstX - 1;
        offsetX = offsetX + 45;
    }

    console.log(offsetX);

    firstY = Math.floor(cameraY / 50);
    offsetY = cameraY % 50;

    for(x = 0; x < 10; x++)
    {
        var rowOffset = 0;
        var columnOffset = 0;

        if((firstX + x) % 2 == 1)
        {
            columnOffset = oddRowOffset;
        }

        for(y = 0; y < 10; y++)
        {
            drawTile((x * tileStepX) - offsetX,
                     (y * tileStepY) - offsetY + columnOffset,
                     mapone[y+firstY][x+firstX]);
        }
    }
}