[Projekt] Devader

[marcgfx]

Danke Schrompf, die Einteilung war Zufall lediglich ein schneller Screenshot der gut gelungen ist :)

Wurmspiel? Klar, was brauchst du?

[Schrompf]

Huch, mit der Antwort hatte ich nicht gerechnet. Ich brauch eigentlich "alles", aber das kann man an die Möglichkeiten anpassen. Ich joine mal Deinen Discord und guck, ob ich Dich bei Gelegenheit mal live erwische. Bin aktuell allerdings fies krank, kann also noch dauern.

[marcgfx]

Es ist kaum vorstellbar wie lange ich gebraucht habe um das verdammte Bild richtig zu platzieren. Etwas vom leichtesten müsste man denken.... Nur mein bisheriger Code war nicht darauf ausgelegt mit einem Offset umzugehen und ich musste wieder ganz tief reinblicken um zu verstehen wo ich meine kleinen Änderungen anbringen muss. Schlussendlich wurde es ein Hack, aber ich werde das ja sowieso nie wieder anschauen? Richtig?


Mit dem Ergebnis bin ich ziemlich zufrieden


Da der Rand jetzt nicht mehr glatt ist, habe ich versteckte Objekte platziert und einen mini, äusserst rohen Editor dafür gemacht.


Gebäude am obersten Rand können jetzt in voller Pracht bewundert werden


Der untere Rand hat visuelle Problemchen... Gewisse Felsen müssten für den optimalen Eindruck die Gebäude überlappen.

Huch, mit der Antwort hatte ich nicht gerechnet. Ich brauch eigentlich "alles", aber das kann man an die Möglichkeiten anpassen. Ich joine mal Deinen Discord und guck, ob ich Dich bei Gelegenheit mal live erwische. Bin aktuell allerdings fies krank, kann also noch dauern.

Gute Besserung, kannst ja mal schreiben was du dir in etwa vorstellst. Wenn ich mir was überlegen soll, bräuchte ich wohl ne spielbare Version :D

[marcgfx]

Erste Version mit Überlagerung vom Gestein. Musste feststellen, dass ich in Photoshop wohl nur horizontal skaliert habe. Für die Katz. Immerhin zum Testen hat es sich geeignet.


Zweite Version. Da ich es ja nochmals machen musste, beschloss ich etwas sorgsamer mit dem Platz umzugehen. Da fehlt wohl noch was.

edit: mir schwant, das wird so nicht gehen... es hat noch viel viel grössere Effekte und die werden alle unten durch kucken.

[marcgfx]

Roboter/rotes Leuchten/grüner Ring sollen hinter den Steinen sein. Cursor für die Nuke soll drüber sein. Alles im selben Drawcall. Damit das geht müsste mit meiner aktuellen Tech alles in den selben Texturatlas. Der ist schon zu voll für meine Atlas (4096x4096) --> ich müsste auf 8k hoch. Es wäre die einfachste Lösung.


Die andere Option sieht nicht so fesch aus finde ich... nur schnell zusammengeklickt in Photoshop. Ich könnte alle Steine/Felsen in eine 4k textur reinpacken. Aktuell habe ich schon 2 4k*4k Texturen.


Aber vielleicht ist ein grosser Textureatlas egal heutzutage?

[Schrompf]

Nee, nicht egal, jede API hat Maximalgrößen, und bei sowas Altem wie WebGL könnte durchaus bei 4k Ende Gelände sein. Aber ich spekuliere nur. Die Grafikkarten können schon 10+ Jahre 8k oder mehr, glaube ich

[marcgfx]

ich habe selber noch einen mini PC der auf 2k texturen limitiert. Heute morgen hatte ich nach dem aufwachen eine neue idee. Ich könnte den Atlas gar in 6 2k texturen splitten. Weiss nicht ob das auf die Performance dann auswirkungen hat, aber VRAM sollte das locker schlucken können.

[Schrompf]

