Auf Leinwand oder nicht auf Leinwand, wenn Sie browserbasierte Spiele erstellen?

14

Hintergrund: Ich habe einen umfangreichen Entwicklungshintergrund, aber das letzte Mal, dass ich ein Spiel programmierte, war vor vielen Jahren. Meine Javascript-Kenntnisse sind sehr begrenzt und ich beabsichtige, sie zu verbessern, indem ich ein einfaches Spiel baue - Tetris, Pac-Man oder etwas von dieser Komplexitätsstufe.

Frage: Es scheint mir, dass eine grundlegende Entscheidung, die ich treffen muss, darin besteht, ob ich auf einem <canvas>Element rendern soll oder nicht.

Mit einer Leinwand habe ich grundlegende Werkzeuge zum Rendern von Punkten, Linien und komplexeren Dingen. Vermutlich gibt oder wird es auch verschiedene Frameworks geben, die dabei helfen.

Ohne eine Leinwand könnte ich meine Objekte im DOM-Baum behalten, wie eine normale Webseite, nur recht komplex, mit vielen überlappenden Elementen.

Ist ein Ansatz besser als der andere? Schließen sie sich gegenseitig aus? Woher weiß ich, welche ich auswählen soll?

Letharion
quelle

Antworten:

13

Canvas und DOM schließen sich nicht gegenseitig aus, obwohl sie ziemlich voneinander getrennt sind. Ein guter Ansatz wäre, den Hauptspielbereich (z. B. die fallenden Teile in Tetris) mit Canvas zu rendern und die gesamte Benutzeroberfläche (z. B. die Punkteanzeige) mit DOM-Elementen zu bearbeiten, die das Canvas-Element überlappen.

Trotzdem ist ein solcher Ansatz für ein primitives Spiel wie Tetris nicht unbedingt erforderlich. Canvas ist nützlich für erweiterte grafische Effekte. Wenn diese jedoch nicht erforderlich sind, erhalten Sie eine größere Kompatibilität, wenn Sie sich an DOM halten. Nicht alle Browser unterstützen HTML5 Canvas.

schockierend
quelle
3
Um ehrlich zu sein, würde ich sagen, dass Browser, die Canvas nicht unterstützen, nicht schnell genug für ein anständiges Spiel sind, aber andererseits nichts langsamer als WebKit auf Android-Handys ... :(
Ivo Wetzel
Danke :) Ich mag "Browser-Unterstützung" nicht besonders, bis ich genug gelernt habe, um das Problem zu lösen, gehe ich davon aus, dass sich das Problem von selbst gelöst hat. Dies ist hauptsächlich zum Spaß und Lernen.
Letharion
Ich mache das auch so: Das Spiel selbst ist auf Leinwand gezeichnet, während die GUI aus teilweise transparenten DOM-Elementen besteht.
Philipp
@IvoWetzel Mir geht es genauso ... wir arbeiten auch an Spielen auf mobilen Plattformen und Android ist so gut wie nicht spielbar ...
Vaughan Hilts
12

Über DOM
DOM funktioniert in 2D der alten Schule ziemlich gut, dh es wird keine Bildrotation oder -skalierung verwendet. Es gibt tatsächlich Tools für beide Jobs, aber Sie können nicht davon ausgehen, dass sie eine gute Leistung erbringen.

Für ein Spiel sollten Sie sich so wenig wie möglich auf die Browser-Layout-Engine verlassen, dh position:absolutezum Platzieren von Objekten verwenden. Versuchen Sie so weit wie möglich, DOM-Objekte nicht ständig zu erstellen und zu zerstören. Wenn Sie eine sehr variable Anzahl von Objekten benötigen, möchten Sie möglicherweise einen Pool von inaktiven DOM-Elementen display:none, die bei Bedarf wiederbelebt werden können.

DOM vs canvas
Mit dem Marktanteil von IE8 wird das Verkleinern von Canvas immer attraktiver, für die meisten Spiele ist es wahrscheinlich eine gute Wahl. Aber für einige Jobs ist DOM das einfachere Werkzeug. Sie können bei Bedarf den Dokumentenfluss verwenden. Sie können Klicks direkt vom gerenderten Objekt abfangen. Es ist einfach, Bildlaufleisten zu integrieren.

Es ist schwierig, den Leistungsunterschied zu decken, er hängt vom jeweiligen Job ab und ist von Browser zu Browser sehr unterschiedlich.

aaaaaaaaaaa
quelle
2
Ich hätte nicht gedacht zu erwähnen position:absolute, das ist ein guter Punkt.
jhocking
Ist die Canvas-GPU nicht auf einer Ebene beschleunigt, auf der das DOM nicht ist?
Thomas
1
@Thomas Der einzige Punkt, an dem Sie sicher sein können, dass es eine GPU-Beschleunigung gibt, ist webGL. (Technisch könnte es ohne implementiert werden, aber das wird wahrscheinlich nicht passieren). Die ersten 2D-Canvas-Implementierungen waren ausschließlich CPU-Implementierungen. Einige Funktionen wurden in einigen Browsern auf GPU verlagert, jedoch nicht in allen Fällen mit erheblichen Leistungsverbesserungen. Was die DOM-GPU-Beschleunigung betrifft, arbeiten sie daran, und ich sehe keinen besonderen Grund, warum dies nicht passieren sollte. Was letztendlich zählt, ist auf jeden Fall nicht, wie der Browser es macht, aber wenn es für Ihre Bedürfnisse gut genug funktioniert, bedeutet GPU nicht immer schneller.
aaaaaaaaaaa
Was meinst du mit GPU ist nicht immer schneller? Auf einem PC mag dies zutreffen, aber auf mobilen Plattformen möchte ich lieber, dass die GPU mehr Rendering ausführt, damit die CPU mehr "Zyklen" für die Ausführung der Spielelogik wie KI usw. hat. Auf diese Weise könnte das Spiel komplexer werden .
Thomas
1
@Thomas Das hängt von der Plattform, dem Job und vielen anderen Dingen ab. Bei 2D der alten Schule handelt es sich hauptsächlich um Speicheroperationen, bei denen die Ressourcen im Hauptspeicher bleiben und die CPU für diese Operationen verwendet wird. Dies funktioniert auch auf einem Mobiltelefon sehr gut. Wenn Sie also Vorgänge, die von der GPU nicht ausgeführt werden können, mit GPU-Vorgängen mischen, wird entweder der Puffer je nach Vorgang hin und her gesendet, oder einer der Prozessoren schreibt in den Speicher des anderen Prozessors.
aaaaaaaaaaa
6

Kommt ganz auf die Art des Spiels an, obwohl die Leinwand für "die meisten" von ihnen passt.

Ab einem bestimmten Punkt wird die DOM-Verwaltung fürchterlich. Je mehr Elemente Sie langsamer bekommen, desto mehr Elemente bewegen Sie sich in THE EXTREM SLOWER.

Das Verwalten der Reihenfolge beim Laden von Assets mit IMG-Elementen ist ... nicht trival (Abfangen von Fehlern bei absichtlich beschädigten Protokollen auf den Image-Tags: D).

Obwohl ich für Spiele mit größtenteils statischen Bildern und einer geringen Anzahl von Effekten immer noch DOM wählen würde. Alles andere, Canvas, ist die erste Wahl (Zeigefinger und Klickfinger, obwohl Hitmaps eine andere Geschichte sind).

Canvas ist heutzutage so schnell (sogar auf dem iPhone), dass es kaum einen Grund gibt, es nicht zu verwenden.

Ivo Wetzel
quelle
In Bezug auf die Geschwindigkeit war DOM , basierend auf einer Videopräsentation der Aves Engine , mit Tausenden von Elementen tatsächlich schneller zu handhaben als Canvas. Stimmst du nicht zu Hat sich das geändert? Ich wünschte, ich könnte das Video wiederfinden ...
Letharion
1
: DI Arbeit Zynga, mit dem Kerl, der Aves gemacht hat. Dinge haben sich im letzten Jahr geändert, vertrau mir :)
Ivo Wetzel
-1, Ich habe versucht, ~ 100000 dom-Elemente für eine Nicht-Spiel-Anwendung zu haben, das hat so ziemlich nicht funktioniert. Aber ein paar tausend Elemente sind nicht problematisch. Es ist auch nicht so, dass Canvas schnell sein wird, wenn Sie bei jedem Update mehrere tausend Bilder darauf zeichnen.
aaaaaaaaaaa
@eBusiness Führen Sie dann komplexe Z-Ordnungen und 3D-Transformationen ein. Viel Glück damit :)
Ivo Wetzel
4
@IvoWetzel Wenn du 3D machen willst, ist Canvas die Wahl. Aber das ist nicht, was Ihre Antwort sagt, also was ist Ihr Punkt?
aaaaaaaaaaa
2

Wenn Sie ein HTML5-Spiel erstellen, ist die Zeichenfläche bei weitem besser. Hier ist der Grund:

  1. Geschwindigkeit - Stellen Sie sich die Leinwand als Bild vor. Sie zeichnen auf das Bild und vergessen dann, was Sie gezeichnet haben. Dies erhöht die Leistung im Vergleich zu DOM oder SVG erheblich. DOM- und SVG-Anwendungen verfolgen jedes Objekt, das Sie auf dem Bildschirm platzieren. Das heißt, wenn Sie eine große Ebene mit vielen Objekten auf dem Bildschirm haben, insbesondere außerhalb des Bildschirms oder versteckt, werden diese gezeichnet und trotzdem verfolgt.
  2. Zeichnungsfunktionen - DOM-Elemente verfügen zwar über leistungsstarke CSS3-Transformationen, dies ist jedoch nichts im Vergleich zu den Funktionen der Zeichenfläche. Die Zeichenfläche kann jedes Objekt zeichnen, verfügt über leistungsstarke Verlaufsunterstützung, Plugins für die Anzeige von Objekten in 3D, Filter usw.
  3. Unterstützung - Wenn Sie mit dem DOM experimentelle Funktionen wie Transformationen oder Animationen verwenden möchten, müssen Sie die Präfixe -moz-, -webkit-, -o- und -ms- in CSS verwenden. Auf der Leinwand brauchen Sie sich darüber keine Gedanken zu machen. Zeichnen Sie einfach mit einer Funktion und Sie sind fertig. Ein weiterer unterstützungsbezogener Vorteil der Zeichenfläche ist die Darstellung Ihrer Anwendung. Als Website-Entwickler macht mich die fehlende DOM-Standardisierung zwischen den Browsern verrückt. Hintergründe, Verläufe, Transformationen usw. werden zwischen den Browsern trotz der detaillierten W3C-Spezifikationen unterschiedlich angezeigt. Auf der Leinwand bin ich nur auf eine Sache gestoßen, die unterschiedlich sein könnte - Hintergründe. Bei der Anzeige eines gekachelten Hintergrunds wird bei einigen Browsern "Kachel-x" als Mittelpunkt der Kachel bei 0px auf der x-Achse verwendet, bei anderen wird die Kachel lediglich nach unten gekachelt.
  4. Bibliotheken und Dokumentation - Es gibt Unmengen großartiger Bibliotheken mit Dokumentationen, um Spiele mit der Leinwand zu erstellen. Einige Bibliotheken: CreateJS, paper.js, fabric.js, KineticJS, libCanvas, Processing.js, PlotKit, Rekapi, PhiloGL, InfoViz Toolkit, Frame-Engine, CAKE, Raphaeljs, Tweenjs usw. Ich könnte eine Menge mehr auflisten, aber es hat keinen Sinn.

Nachteil - Animation - Obwohl es viele großartige Bibliotheken für Animationen gibt, liebe ich CSS3-Animationen. Sie sind so einfach zu erstellen, zu manipulieren und auszulösen. Es gibt verschiedene Hacks, mit denen CSS3-Animationen mit Objekten im Canvas-Bereich funktionieren, aber ich vermute, dass die meisten Leute es vorziehen, diese Methode nicht zu verwenden.

Viel Glück mit deinem Spiel und ich hoffe zu sehen, was du daraus machst!

Zoyt
quelle
2

