React JS: Zustand von Grid-Feldern

[Bohomo]

Hallo und guten Tag, ich wage mich gerade an das Thema React-Framework und möchte ein Spiel erstellen, welches das Spielfeld in einem zweidimensionalen Array verwaltet. Klassisch und in C hätte ich das so gelöst, dass jedes Arrayfeld einen numerischen Wert hat und der dann später ausgewertet wird, zb. 1 ist eine Mauer, 2 Wasser etc. pp. Ziel ist ein kleines Open-World Rollenspiel.

Mit reinem Javascript würde ich das ja auch so machen. Allerdings verstehe ich bei React das mit den Zuständen nicht so recht. Jedes Array-Feld müsste ja ein Zustand sein (useState), den ich dann setzen und auslesen kann. Sehe ich das so richtig? Ich befürchte irgendwie, dass das von der Performance schwach ist. Und der Aufwand macht für mich auch keinen Sinn.

Hat jemand Erfahrung mit React und großen Grids, z.b. 500 X 500. GameofLife wäre auch eine Anwendung, die man so erstellen würde.

Oder ist React dafür gar nicht gedacht, sondern eher für GUI-Gedöns?

Grüße Bohomo

[Raketenwilli]

Oder ist React dafür gar nicht gedacht, sondern eher für GUI-Gedöns?

„React lets you build user interfaces out of individual pieces called components.“

Ergo: „Ja“. Trenne das also von der Logik des Spiels.

Jedes Array-Feld müsste ja ein Zustand sein (useState), den ich dann setzen und auslesen kann.

Nennen wir es „ein zweidimensionales Array von Objekten“. Und schon hast Du Adressen (x,y), Eigenschaften und Methoden.

[Bohomo]

Ja, daran hatte ich gedacht, dass das ganze Array ein State ist. Ob damit allerdings in meinem Fall viel gewonnen ist, denke ich nicht. Das Rendern des Canvas und Scrolling muss ich eh "von Hand" machen. Zumindet das Interface könnte ich mal in React versuchen, die ganze Game-Logik inkl. dem Canvas wäre dann eine einzige Komponente.

[Rolf B]

Hallo Bohomo,

500 × 500 = 250000. So viele Elemente sind der Tod des DOM. Denke ich. Was ist eine Zelle? Wie groß sind die Zellen? Was kommt hinein? Ein Bildchen? Sind ständig alle Zellen sichtbar oder scrollst Du drüber und siehst immer nur - sagenwirmal - 20×20 Zellen?

Ein 500×500 Raster solltest Du nicht vollständig mit HTML Zellen darstellen, sondern irgendwie prüfen, welchen Ausschnitt du auf dem Bildschirm hast, und den mit Canvas zeichnen.

Falls Du an 3D Effekte denkst, dann denk auch an die Möglichkeit von WebGL für eine anständige Grafikkarten-Unterstützung. Aber Vorsicht: das ist eine steile, vergletscherte Lernkurve.

Update: Ich hab mal eine Schleife gemacht, die 500x500 divs erzeugt und in ein Grid mit einem repeat(500, 1px) Spaltentemplate gesetzt. Das Erzeugen der 500 Divs dauerte 2s. Danach vergingen nochmal 3s, bis der Browser das gezeichnet hatte…

Update 2: Dieses Browser-Tab fraß 400MB Speicher!

Rolf

[Bohome]

Hi Rolf, die Zellen sind erstmal nur virtuell, es wird nur ein Bruchteil der Information auf einen Canvas gerendert. Ich hatte schonmal vor Jahren in pure JavaScript ein ähnliches Spiel gemacht mir wesentlich mehr Zellen und entsprechendem Scrolling. Klar, wenn ich das als Tabelle oder Divs rendern würde, wäre das natürlich schlecht (hatte ich bei meinen ersten Schritten damals festgestellt :)

Aber hattest du ja geschrieben. Meine Frage zielte tatsälich nur auf das Umsetzen mit React ab.

Danke für die Antwort!

[Rolf B]

Hallo Bohome,

ja, sorry. Von React weiß ich so gut wie gar nichts - nur, dass es ein virtuelles DOM aufbaut und mit dem realen DOM auf optimierte Weise synchronisiert. Ich kann mir vorstellen, dass ein 500×500 Grid eine ordentliche Challenge für React darstelle.

Rolf

[bohomo]

Hallo Rolf,

ja, denke ich auch, zumindest soweit ich das bisher verstanden habe. Die Frage ist ja immer: was ist der Vorteil von so einem Framework? Bisher sehe ich ihn noch nicht wirklich, zumindest nicht für meinen Use-Case (der zugegeben etwas exotisch ist, für Game-Development gibt es in JS ja sehr gute und ausgereifte Frameworks).

Bohomo

[Gunnar Bittersmann]

@@Rolf B

Falls Du an 3D Effekte denkst, dann denk auch an die Möglichkeit von WebGL für eine anständige Grafikkarten-Unterstützung. Aber Vorsicht: das ist eine steile, vergletscherte Lernkurve.

Damit man da nicht abrutscht und in die Tiefe fällt, verwendet man besser eine Bibliothek wie Three.js.

Update: Ich hab mal eine Schleife gemacht, die 500x500 divs erzeugt und in ein Grid mit einem repeat(500, 1px) Spaltentemplate gesetzt. Das Erzeugen der 500 Divs dauerte 2s.

Den gebe ich gerne zurück: 500 × 500 = ? 😝

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar Bittersmann,

Ja, guuuuut, mischen wir noch "200" dazu...

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ja, guuuuut, mischen wir noch "200" dazu...

Ich nehme zu deinem Gunsten mal an, mit „mischen“ meinst du das Gegenteil von „zufälliger Reihenfolge“. 😉

🖖 Живіть довго і процвітайте