Joa, wenn Du mit den Texture-Switchen leben kannst. Man hat ja eh schon einen Strauß DrawCalls, weil das Bild aus x strikt getrennten Layern besteht. Jetzt hat man pro Layer noch Switches für die Texturen. Das ist zwar quadratisch, aber ich habe den Verdacht, dass es bei Dir alles wurscht ist. Du wirst selbst mit kleinteiligen Textur-Atlanten bestenfalls ein paar Dutzend DrawCalls haben, das kostet einfach nix mehr.

[NytroX]

Ist die Anzeige der Nuke und vom Aiming-Pfeil nicht eigentlich einfach Teil der UI, anstatt Teil der Szene?
(im Gegensatz zur Health-Bar, die soll ja um den Devader herum Teil der Szene sein)
Dann wäre sie immer On-Top und du könntest sie rendern wie die UI Symbole oder den Radar und ggf. dort in die Textur packen.
Nur als Idee / Denkanstoß.

[marcgfx]

Ich benutze WebGL2. Da habe ich was gefunden das sampler2DArray heisst. Das ist sowas wie eine 3D textur. Anstatt nur x und y, kann auch noch ein z Wert übergeben werden. Das wusste ich nicht so genau als ich mit dem Umbau begonnen habe.

Als erstes habe ich meine Texture-Atlas generierung umgestellt. Ich hatte bereits eine 8k Texture (nicht wie angenommen 4k :)) und habe sie in 20 2k Texturen aufgeteilt. Die Zahl 20 habe ich gewählt, damit es sicher Platz hat für alles. Im Bild sieht man rechts die Original 8k Textur und links davon die neu generierten.


Anstatt nur schwarz und Fehler, gab es endlich wieder was zu sehen. Jetzt wusste ich, dass es immerhin compilieren wird und klappen könnte.

Die 3D Textur klappt weiterhin nicht :( .... Es war ein kleiner Fehler beim Binding der Texturen. Ich habe ChatGPT Code generieren lassen als Vorlage. Am Ende vom Code wurde die Textur auf null gesetzt. Beim durchschauen des Codes wusste ich nicht genau was die Zeile sollte und hab sie gelöscht.

Wieder auf dem Ursprünglichen Stand, aber mit 3D Textur!

Felsen platziert. Die benötigte Skalierung ist für mich komplett unverständlich. Ah und der Roboter ist verschwunden.... beim erstellen des Texturatlas ging was schief und der Roboter + alle anderen Objekte die umgefärbt gespeichert werden müssen haben gefehlt. Umgefärbt: Im Original ist der Roboter blau-grün und wird erst beim Erstellen vom Atlas in Rot gefärbt.

Was nicht passt, wird passend gemacht. Mit live edit trial und error habe ich schnell eine brauchbare Skalierung für die Felsen gefunden. Ich lasse die 4 Texturen leicht überlappen, da es sonst sichtbare Risse gibt. Damit der Look gleich ist wie der Hintergrund, musste noch eine weitere Zeile im Shader eingefügt werden.


Shader/DrawCalls: Der Shadercode ist auch kaum komplizierter geworden, ob 2D oder 3D textur spielt kaum eine Rolle. Der Offset für den Texturatlas ist jetzt nicht nur [0.0-1.0] sonder hat jetzt eine Ganzzahl die den Layer/z-Wert in der 3D Textur angibt. Insgesamt habe ich in WebGL 5 Layer und max 9 DrawCalls (I think): Hintergrund[2], Sand/Splatter[3], Lava[0-2], Gebirge[0-1], Alles andere[1].

@Nytrox: UI ist alles HTML/CSS, alles was Spiel ist muss in WebGL gemacht werden. Für UI eignet sich WebGL für mich nicht, ich will nicht noch Fonts rendern müssen.

[marcgfx]

Ein Problemchen das mich schon länger beschäftigt ist das Positionieren von neuen Gegnern. Bislang wurde das einfach zufällig ausserhalb vom Radius der Matrix gemacht. Mit den Baumöglichkeiten und nun den Felsen am Rand ist diese Methode nicht so zuverlässig. Meine aktuelle Idee ist eine Art Grid von Punkten zu erstellen. Wenn ich eine Einheit bei einem Punkt absetzen möchte, überprüfe ich ob keine statischen Objekte im Weg sind. Falls es passt, merke ich mir den möglichen Radius und kann mir später für diesen Punkt einen Check sparen. Bzw. ich weiss dann immerhin das es möglich sein könnte bis zu diesem Radius was zu platzieren. Sicher noch nicht optimal durchdacht, aber mal der erste Ansatz.

[Schrompf]

Das klingt, als baust Du Dir da ein Signed Distance Field. Pro Grid-Punkt die Entfernung zum nahesten Hindernis. Und wenn Du was spawnen willst, kommen dafür alle Punkte mit Distance >5 oder so in Frage.

[marcgfx]

Ich habe vor einiger Zeit bei tigsource gepostet, aber hab es nie geschafft auf zfx das Update zu machen. Der vollständigkeit halber Jetzt halt in English.

---

Lot's of playtesting again and bug fixing... I noticed my framerate was considerable lower than what chrome was reporting. Chrome reports the frames itself is rendering, but not how fast the content it is showing is being rendered. So my framerate was around 30 what was a total mystery to me. Turns out I had a bug that registered the new rocks in pretty much every grid, so 1200 cells were doing 40*(40-1)/2 (handshake) collision tests... got that fixed and now I am back up to 60.


I had to add some more joy and enhanced one of my weapons with additional upgrades. It's possible to upgrade it past any sensible limit, but it seems that's something people enjoy. I found out my CPU has been around for 12 years, so it works for me... it should be ok.

----

It's kind of great that I am no longer so limited in my use of images. This has opened up a lot of new avenues and it's hard not to go exploring. One thing I have been wanting to do for ages was create new environments. In a way this was possible before, but by adding a surrounding area it has become a lot more interesting.

Of course I didn't just start using what I have made to the full extent. Instead I decided to create an oval arena, requiring a whole new batch of code. The red box shows the actual game area where collisions can occur. The blue lines kind of show the outline of the ellipse. Green lines are where I calculated the normals (fatter green line). Yellow and red are how an object would bounce off at that position.

It was not that easy to get working with my rendered visuals, as I had not accounted for the wall height. I don't want too much to be hidden, as that makes it hard to play. I ended up using a weird y-scale of 0.7325 (I think) instead of the intended 0.75.

[marcgfx]

Eben gemerkt, das es wohl an meinen Texturen liegt. Der Gradient ist kein linearer Gradient, wieso auch immer....

----------- Weil ichs schon geschrieben habe

Ich hänge grad etwas fest. Habe mit Schrompf etwas wegen dem Wurmspiel getextet und er hat mir diese schönen glasigen, transparente Kreaturen gezeigt. Natürlich ging die Fantasie grad mit mir durch. Heute wollte ich mal schauen ob ich die Ideen in Devader umsetzen kann. Ich will den Hintergrund durchschimmern lassen und dabei leicht verzerren. Dafür habe ich mir einen Kreis mit Test-"Normalen" erstellt. Rot zeigt nach links, schwarz nach rechts, Grün nach unten, Schwarz nach oben. Es funktioniert sogar halbwegs. Zumindest Predator 1 Qualität?

Aber irgendwie verzerrt es nur links und oben richtig.


Ich habe verschiedene Sachen getestet und musste feststellen, dass mein Gradient in WebGL verschoben ist. Ich habe hier so gerechet:

Code: Alles auswählen

fragmentColor = vec4(fract(c.rg*8.0),0.0,1.0)*c.a;

Meine Texturen


ChatGPT gefragt, da ich nicht weiterkam... die ersten Vermutungen sind TextureCompression und GammaCorrection. Letzteres erscheint mir warscheinlicher zu sein.

Code: Alles auswählen

gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);

Hat aber nichts gebracht. Evtl. setzt ich den Code am falschen Ort ein.

[Schrompf]

Was genau macht Dir daran jetzt gerade Sorgen? Dass die x8 Gradienten-Sprünge nicht gleichmäßig kommen? Das ist ja nur Deine Photoshop-Kunst. Photoshop hat übrigens auch noch irgendwelche Farbkurven, die es beim Export anwendet, aber da kann ich Dir nix Genaues sagen.

Falls Dein Problem ist, dass es nicht symmetrisch ist: bedenke, dass Du im Shader das Offset genau mittig ausrechnest. Du hast z.B. als Texturformat RGB8, also 8 bit pro Kanal, also [0...255] Wertebereich. Im Shader kriegst Du ne [0.0f...1.0f] daraus gemacht. Wenn Dein mittiger Farbwert jetzt ne 0x808080 ist, dann musst Du im Shader nicht 0.5f abziehen, sondern 128/255, also 0.501irgendwas. Sonst ist es nicht exakt zentriert und Du hast bei jeder Verzerrung einen kleinen aber sichtbaren Sprung drin.

[marcgfx]

Genau, das Problem ist die Textur. Die Gradientensprünge sollten gleichmässig sein, aber sind sie nicht. Ein Linearer Gradient in Photoshop ist wohl für den Menschen/Gamma korrigiert linear. Ich wollte aber einen Gradienten der von 0-255 geht. Ich habs dann schlussendlich in Shadertoy hinbekommen, das Resultat wurde dann in Photoshop bearbeitet. Jetzt gehts.


Die berechnete Verzerrung sah aber ziemlich "eckig" aus


Ich wollte nur mit x und y eine Normalmap für die Verzerrung machen, aber geht wohl wirklich nur mit dem z Wert korrekt. Da ich aber nicht in jedem Bild einen z-Wert mitgeben kann, berechne ich den z-wert aus x und y. Ist bestimmt langsamer, aber man kann ja nicht alles haben.


Hier benutze ich zuerst den Hintergrund Layer, im zweiten Bild den Splatter Layer Framebuffer als Eingabe, so richtig super find ichs noch nicht



Ich wollte eigentlich nur schauen ob es überhaupt gut sein könnte... aber ich glaube ich komme nicht drum rum alles in einem Framebuffer zwischenzuspeichern um diesen dann zu übergeben. Wird heute nix mehr.

Eine Kreatur sieht auf diese Art leider ganz schrecklich aus.

[Schrompf]

Klingt, als wolltest Du die NormalMap einer Kugel haben. Und die ist halt kein linearer Gradient. Ein linearer Gradient über die Oberfläche eines Kreises dürfte dann genau so seltsam verzerrt aussehen, wie Du im Screenshot gezeigt hast.
Das Rekonstruieren von Z aus X und Y im Shader ist dagegen Standardprogramm, das kannst Du ohne schlechtes Gewissen machen. Bei Deinem Grafikstil ist ja außerdem garantiert, dass der Vektor der Kamera immer entgegen schaut, Du kommst also auch nicht in Bedrängnis, Dir das Vorzeichen von Z irgendwie merken zu müssen.

[marcgfx]

Klingt, als wolltest Du die NormalMap einer Kugel haben. Und die ist halt kein linearer Gradient. Ein linearer Gradient über die Oberfläche eines Kreises dürfte dann genau so seltsam verzerrt aussehen, wie Du im Screenshot gezeigt hast.
Das Rekonstruieren von Z aus X und Y im Shader ist dagegen Standardprogramm, das kannst Du ohne schlechtes Gewissen machen. Bei Deinem Grafikstil ist ja außerdem garantiert, dass der Vektor der Kamera immer entgegen schaut, Du kommst also auch nicht in Bedrängnis, Dir das Vorzeichen von Z irgendwie merken zu müssen.

Ja genau das habe ich gemacht. Habe bei Shadertoy was gefunden, dass die Normalmap einer Kugel produziert und für meine Zwecke angepasst. Spannend, dass Z rekonstruieren zum Standardprogramm gehört. Dachte schon ich sei was Besonderes.

[marcgfx]

