Beste Technik zum Zeichnen von isometrischen Kacheln

Ich denke darüber nach, ein einfaches isometrisches Spiel mit HTML5 Canvas zu erstellen und mich zu fragen, wie die Kacheln am schnellsten gerendert werden können.

Da die Fliesen rautenförmig sind, aber drawImage Rechtecke zeichnet, muss ich die Ecken weglassen (die schwarzen Teile im Folgenden):

Ich denke, das lässt mir drei Möglichkeiten:

1. Verwenden Sie Bildobjekte mit Alphakanälen (.png). Ich befürchte, dies könnte die Leistung beeinträchtigen.
2. Verwenden Sie einen Beschneidungspfad. Wenn der Renderer optimiert ist, kann dies ziemlich schnell gehen.
3. Prerender quadratische Kacheln wie folgt:

Ich hätte das schwarze Quadrat als eine tatsächliche Kachel im Speicher und würde eine solche Kachel für das grüne Feld und alle Felder daneben oder darüber und darunter zeichnen. Die diagonalen (blauen) Felder würden sich aus den Ecken der rechteckigen Kacheln zusammensetzen. Dies würde Clipping oder Alphakanäle vermeiden, aber ich müsste alle möglichen Kombinationen von Kacheln vorrendern, und es scheint übertrieben.

Was ist der beste oder schnellste Weg, um isometrische Kacheln herzustellen? Was verwenden andere Spiele wie FarmVille?

Ich empfehle die Verwendung von Transparenz (Alpha-Kanal).

Dies bedeutet, wenn Sie ein vertikales Objekt wie folgt auf der Kachel haben möchten:

Dann können Sie es einfach tun, wenn Ihr Renderer die Kacheln von hinten nach vorne zeichnet, dh Maleralgorithmus.

BILDKREDIT: Reiners Kachelsatz.

Während die von sws und MarkR beschriebene Methode auch das ist, was ich bevorzuge, möchte ich einen alternativen Ansatz vorstellen.

Eine hackige Option zum Erstellen eines isometrischen Looks mit minimalem Aufwand besteht darin, tatsächlich orthogonale Kacheln zu verwenden und mit context.transform eine Projektionsmatrix festzulegen, mit der die Karte isometrisch aussieht (oder eine Kombination aus context.rotate und context.scale, wenn Sie dies nicht tun). Ich weiß nicht, wie Projektionsmatrizen funktionieren.

Siehe die Spezifikation für Canvas-Transformationsmethoden Informationen finden .

Fliesenbild:

Zeichnungscode:

    for (var x = 0; x < 5; x++) {
        for (var y = 0; y < 5; y++) {
            ctx.drawImage(img, x * img.width, y * img.height);
        }
    }

Ergebnis vor Matrixanwendung:

Gleicher Code mit demselben Kachelbild nach Anwendung dieser Transformationsmatrix:

    ctx.transform(  1,   0.5,
                   -1,   0.5,
                  160,   0    );

Mit dem gestrichelter Raster aus dem Kachelbild entfernt und die Fliese in der Zeichnung Code - Offset geändert img.width - 1und img.height - 1auf den Lücken durch die Transformation verursacht loszuwerden. Plötzlich sieht die Fliese halb so hässlich aus:

Der Hauptnachteil dieser Methode besteht darin, dass Ihre Kacheln beim Entwerfen in einem Grafikeditor nicht wirklich das sind, was Sie sehen, was Sie bekommen. Sie werden auch auf Probleme stoßen, wenn Sie Objekte zeichnen möchten, die nicht auf dem Boden liegen, sondern aufrecht stehen. Für diese können Sie die Transformationsmatrix ausschalten, bevor Sie sie zeichnen, aber dann müssen Sie die Position selbst berechnen. Sie können diese Formeln dafür verwenden:

var xScreen = xWorld * 1   + yWorld * -1  + 160;
var yScreen = xWorld * 0.5 + yWorld * 0.5 + 0;  

(Beachten Sie, wie die Zahlen aus der Transformationsmatrix in diesen Formeln wieder angezeigt werden - Sie führen die Matrixmultiplikation hier selbst durch).

Warum sollte ich das tun?

Diese Methode ist gut, wenn Sie:

1. Sie haben keine Erfahrung mit dem Entwerfen von isometrischen Kacheln, aber Sie haben orthogonale
2. Ich möchte nicht viel Zeit mit der Entwicklung einer isometrischen Grafik-Engine verbringen, die etwas schwieriger ist als eine orthogonale.

Ein weiteres interessantes Feature ist, dass Sie, wenn Sie sich mit Matrixberechnung auskennen, die Projektionsmatrix zwischen Frames ändern können, um die Karte in Echtzeit zu zoomen, zu neigen und zu drehen, um einige schöne Fake-3D-Effekte zu erzielen (versuchen Sie, dies mit isometrischen Kacheln zu tun). .

Aber wenn Sie wissen, wie man mit isometrischen Fliesen sowohl künstlerisch als auch technisch umgeht, und Sie keine Tricks mit falschen Perspektiven benötigen, würde ich Ihnen eher empfehlen, rautenförmige Fliesen mit Transparenz zu verwenden.

1. Sie verwenden context.drawImage, um Pixeldaten von einer Quelle (Bild oder Leinwand außerhalb des Bildschirms) in eine andere Quelle (Leinwand außerhalb des Bildschirms oder auf dem Bildschirm) zu kopieren, wodurch Alpha sofort einsatzbereit verarbeitet wird. Canvas ist hardwarebeschleunigt, sodass Sie beim Testen feststellen können, ob es einen erkennbaren Unterschied in der Rendergeschwindigkeit zwischen Alpha- und undurchsichtigen Pixeln gibt.

2. Beim Abschneiden müssen Sie den Status des Kontexts verschieben / einfügen, wenn Sie einen Beschneidungspfad einmal pro Kachel definieren. Dies kann angesichts der Überziehung von isometric eine kostspielige Operation sein.

3. Vorgerenderte Kacheln würden, wie Sie angeben, das Zeichnen einer immensen Anzahl von Verbindungskacheln erfordern, was möglicherweise machbar ist oder nicht. (Ich neige eher zu "darf nicht".)

Eine vierte Lösung wäre, ein vorgerendertes "Stück" (PRC) von Kacheln zu verwenden, das einmal für Offscreen-Leinwände generiert wurde, und dann den Bildschirm einmal pro Frame mit den PRCs zu bedecken. Es würde immer noch eine Überziehung geben, aber das einmalige Erstellen der PRC und das Rendern mit einem Versatz, der durch die Position des Spielercharakters (oder der Ansichtskamera) relativ zur PRC bestimmt wird, sollte eine relativ einfache Operation sein. Auf diese Weise können Sie das Rendern mit Option 1 kombinieren. Dies ist IMO die beste Option, wenn die Leistung nicht berücksichtigt wird (da die Implementierung am einfachsten ist).

Ein kleiner Alphakanal tut nicht viel weh, aber wenn Sie vermeiden möchten, dass Sie zwei Viertelkacheln verwenden, haben Sie auch Raum für schöne Kachelübergänge, ohne eine Vielzahl unterschiedlicher Bilder zu erstellen. Dies ist wahrscheinlich der größte Vorteil: