HTML5 Spiel, Leinwand oder div?

Ich plane ein Echtzeit-Multiplayer-Platformer-Spiel in HTML5 mit Javascript zu erstellen. Nachdem ich ungefähr 4 Stunden auf den Webseiten gesucht habe, konnte ich keine aktuelle Antwort auf die ewige Frage finden: Rendering mein Spiel mit DOM wird schneller sein als Rendern es in einer Leinwand? Das Spiel wird das ganze Dokument sein. 2/4 Spieler springen auf die Karte und schießen aufeinander, Bomben explodieren. Damit? Was wird es sein. Ich erinnere mich, dass ich vor 2 Jahren eine Zeichnungsapplikation mit DOM gemacht habe und es irgendwie reibungslos funktioniert hat, aber ich denke, dass Leinwandgeschwindigkeit heute besser ist? Danke Jungs.HTML5 Spiel, Leinwand oder div?

P.S. Ich denke auch daran, Dart zu benutzen.

Quelle

2013-06-12 Romeo

Die meisten modernen Javascript (oder Dart) Spiele werden in einer Leinwand gerendert. Dart hat einige Bibliotheken (ich bin mir fast sicher) für fortgeschrittene Canvas-Programme. Sehen Sie sich einige Dart-Beispielprojekte oder den Dart-Paket-Manager [Pub] (http://pub.dartlang.org) an und Sie sollten schnell ein paar Dinge finden, die Ihnen den Einstieg erleichtern. – beakr

Die meisten der neuesten Browser haben hardwarebeschleunigte Grafik. Die tatsächliche Leistung hängt immer noch vom Browser ab. Sie können die Lösungen auch mit Canvas- und DOM-Rendering verknüpfen. Aber die Leinwand wird ihre Schönheit zeigen, da das Spiel komplexer ist (wie Partikel, Schatten, Transformationen usw.). –

Wenn Sie Dart verwenden möchten, finden Sie auf http://dartgamedevs.org viele Informationen und Code. –

Ich benutze Canvas, und würde sagen, das Gleiche zu tun, da es ein direkter Zeichnungsmodus ist. Sie sollten jedoch unbedingt sicherstellen, dass die Hardware-Beschleunigung wo immer möglich erzwungen wird. Sie tun dies, indem Sie den Stil des Elements <canvas> in transform:translateZ(0); (oder andere Browserinterpretationen davon, z. B. -webkit-transform:translateZ(0);) festlegen. Die Manipulation des DOM kann langsam sein, da Canvas immer näher am nativen Code ist, insbesondere mit einfachen Methoden, um die beste Leistung zu erzielen.

Meine Spiele scheinen damit auf verschiedenen Plattformen recht gut zu laufen - nicht überall auf jeder einzelnen Plattform (ältere Android-Betriebssysteme hinken, aber ihre JS & Browser-Rendering-Engines waren nicht so schnell zu beginnen), aber ziemlich gut auf vielen Plattformen.

Quelle

2013-06-12 19:45:24

Canvas ist die beste Wahl für den Spieltyp, den Sie beschreiben, aber einige DOM-Elemente sind immer noch sehr nützlich, z. B. wenn Sie nach dem Namen des Spielers fragen oder einen Menu- oder Profilabschnitt im Spiel erstellen. Sie können ein Div mit absoluter Position oben auf Ihrer Arbeitsfläche rendern, wenn Sie DOM-Elemente anzeigen müssen, und alle "Spielmaterialien" wie das Zeichnen und Animieren von Sprites im canvas-Element ausführen.

Der Grund, warum Canvas die beste Wahl ist, ist einfach. Ich bin mir ziemlich sicher, dass Sie nicht können oder es wäre wirklich schwer sein, die Dinge ohne das Canvas-Element, wie dies zu tun:

http://galloman.github.io/ss2d/samples/skeletons2.html

Mehr auf: http://ss2d.wordpress.com/support/

Quelle

2013-06-13 23:28:15 Gallo

Willkommen bei SO! Versuchen Sie, subjektive Meinungsäußerungen zu vermeiden (d. H. "Ich bin mir ziemlich sicher") und geben Sie stattdessen so viele Fakten wie möglich an. Prost! – butch

Danke Gallo. : D – Romeo

HTML5 Spiel, Leinwand oder div?

Antwort

Verwandte Themen