Wie scrolle ich Hex-Kacheln?

7

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

Chris Evans
quelle
Ich habe es geschafft, das zu finden. xnaresources.com/default.asp?page=Tutorial:TileEngineSeries:3 Leider funktioniert die Anzeige korrekt, es werden jedoch falsche Koordinaten verwendet. Wenn Sie sich das Bild ansehen, denke ich nicht, dass diese mit Hex-Mathematik funktionieren werden.
Chris Evans
Ich habe den Code weiter angepasst und ist sauberer und in dem wichtigen Punkt leichter zu verstehen. Ein vollständiges Beispiel finden Sie hier: jsfiddle.net/wg45T/2/embedded/result und den Code hier: jsfiddle.net/wg45T/2 Sie finden es jetzt ganz gut und erstellt die Karte usw. neu. Das Problem ist jetzt, dass die Position der kommenden Kachel nicht beibehalten wird, wenn die alte Kachel entfernt wird. Scrollen Sie nach rechts, um zu sehen.
Chris Evans
Ich habe die Antwort gefunden, kann sie aber noch nicht posten. Wird hochgeladen, wenn das Zeitlimit abgelaufen ist.
Chris Evans

Antworten:

1

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]);
            }
        }
    }
}
amitp
quelle
Was für eine großartige Vereinfachung! Prost :)
Chris Evans
0

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]);
        }
    }
}
Chris Evans
quelle