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

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?

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.

Ü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.

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.

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!

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

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 .

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.