[Projekt] Devader

[Zudomon]

Nicht nur Programmierer sind faul... und in einer Welt, wo keiner mehr Zeit hat, ist jedes Wort zu viel. Das merke ich daran, dass ich bei SQ ja Zettel integriert habe, wo die Bedienung drauf steht und wie man erstmal ins Spiel findet. Denn noch kommen immer die selben Frage, wie bekomme ich dies oder das, wie bekomme ich Geld usw.

Also meine Empfehlung so wenig und eingiebig wie nötig. Am besten ist, wenn der Spieler das auf einen Blick begreift...

Die Keys würde ich nur als Auflistung machen:
WASD - move
mouse/tourchpad - target
left mouse button - fire
Space - autofire on/off
mouse wheel - zoom
r - zoom in
f - zoom out
Besser noch die Tasten usw. direkt mit Bilder davon ersetzen, dann sieht man direkt, Steuerung, ohne auch nur ein Wort gelesen zu haben.

Das Bild an sich würde ich ausgrauen, damit nur noch die relevanten Informationen übrig bleiben, also die Umrandungsfarben.
Wegen den Farben frage ich mich, warum die nicht ihre eigentlich zugeodnete Bedeutung haben? Rot = feindlich, Grün = man selbst und vielleicht Schwarz = under attack...
Als Legende würde doch reichen, wenn man dann in der entsprechenden Farbe dahin schreibt, was sie bedeutet... ohne die Farbe explizit zu erwähnen, das würde man ja dann indirekt mit der Textfarbe machen.
Irgendwie gefällt mir nicht, dass das under attack mit anderer Farbe dargestellt wird... vielleicht wäre besser, wenn das anders visualisiert würde. So ein Dreieck mit Ausrufezeichen drin, in rot, was an der Stelle, wo Attacked wird blinkt würde mir da jetzt als erstes in den Sinn kommen.

Auch hier ist die Kritik nicht negativ gemeint, sondern einfach, wie ich es abändern würde, wenn das was du zeigst mein aktueller Stand wäre :D Also gute Arbeit! :D

[marcgfx]

Danke für deinen Input Zudo :)
Ich könnte den Text noch massiv kürzen und nur noch eine Legende darstellen, ist vermutlich wirklich besser.

Die Farbwahl in Devader ist etwas ungewöhnlich. Die Hexas gefallen mir in diesem Cyan-Grün eben sehr gut. Der Robo sieht in Rot am besten aus. Viele der Bosse sind schwarz, bei den normalen Gegnern gibts eine sehr breite Farbpalette.
Wenn ich auf der Minimap den Roten Spieler Grün mache, wäre das befremdlich. Die Umrandungsfarben sind nur für ganz kurze Zeit zu sehen und sollen dem Spieler demonstrieren was gut/böse ist.

Weniger Text, werde ich machen! Ich denke dann wirkt es auch nicht mehr ganz so überladen...

[Zudomon]

Die Hexas gefallen mir in diesem Cyan-Grün eben sehr gut. Der Robo sieht in Rot am besten aus. Viele der Bosse sind schwarz, bei den normalen Gegnern gibts eine sehr breite Farbpalette.

Das solltest du auch nicht ändern, finde ich. Aber guter Punkt, dann ergibt die Umrandungsfarbe natürlich Sinn.

[scheichs]

Also mir persönlich gefällt ja der Untergrund iwie gar nicht. Ich finde da solltest Du Energie investieren. Auf sonem trockenen Uni-Lehmboden rumzufahren is langweilig. Eventuell kannst Du die Arena auch graphisch abgrenzen mit nem Gebirge/Mauer oder ähnlichem. Schön wäre auch wenn die Hexas eine Verbindung zum Untergrund hätten, also der Boden sich angleicht/aufgestossen wirkt.
Ansonsten alles toll!

[marcgfx]

Der Untergrund ist halt nicht sooo relevant. Wichtig ist dass man die Schüsse/Gegner gut darauf sieht. Ebenso kommen immer wieder neue Splatter-Effekte auf den Untergrund. Ich hatte mal die Idee den ganzen Untergrund designen zu lassen, also ein komplettes Bild dafür zu nutzen. Habs dann selbst versucht, es sah alles andere als gut aus :roll:

[scheichs]

Das mit der Sichtbarkeit und der Relevanz ist ja klar. Ich denke aber trotzdem könnte man da etwas mehr Variation reinbringen durch z.B. Schattierungen. Ansonsten könnte man auch ringförmig von den Hexas weggehend auf eine andere Tileart umschwenken, die eine andere Struktur hat. Z.B. könnte man weniger Risse im Boden haben. Das würde den Charakter der Hexas mehr unterstreichen (ich stelle mir dabei vor, dass sie als Rohstoffe? dem umliegenden Bodenentzogen und sich gehäuft konzentrieren). Das von mir genannte Aufstossen der Erde sollte ja auch gehen. Ich denke das sind so kleine Details, die die Optik einfach glaubwürdiger, abwechslungsreicher machen und auch die Orientierung des Spielers visuell unterstützen würden.

[marcgfx]

Naja, es ist ein bisschen technisch bedingt, wie es jetzt ausschaut. Der ganze Hintergrund ist ein einziges Quad, das mit zwei Texturstückchen und Shader-Code befüllt wird. Ich könnte das jetzt wieder umstrukturieren, aber ich habe aktuell keine grossartige Idee, wie ich das viel besser hinbekommen kann. Die zusätzlichen Texturen müsste ich auch erst mal machen. Ich muss aber noch etwas mit den Parametern spielen, richtig gut gefällt mir der Boden auch noch nicht. Eventuell könnte ich auch noch ein paar Steinchen hier und da platzieren.

Das Aufstossen der Erde gefällt mir von der Idee her, aber es ist nicht ganz so einfach umzusetzen. Es ist halt alles 2D, da muss viel beschissen werden, wenn es 3D ausschauen soll. Die Hexas liegen sehr nah aneinander, d.h. jegliche aufgestossene Erde die am Rand liegt würde entweder das Hexa daneben über oder unterlappen. Desweiteren, müsste ich auch hier für anständig aussehende Bilder sorgen. Mir liegen da Roboter und einfache Strukturen viel besser :)

Im Moment liegt mein Hauptaugenmerk nicht auf der Spielgraphik, sondern auf dem Intro. Wie mache ich das Spiel für einen Einsteiger zugänglicher.

[scheichs]

Dachte Du hättest auch eine Renderqueue und könntest an die Positionen der Hexas die aufgestossene Erde in "einem Batch" zeichen und anschliessend alle Hexas drüber. Dann müsste es ja korrekt sein. Aber klar Gameplay first. Ich denke mal aus dem Quad ein Grid zu machen kriegste auch noch hin ;) Ja ich weiss ... ich nerve, sry! :D

[marcgfx]

Nein keine Angst du nervst nicht. Ich bin um jegliches Feedback froh nehme mir aber die Freiheit zu implementieren was ich für sinnvoll erachte (bzw. was ich kann). Ich werde deine Idee nicht vergessen, evtl. komme ich später mal darauf zurück wenn mir eine gute Lösung einfällt. Das Zeichnen in der Renderqueue ist kein Problem, das Erstellen der benötigten Assets und das Überlappen ist aber eines. Wenn ich die Aufgestossene Erde zuerst zeichne und dann erst die Hexas, dann siehts eigentlich aus wie jetzt, nur dass ich unter den Hexas ein bisschen was verändere. Der übergang zwischen Hexa und Boden wäre aber der gleiche.

[marcgfx]

Es geht langsam voran, vor allem am GUI wird gearbeitet. Das Spiel selbst steht schon eine Weile eher still.

Auswahlscreen Nuke oder EMP


Auswahl des Geschützturms


Es fehlen noch Texte um dem Spieler klar zu machen was er Auswählt :)

[NytroX]

Coole Sache.
Als ich das Game das letzte Mal online probiert habe, ist mein Chrome beim laden hängengeblieben - nur Musik lief noch, es ging aber nicht weiter.
Jetzt ist alles besser, das Spiel läuft flüssiger und die Waves sind mehr gebalanced - es ist viel besser als eigenständiges Programm.
Außerdem erkennt man viel besser, was passiert, auch der Cooldown der Nuke usw. ist sehr hilfreich.
Ich muss sagen, gute Arbeit, man sieht den Fortschritt - weiter so :)

Hast du schon einen Plan, wann es auf Steam verfügbar sein wird?
Was willst du noch alles ändern/verbessern?

[marcgfx]

Danke NytroX, das höre ich sehr gern :)
Mit den ganzen Browserproblemchen war es einfach ein Ding der unmöglichkeit es überhaupt im Web zu veröffentlichen. Der Schritt zu einem abgekapselten Spiel war definitiv der Richtige, auch wenn ich damit den ursprünglichen Gedanken verleugne.

It's done when it's done, ich bin eher weniger produktiv gewesen in letzter Zeit. Teils Motivation, teils einfach andere Sachen zu tun und auch ein Teil ratlosigkeit. Mit ein paar Sachen bin ich noch nicht zufrieden und ich bin noch nicht auf gute Lösungen gekommen. Hauptsächlich geht es dabei darum wie ich dem Spieler mitteile was er zu tun hat, aber auch die Story macht mir Schwierigkeiten.

Was auch noch unbedingt rein muss sind dann die Achievements, auch dort noch kein Plan/nichts umgesetzt.

Ansonsten steht das Spiel schon recht fest. Beim letzten Boss gibts noch eine Stufe die mir nicht so gefällt, aber ansonsten bin ich insgesamt recht zufrieden :)

edit: Was ich noch vergessen habe, ist das GUI Gamepad sicher zu machen. Ist nicht so einfach, da soweit ich weiss HTML noch nicht auf sowas ausgelegt ist. Ich habe also mein eigenes Konstrukt entwickelt um die Buttons Gamepad tauglich zu machen, das hat aber Mühe, wenn ich mehrere Layers einsetze. Wenn das Spiel pausiert wird, kommt man in ein Optionsmenü und das verträgt sich nicht so gut mit anderen GUI-Elementen. Naja, wird sich auch noch lösen lassen.

[marcgfx]

Grid-GUI:
Um das GUI Controller- und Keyboard-freundlich zu machen, habe ich vor einiger Zeit ein eigenes System gebaut, welches erlaubt per Attribut einen Knopf in einem Grid zu platzieren.

Code: Alles auswählen

<div data-grid="{x:0,y:0}">Left</div><div data-grid="{x:1,y:0}">Right</div>

Das Grid lässt sich verschachteln und die Buttons können mehrere Gridfelder für sich beanspruchen. Da dies noch nicht gereicht hat um alle Probleme zu handhaben, wurden Layer eingeführt. Es kann jeweils nur im aktivierten Layer navigiert werden.

Code: Alles auswählen

<div data-grid="{x:0,y:0}" data-layer="test">
    <div data-grid="{x:0,y:0}" data-layer="test">Left</div><div data-grid="{x:1,y:0}" data-layer="test">Right</div>
</div>
<div data-grid="{x:0,y:1}" data-layer="test">Bottom</div>

Gestern habe ich mich mit folgenden GUI Problemen rumgeschlagen:
- werden zwei Elemente mit den selben Grid-Angaben erstellt, wird eines überschrieben und die Navigation schlägt fehl. Hat eine Weile gedauert bis ich das gecheckt habe... Jetzt schreibe ich eine Fehlermeldung in die Konsole, wenn ein Element überschrieben wird.
- Das Optionsmenü kann im Spiel zu jeder Zeit aufgerufen werden. Ich musste es auf einen anderen Layer schieben, bisher war alles im selben, was auch zum überschreiben des Grids führte. Um nicht jedes neue Element auf diesen Layer schieben zu müssen, habe ich zwei neue Funktionen eingeführt "beginLayer(layerName)" und "endLayer()".
- der Wechsel Zwischensequenz -> Upgradescreen ist viel Kompakter geworden. Die Zwischensequenz wird über den Upgradescreen gezeichnet und bewegt sich dann nach oben weg um die Upgrades sichtbar zu machen. Auch hier musste ich Layer einführen, da die Überlagerung zu Problemen mit meine Gridsystem führte.
- NWjs verwendet keine DOM events für das hinzufügen/löschen von Nodes, deshalb setze ich dem MutationObserver ein. Ich hatte mir der Default-Selektion von Elementen ein Problem und wusste nicht wieso. Gestern habe ich rausgefunden das der MutationObserver asynchron über Microtasks funktioniert... jetzt weiss ich was das Problem war. Ich musste jetzt auch die selektion asynchron über Microtasks ausführen und jetzt läuft es


Waffen Power-Ups
- bisher haben diese für Verwirrung gesorgt, da sie einfach ein Time-Out besitzen. Egal wie oft man Schiesst, die Waffe verbraucht sich genau gleich. Das habe ich geändert, es gibt jetzt "Ammo". Jetzt macht es Sinn weniger zu Schiessen und andere Waffen (Nuke/Emp/Geschütztürme) die Arbeit machen zu lassen um sich was für bestimmte Gegner aufzusparen.

[marcgfx]

Varianten für den Titelscreen, was denkt ihr?

[Chromanoid]

Mir gefällt der "Graffiti"-Schriftzug nicht, aber der Rest vom zweiten Screen.

[marcgfx]

Test mit grösserem Logo/Schriftzug (beim Graphiker habe ich eigentlich nur die Hintergrundbilder bestellt, den Schriftzug hat er selbst dazu erfunden).

Ich bin mir noch nicht sicher wegen dem Schriftzug. Ich finde es besser als was ich zuvor hatte, es ist nicht so steril. In dieser Version habe ich das Logo leicht angepasst, die beiden E sind jetzt auf einer Linie.

[Chromanoid]

Mmh, ich bin kein Freund von dem Schriftzug, aber es ist echt nicht so leicht den mit der anderen Schrift lebendig zu kriegen. Im Anhang mal ein kurzes Experiment...

[marcgfx]

Danke für den Versuch Chromanoid, so ist die Schrift einfach irgendwie mikrig. Ich werde auch noch experimentieren... evtl die Schrift über den Kopf, ich kann da auch die Silhouette etwas rumschieben.

[marcgfx]

Neue Revisionen... Meinungen?

[joggel]

ich finde das erste Schriftbild am schönsten und passendsten.
Finde aber auch, das Bild von Chromanoid noch passender...

[Krishty]

Ich finde das erste besser als Chromanoids (und er hat recht, auf keinen Fall die andere Schriftart!).

[starcow]

Hallo marcgfx

Hier meine Meinung zum Thema.

Grundsätzlich finde ich das erste Bild eine gute Basis.

Folgende Probleme meine ich zu erkennen:

0) Grundregeln zu Grundregeln :D. Man sollte keine Grundregeln ohne guten (bewussten) Grund brechen
1) Symmetrie und Gewichtung: Der Schriftzug "Devader" ist nicht Mittig gewichtet. Wichtig ist hierbei, nicht blos auf den äussersten Rahmen der Pixel zu schauen (Das hat hier anscheinend der Grafiker gemacht), sondern auf den Schwerpunkt einer Grafik. Der Schriftzug muss weiter nach rechts.
2) Die vier Bullaugen sind ebenfalls etwas unglücklich platziert. Entweder Entschieden asymmetrisch oder dann genau symmetrisch. Immer nach der Maxime: Wenn, dann. Entschieden.
Aufgrund des symmetrischen Bildaufbaus, rate ich zu einer symmetrischen Platzierung.
3) Die Bullaugen sind ungünstig angeschnitten.
4) Grundsätzlich würde ich versuche die Aufmerksamkeit des Betrachters zum Schriftzug zu leiten (Helligkeit, Kontrast, Dynamik, etc.)

Ich hab mal ein Vorschlag skizziert. Sehr quick und sehr dirty. :)
Es geht mir hier nur um die Bildsymmetrie und um die Aufmerksamkeit zur Mitte (Schriftzug) hin. Natürlich musst du das Grafikelement (Roboterkopf), nicht invertieren. Ich hatte auf die schnelle hin nur begrenzte Möglichkeiten. Ebenfalls habe ich einfach das Bild gespiegelt, um zu zeigen, was gemeint ist.

