Beste Technik zum Zeichnen von isometrischen Kacheln

8

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):

Probe Diamantfliese

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:

vorgerenderte quadratische Fliesen

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?

jdm
quelle
1
Ich denke, "beste Technik" ist irgendwie geladen und hängt von den Anforderungen des Spiels, der verwendeten Technologie und dem Entwickler ab, der das Spiel erstellt.
MichaelHouse
1
Welches Problem hast du eigentlich? Anscheinend haben Sie im Fragetext drei Antworten auf Ihre eigene Frage gegeben?
Trevor Powell
1
Dies hat nicht genug Stimmen: BEST BEST BESSSSSSST! argh?
Jimmy
1
Ich
MichaelHouse
1
Sie wissen also nicht, dass dies tatsächlich ein Leistungsproblem ist? Sie versuchen nur, den Code zu optimieren, bevor er geschrieben wird? In diesem Fall -1 und Abstimmung zum Schließen.
Trevor Powell

Antworten:

11

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

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

Fliese mit Baum

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

BILDKREDIT: Reiners Kachelsatz.

MarkR
quelle
9

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:

Basisfliesenbild

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:

ohne angewandte Transformationsmatrix

Gleicher Code mit demselben Kachelbild nach Anwendung dieser Transformationsmatrix:

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

mit Transformationsmatrix

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:

mit Matrix und einigen Verbesserungen

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.

Philipp
quelle
Dies ist sicherlich möglich. Auf diese Weise können Sie "flache" oder "von oben nach unten" Kacheln haben. Dies bedeutet jedoch, dass "3D" -Elemente in den Kacheln nicht einfach ausgeführt werden können. Ich ziehe es vor, diese Transformation im Voraus durchzuführen.
MarkR
+1 wenn nicht nur für die Expertenerklärung! Gut gemacht.
Luceos
@MarkR: Ich habe meine Antwort sehr erweitert, nachdem Sie Ihren Kommentar abgegeben haben. Vielleicht möchten Sie einen Blick darauf werfen, ob er noch zutrifft.
Philipp
1
Vielen Dank für die ausführliche Beschreibung! Das ist eine sehr interessante Technik, darüber habe ich vorher nicht nachgedacht. Da ich jedoch von vorne anfange (und gleichermaßen schlecht darin bin, isometrische und quadratische Kacheln zu zeichnen ;-)), werde ich mich für echte isometrische Kacheln entscheiden. Auch dies scheint nicht sehr schnell zu sein. Ich habe einen kleinen Benchmark durchgeführt, und das Aufteilen von Kacheln ohne Transformationsmatrix auf ganzzahlige Pixelpositionen ist etwa dreimal schneller als bei der Transformation auf meinem PC. Trotzdem könnte ich dies für einige Spezialeffekte verwenden.
JDM
Gibt es eine Möglichkeit, dieser Karte eine Z-Ebene hinzuzufügen?
Tarion
3
  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).

sws
quelle
3

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:

Rechteckiges Unterfliesenmuster

aaaaaaaaaaaa
quelle