Wenn Sie mobile Browser, insbesondere Android, als Ziel auswählen und das Spiel bewegte Grafiken enthält, sollten Sie die DOM-Animation vermeiden. Der Standardbrowser in Android ist nutzlos, obwohl es sich um ein Webkit handelt. Lesen Sie diesen Android-Thread, bevor Sie beginnen: "Schreckliches Rendern von CSS3- und Javascript-Animationen in Browser und WebView" .

Canvas an sich ist vielleicht nicht schneller, aber es gibt Frameworks, um die Hardwarebeschleunigung für Canvas-Animationen aufzurufen, z. B. CocoonJS . Auf der Website befindet sich ein Link zu einem Video, der die Leistungssteigerungen aufzeigt, die Sie mit dem Framework erzielen können (ich darf jedoch aus irgendeinem Grund nicht mehr als zwei Links posten).

Per Quested Aronsson
quelle
2

Einfache Antwort: WebGL mit Canvas Fallback.

Nuancierte Antwort: Wenn Ihr Spiel viel Text enthält, überlagern Sie eine HTML-Textebene. Pixi.js ist ein kampferprobtes Anzeige-Framework mit einigen nützlichen Extras, die sich gut dafür eignen .

d13
quelle
1

Denken Sie daran, DOM steht für Document Object Model. Sie werden es nur in sehr seltenen Situationen zum Erstellen von Spielen verwenden und in den meisten Fällen Leinwand bevorzugen.

Selbst wenn Ihr Spiel kleine grafische Anforderungen hat, wird es eine schlechte Leistung haben, wenn Sie es in DOM spielen. Alles andere als Tetris wird wahrscheinlich schlecht laufen.

Ich habe ein Beispiel aus der Praxis: Als ich eine Implementierung von Conways Game of Life erstellte, begann ich mit einer 500x500-Tabelle, bei der die Hintergrundfarbe der Zellen geändert wurde. In dieser Version lief ein Glider nicht mit mehr als 30 fps, größere Muster ergaben kaum mehr als 1. In meiner Canvas-Version dieses Spiels ist es jetzt möglich, viel größere Muster (Bevölkerung von 1000 und mehr) reibungslos auszuführen ~ 30 fps.

Dies sollte auch für SVG (Scalable Vector Graphics) der Fall sein , obwohl ich das in der Praxis nie ausprobiert habe.

Edit : Ich muss zugeben, dass mein Beispiel nicht sehr gut ist (weil Tabellen = schlecht). Das Wichtigste ist jedoch immer noch: Die DOM-Manipulation gilt für Dokumente. Der Browser muss nach CSS suchen und mehr Speicher zuweisen, wenn Sie an Elementen arbeiten. Es macht eigentlich keinen Sinn, schneller als Leinwand zu sein.

Kopieren
quelle
Seit wann hat DOM eine schlechte Leistung. Es ist einfach nicht hardwarebeschleunigt, das ist der einzige Unterschied. Und eine 500x500-Tabelle in Hintergrundfarben auf der Zelle ist keine effiziente DOM-Implementierung
Raynos
1
@Raynos Mir ist aufgefallen, dass es sich nicht um eine effiziente DOM-Implementierung handelt. Es gibt keine, wenn Sie Pixel bearbeiten möchten.
Kopieren Sie den
1
-1, große Tische sind ein Leistungskiller. Canvas ist definitiv das bessere Werkzeug, wenn Sie einzelne Pixel manipulieren möchten. Wenn Sie es jedoch für eine so schlechte DOM-Implementierung einrichten, ist Ihr Beispiel wirklich sinnlos. Aus der Hüfte, mein bester Schuss bei einer DOM-Implementierung davon wäre 50000 5x1 Divs mit 32 verschiedenen Hintergrundbildern, die nach Bedarf ausgetauscht werden.
aaaaaaaaaaa
@eBusiness ja, die Leute haben es mir schon gesagt. Schade, dass ich es damals nicht selbst herausgefunden habe: - /
kopiere den
@ Raynos, DOM war nie schnell. Ein Hauptgrund für Canvas ist, dass das DOM langsam ist. Related: stackoverflow.com/q/6817093/632951
Pacerier