Gruss starcow



Edit:
Noch drei Punkte:
- Wäre ich der Grafiker, würde ich die Bullaugen ganz drauf nehmen, die Anzahl erhöhen, und die Farbigkeit eher Richtung Orange, Rot verschieben (Oder allenfalls dunkel lassen. Resp. die Umgebung spiegeln lassen -> Glas). Mein Blending hier im Beispiel ist nicht gut.
Mein Eindruck ist, dass man mit max. hellen Bullaugen (weiss) den Titel zu stark konkuriert.

[joeydee]

Je mehr Meinungen desto besser - daher versuche ich auch noch etwas zur Verwirrung beizutragen ;)
Im Wesentlichen nur 2 Dinge die noch nicht genannt wurden:
- Kombi aus gelandetem Ufo-Logo und Bots und Gegenlicht-Bullaugen. Die Bot-Silhouetten sind nämlich cool, bringen Dynamik rein.
- Komplementärfarbe. Grün oder Blau/Cyan passt zum Rot. Dein Spiel ist sehr bunt - also nur Mut.

z.B.:
(Den vorgenannten Regeln zur Symmetrie stimme ich zu, habe aber auf die Schnelle jetzt nichts geändert)

[marcgfx]

Ein riesen Dankeschön für das tolle Feedback! Gibt ganz schön viel zu verarbeiten, hab es mal meinem Graphiker verlinkt :)

@starcow:
Die Graffiti-Schrift ist von meinem Graphiker, ich habe dann die Alternative mit dem Game-Font erstellt. Ich habe in der Tat einfach zentriert und nicht auf die Schriftgewichtung geachtet, guter Hinweis! Danke für das Beispiel und die vielen anderen guten Tips, ich werde sie mir noch öfters durchlesen.

@joeydee: Ich finde es cool, dass du gleich beide Bilder verschmolzen hast. Ich werde mit den Farben noch etwas experimentieren, wobei mir deine Version schon fast zu grün ist. Danke!

[marcgfx]

die Gewichtung der Schrift etwas nach rechts versetzt, gleichzeitig den Robokopf nach links geschoben und etwas mehr Farbe ins Spiel gebracht. Ich seh grad die Funken habe ich vergessen :( aber bin jetzt gleich wieder unterwegs.

[Psycho]

Ich bin verliebt in joeydees Version.

[marcgfx]

OK verstanden ;) Ich finds auch ziemlich cool.
Das Grün hat mir etwas Kopfzerbrechen bereitet, evtl. könnte es ja das leuchten von den Hexas sein? Der Hintergrund wirkt wie ein Planet. Das Leuchten ist auch schon gelöst, wird aber schwer zu animieren. Die Silhouette wird leicht bewegt werden und die Funken sollen sprühen. Danke für den Input!

[joeydee]

Und du machst dir echt Gedanken, woher irgendeine Farbe kommen könnte? :D


Es geht natürlich auch weniger bunt, bläulich oder monochrom hat auch was. Aber ich will da nicht in die Handschrift deines Grafikers pfuschen, das sollte am Ende natürlich zu den anderen Screens passen. Sieh es nur als Anregung, wo man sich die eine oder andere Idee herauspicken kann.





Wie auch immer, langsam scheint dein Projekt rund zu werden. Respekt dass du dich bis hierhin durchgebissen hast, und viel Motivation für den weiteren Verlauf!

[marcgfx]

Mein (bezahlter) Graphiker malt die Bilder, ich muss sie dann animieren, farblich anpassen und integrieren. Von daher keine Angst reinzupuschen, ich pusche auch die ganze Zeit rein :). Danke für die weiteren Varianten, sehen auch cool aus!

Das Explosionsbild ist halt schon nur ein Test, aber du hast recht die Farben kommen schon alle vor :)

[marcgfx]

Ich habe mich mal an einer animierten Version versucht.
http://data.cyberlympics.com/img/game/d ... index.html