Ich habe inzwischen etwa 20 Waffen erstellt. Sobald eine Waffe gekauft wurde, kann sie auf beiden Armen getragen werden. Im Multiplayer von jedem Spieler. Beim Spielen ist mir aufgefallen, dass ein Waffenwechsel praktisch nie attraktiv ist. Sobald man in eine Waffe investiert ist, will man schlichtweg keine andere. Ich will Waffen interessanter machen, indem ich das mache was überall gemacht wird: Eine Waffe kann nur ein Mal getragen werden. Heisst wenn ich links und rechts die gleiche Waffe möchte, muss ich sie auch zwei mal erwerben.

Das beisst sich etwas mit meinem aktuellen Konzept. Ich kann mehrere Waffen auf einem Arm platzieren, aber nicht zwei Mal die gleiche Waffe. Wenn ich das jetzt ermögliche, bekomme ich ein optisches Problem. Waffen werden alle vom selben Punkt abgefeuert, wenn also zwei Waffen genau das gleiche machen, wird eine fast unsichtbar.

Neue Lösung: Ich füge pro Waffe einen neuen Lauf hinzu.


Aktuell nur ein Test. Nur glaube ich nicht, dass ich damit durchkomme. In Devader werden alle Objekte von Schüssen getroffen, diese Waffen wären eine Ausnahme. Oder ich mache die Waffen zerstörbar, was wieder komplexität hinzufügt.

[Chromanoid]

sieht geil aus. Ich würde sie einfach nicht Teil der Kollisionserkennung machen. Das kennt man aus Spielen eh und bei den Waffen gehen die Schüsse halt drunter oder drüber weg.

[marcgfx]

Ja ich versuchs jetzt. Ist ja weiterhin ein Spiel und soll Spass machen. Manchmal vergesse ich das und versuche die Welt so genau wie möglich zu gestalten.

Anstatt brav alles neu und sauber zu machen, versetze ich lediglich den Offset der Schüsse. Noch nicht gelöst sind mehrere Waffen vom gleichen Typ auf dem gleichen Arm. Mal schauen wie ich das zurecht hacke... es beisst sich etwas mit dem bisherigen Code der für alle Einheiten gleich ist. Vermutlich erstelle ich einfach zusätzliche Waffen mit anderem Namen. Aus Laser wird dann noch Laser1, Laser2, Laser3... sofern bedarf dafür vorhanden ist. Im moment ist jeder Arm auf maximal 8 Waffen beschränkt.

[marcgfx]

Waffen können nur noch in einem Slot abgelegt werden. Da ich bereits wieder an Multiplayer denke, wird die montierte Waffe mit der Farbe des Robos gekennzeichnet. Hier ist der untere rechte Slot offen. Die Waffe ist im Slot selber rot, wie auch im "Dropdown". Auf dem anderen Arm sind 3 Waffen montiert, diese sind im "Dropdown" rot und gestreift.


Gestern abend habe ich noch ein paar Stats eingeführt. Mit all den Gegnern und Waffen ist es schwer sich einen Überblick zu verschaffen. Die Statistiken sollen mir helfen das Spiel ausgewogener zu gestalten, bzw. später dem Spieler helfen gute Entscheidungen zu treffen. Grün sind freundliche Einheiten, rot die Gegner. Die mittlere Spalte informiert über absoluten Schaden, die rechte gibt einen prozentualen Wert an.

[marcgfx]

Debugging the wheel enemy throwing dirt into the air. Originally this was just intended for the death animation, but I might just randomly throw some dirt...

[Schrompf]

Sieht echt trippy aus :-) Sehr cool! Für echten durch Fahren aufgeworfenen Dreck fliegt es viel zu weit, aber geil isses schon

[marcgfx]

Danke Schrompf :) , jetzt mit etwas mehr Realismus :)

[marcgfx]

Ich bin nicht so zufrieden mit meinen Sounds, bzw. der Abstimmung zwischen Sounds. Ich will hören wie die Gegner kaputt gehen. Klar, einfach lauter machen... aber so einfach ist das eben doch nicht. Oder ich verstehe einfach zu wenig davon. Jedenfalls hab ich mir Hilfscode geschrieben, der mir angeben soll wie laut eine Einheit ist. Helfen tut er noch gar nicht, da es zu unübersichtlich ist. Was ich immerhin erreicht habe, ist dass ich Einheiten erkenne die keinen Sound haben. Immerhin. Ich vertone diese nun.

Dabei ist mir dieser unfertige Gegner wieder vor die Nase gekommen. Ich finde den noch nett, aber machen kann er noch gar nichts ausser sterben.

[marcgfx]

UI... für mich ein schwieriges Thema. So vieles darzustellen, so viele Informationen klar rüberbringen.

Der Multi-Dimensional-Exchanger (aka Random-Shop) erlaubt gegen entgeld neue Upgrades zu kaufen. Neu gibt es Orbs die sich auf dem Roboter platzieren lassen und einen Slot verbrauchen. Sie erhöhen die Stats, z.B. FireRate, FirePower, ShotRange, ShotSize (für Explosionen wichtig) oder auch HP, SP etc. Orbs in den oberen Slots gelten für den ganzen Roboter, Orbs in den 3 Waffenslots hingegen nur für die entsprechende Waffe. Wird ein FireRate-Orb oben platziert erhalten alle 3 Waffen +10%, wir er im Slot einer Waffe platziert erhalten alle Waffen in diesem Slot einen 20% Bonus. Die Orbs gibt es in verschiedenen Qualitäten und Preisen zu kaufen. Die ersten zwei Upgrades im Shop sind Orbs der tiefsten Qualität.


Der Robo-Konfigurationsscreen erlaubt jetzt auch das platzieren von Orbs. In der Ansicht werden vor allem die Spielerfarbe verwendet und die Komplementärfarbe (auch im Hintergrundbild). Ich habe ziemlich lange experimentieren müssen bis ich mit dem Design zufrieden war. Im offenen Slot (grau umrandet, 3 nebeneinander) sieht man folgendes. 1. auf diesem Slot aktiv, Gradient unten rechts Rot. 2. auf anderm Slot aktiv, kann nicht platziert werden. 3. zwar im anderen Slot, aber eine Aktion. Kann auch auf diesem Slot platziert werden.
Unter den Slots gibt es noch Stats über den Robo, wo der Spieler auch dynamisch die Veränderungen sehen kann beim umplatzieren von Orbs. Was noch fehlt ist eine Informationsanzeige zu den Orbs/Upgrades evtl. bei Selektion. Überhaupt muss ich noch 100te von Texten schreiben.


Die Personen habe ich schon vor einiger Zeit mit Midjourney/Photoshop erstellt. Sie sind versuchsweise drin, aber für diese Screenshots reingehackt. Die Hintergründe habe ich hauptsächlich heute morgen generieren lassen (10+ die Random verwendet werden).

[Schrompf]

Hatte Steam nicht irgendne Regelung gegen AI-generierten Content? Die Charakter-Portraits sehen auch echt ein bissl cheesy aus, aber vielleicht bin ich mit der Ansicht auch alleine.

[Jonathan]

Joah, also wenn es keine Charaktere sind mit denen man sprechen oder interagieren kann oder die in der Story oder der Spielwelt auftauchen find ich die auch unpassend. Vom Stil passen die nicht super gut rein und außerdem ziehen sie ja sehr viel Aufmerksamkeit auf sich - man sieht erst den Charakter und dann erst den Shop. Da muss man schon irgendwie eine Begründung dafür haben.

[marcgfx]

Ist mir ganz recht so, wenn die Figuren nicht passen. Ich bin am ausprobieren ob das gefallen könnte und Atmosphäre schafft. Ein paar Texte würden dann auch dazugehören.

Ja Steam hat eine Regelung die AI Art verbietet. Daran werden sie wohl solange festhalten, bis es gesetzlich klar geregelt ist. Zum ausprobieren ist es für mich dennoch eine gute Sache und für itch.io ist es evtl. erlaubt. Müsste ich noch abklären.