PlanetSwitch Planet3DS PlanetVita PSP.de PlanetiPhone Classics Forum

PGN-ID:[?] (Nicht eingeloggt)
Login
Registrieren
PlanetDS PlanetGameboy N-Page.de

-

Sonstiges: Entwicklertagebuch - Der Weg zum eigenen Switch-Spiel

Michael Grönert, am 26.12.2016, Seite 21 von 25

Artikel mögen: Weitersagen:


BadToxic Discord-Server | GameMaster Discord-Server | BadToxic auf Twitter
BadToxic auf Instagram | BadToxics Entwickler-Instagram | BadToxic auf YouTube

2016- Teil 1: Willkommen in der Welt der Videospielentwicklung!
2017- Teil 2: Am Anfang stand die Idee
- Teil 3: Die Voraussetzungen
- Teil 4: Die letzten Vorbereitungen
- Teil 5: Es kann losgehen
- Teil 6: GONG! Das erste Minispiel
- Teil 7: Das Inventar
- Teil 8: Speichern & Laden
- Teil 9: Fähigkeitenbaum & Menüs
- Teil 10: Errungenschaften & Benachrichtigungen
2018- Teil 11: Tag- und Wetterwechsel
- Teil 12: Netzwerk-Spiele
- Teil 13: Begleiter-Haustier
- Teil 14: Unterstützung für Android und iOS
- Teil 15: Pairs - Finde Kartenpaare
- Teil 16: Einbauen von Pairs in GameMaster
2019- Teil 17: Statistiken
- Teil 18: Fizhy
- Teil 19: Fizhy in GameMaster einbauen & KI
- Teil 20: Erschaffen einer Community
- Teil 21: Shader und Partikel
2020- Teil 22: Overworld-Landschaftsgestaltung
- Teil 23: Charaktere im 3D-Manga-Style
- Teil 24: Gemeinsam Hamburger „kochen“
- Teil 25: Charakter-Individualisierung

Teil 21: Shader und Partikel
Heute beschäftigen wir uns mit Shadern (von englisch shade für „Schattierer“). Shader sind Hardware- oder Software-Module, die bestimmte Rendering-Effekte implementieren. In unserem Fall sind Shader kleine Programme, welche effizient auf direkt dafür vorgesehenen Einheiten der Grafikkarte laufen können. Sie werden in speziellen Sprachen verfasst, wie GLSL (OpenGL Shading Language) oder HLSL (High Level Shading Language). Fehlen einem Gerät bzw. der Grafikkarte die Shadereinheiten, müssen die Shader mit der CPU - wesentlich langsamer - berechnet oder komplett weggelassen werden. Doch keine Sorge, auch dieses Mal soll es nicht zu technisch werden. Viel mehr schauen wir uns die Ergebnisse an, die wir mit Shadern erreichen wollen, als ihre konkrete Umsetzung.

Ziele: Generationen-Wechsel
Wir wollen die Minispiele in GameMaster weiterentwickeln können. Begonnen mit simplen Pixel-Grafiken, wie wir sie vom Game Boy gewohnt sind, bis hin zu hübschen 3D-Grafiken. Das würde theoretisch bedeuten, dass wir für jede Variante eigene Grafiken anfertigen müssten - ein enormer Aufwand. Doch es gibt Tricks um unsere Grafiken älter und pixeliger aussehen zu lassen, ohne viel Arbeit aufzubringen. „Post Processing“ (Nachbearbeitungs-) Shader erlauben uns einzelne Pixel und ihre Farben so zu manipulieren, dass das Resultat aussieht, als liefe es auf einem schwächeren Gerät mit eingeschränkter Technik. Man kann es sich so vorstellen, dass beispielsweise immer vier oder mehr Pixel zu einem zusammengefasst werden, welcher den Mittelwert aller Pixelfarben hat. Im Falle unseres GameGuys, welcher einem Game Boy gleichen soll, sind wir auf vier Farben, bzw. Graustufen eingeschränkt. Unsere Pixel bekommen also die Farbe, welche von diesen vier am nächsten dran ist.


Eine monochromatische 8Bit-Version mit vier Graustufen

Ich kann die Fisch- und Köder-Grafiken aus meiner älteren Fizhy-Version wiederverwenden, muss aber für die 8Bit Variante trotzdem die Fische nochmals überarbeiten. Natürlich muss auch noch einiges Weiteres für die 2D-Versionen getan werden, wie das Wasser und das Becken anzulegen, oder Kameraeinstellungen zu machen, aber da der heutige Tagebucheintrag von den Shadern handeln soll, beschränke ich mich nur auf die grafischen Ergebnisse.

Ähnlich geht es mit der nächsten Entwicklungsstufe weiter, welche einem NES (Nintendo Entertainment System) ähneln soll. Ein NES kann bereits 16 bis 25 von 52 Farben gleichzeitig darstellen. Ganz so streng muss es der Shader nicht nehmen, es soll ja nur so aussehen und das gelingt auch einfacher.


Die farbige 8Bit-Version

In dieser Version pflege ich ein paar Landschaftsdetails vom japanischen Zen-Garten ein. Doch irgendwas fehlt noch für das richtige Retro-Feeling. Das Bild gleicht einer typischen NES-Ausgabe, doch haben auch damalige Fernsehgeräte stark zum Aussehen beigetragen. Auch dies lässt sich mit einem Shader nachempfinden. Dazu verwende ich einen CRT (englisch „Cathode Ray Tube“)-Shader, der einen sogenannten „Kathodenstrahlröhrenbildschirm“ simuliert. Grob gesagt lässt dieser es so aussehen, als wären die Pixel eines Röhrenmonitors in ihren einzelnen Farben rot, grün und blau erkennbar. Dazu kommt noch die typische Wölbung der Bildfläche.


Nochmal die farbige 8Bit-Version, aber mit CRT-Effekt

Als nächstes biete ich eine 16Bit-Version an, welche in etwa einem SNES (Super Nintendo Entertainment System) gleicht. Mit ihrer 15-Bit-Farbpalette sorgt diese Konsole bereits für eine gewaltige Aufwertung. Für diese modelliere ich eine Extra-Variante des japanischen Zen-Gartens, welche ich auch für die 8Bit-Ausgabe nutze. Auch hier ist der CRT-Effekt passend.


Die 16Bit-Version, links mit CRT-Effekt, rechts ohne

Die danach folgende 32Bit-Version kennt ihr bereits aus vorherigen Tagebucheinträgen. Doch auch für diese erstelle ich aus Experimentierfreude zwei spezielle Shader-Varianten.


Die Welt sieht mit dem Bleistift-Shader aus wie gezeichnet

Zum einen haben wir hier eine Variante, die aussehen soll, als wäre sie mit Bleistift gezeichnet worden. Und zum anderen, mein persönlicher Favorit, eine Neon-Version. Ob und wie ich diese sinnvoll begründet in das Spiel einfließen lassen werde, weiß ich noch nicht mit Sicherheit. Vielleicht biete ich sie nur aus Spaß an.


Ein Neon-Shader - ich liebe diese Variante

Grafikeffekte
Shader eignen sich nicht nur zur Nachbearbeitung des Bildes, sondern können auch gezielte Grafikeffekte erzeugen. Davon habe ich bereits ein paar für Fizhy umgesetzt. Die meisten dieser Effekte sind allerdings mittels Partikeleffekten realisiert, was wieder eine ganz andere Technik ist. Mit ihr lässt sich eine große Anzahl von Objekten animieren. Partikelsysteme werden beispielsweise eingesetzt, um Feuer-, Rauch- oder Explosionseffekte zu simulieren. Wenn ihr den folgenden Fizhy Screenshot mit einer älteren Version vergleicht, seht ihr, dass sich eine Menge getan hat. Eigentlich realisiert man die Unterschiede erst richtig im bewegten Bild.


Die gewohnte 3D(32Bit)-Version

Zunächst erkennt ihr einige Wölbungen auf dem Boden. Diese werden via Shader realisiert und bewegen sich in einem konstanten Tempo. Tatsächlich sieht dies aber wie Wasserspiegelungen auf dem Boden aus. Für gewöhnlich realisiert man dies mittels Projektion von Texturen über die gewünschte Fläche. Diese Alternative habe ich beim Experimentieren mit Shadern entdeckt und schätze sie als recht effizient ein. Als nächstes könnt ihr eine Art blauen Nebel im Wasser erkennen, welcher das Sichtfeld in die Entfernung zunehmend einschränken soll. Dieser ist mittels Partikeln realisiert, obwohl Nebel normalerweise gut per Shader umgesetzt werden kann. Ich habe mich für diese weniger effiziente Methode entschieden, weil es in meinen Shader-Experimenten problematisch war, durch das Wasser blickend die nebelfreie Oberfläche sehen zu können. Bestimmt ließe sich auch dieses Problem anderweitig lösen, aber das Gebiet ist für mich neu und ich möchte vorankommen. Des Weiteren erkennt ihr kleine Blasen, welche zufällig und bevorzugt bei Bewegung eines Köders, bis zur Wasseroberfläche aufsteigen. Auch das sind Partikel, welche kleine Bilder nutzen. Zuletzt gibt es noch einen Partikeleffekt, welcher auftritt, wenn ein Köder ins Wasser geworfen wird, zu sehen im nächsten Screenshot.


Partikel-Platscher-Effekt, wenn ein Köder ins Wasser fällt

Unmögliche Objekte
Jetzt kommen wir zu etwas ganz Speziellem. Mit Shadern lassen sich auch Effekte darstellen, die in der Realität gar nicht möglich sind. Stellt euch beispielsweise ein Portal vor. Wie ein Fenster zu einem anderen Ort, einer anderen Zeit oder Realität. Oder man läuft drei Mal um dieselbe Säule um plötzlich woanders herauszukommen. Ein absolutes Musterexemplar, welches jede Menge solcher Effekte bis an die Spitze treibt, ist das Spiel Antichamber.

Diese Techniken habe ich zunächst nur aus Interesse daran untersucht und nicht weil ich ihre Verwendung direkt geplant hatte. Doch einen Grundpfeiler dieser Techniken möchte ich hier vorstellen, welcher es bereits ins Spiel schafft. Ich erstelle eine Art Spielkarte, welche eine eigene dreidimensionale Welt in sich trägt. Diese Welt ist nur durch das „Fenster“ der Karte sichtbar, man kann nicht etwa drumherum schauen. Also gewissermaßen ähnlich einem holografischen Effekt, welcher manche Sammelkarten ziert, aber nicht auf wenige Blickwinkel beschränkt. In folgendem Video sieht man ein fertiges Beispiel solch einer Karte.


Diese Karten möchte ich für alle Minispiele erstellen und sie sollen eine Art Trophäe dafür darstellen, dass man das jeweilige Minispiel „besiegt“ hat. Was genau das bedeutet, lege ich erst später fest. Ob man beispielsweise alle oder einen bestimmten Anteil der Achievements gefunden haben muss.

Um grob die Funktionsweise zu erklären: Alle Objekte innerhalb der Karten-Welt haben bestimmte Materialien, welche alle den selben Index als eine Shader-Variable haben. Das Karten-Fenster hat eine Art Shader-Maske mit demselben Index und fungiert als Gegenstück. Die Shader sind angewiesen, die Pixel der Objekte nur zu zeichnen, wenn sie von einer Maske mit identischem Index überlagert sind. Diese Karte stelle ich in einer simplen Fassung kostenlos zum Download zur Verfügung. Zum einen auf GitLab, wo ihr euch auch eine WebGL-Vorschau anschauen könnt und zum anderen, als mein allererstes Produkt dort, im Unity Asset Store. Für letzteres war etwas mehr Aufwand in Form von aufpolierten Bildern in verschiedenen Größen, erklärende Texte und das Einhalten etlicher Richtlinien nötig. Tatsächlich musste meine Karte ganze drei Mal durch einen mehrwöchigen Verifikationsprozess, bis es endlich geklappt hat. Theoretisch könnte dieser Store natürlich auch als Einnahmequelle dienen, doch aktuell plane ich dies nicht. Hier hättet ihr den Vorteil, die Karte direkt und ohne Aufwand in euer eigenes Projekt importieren zu können.

Nun habt ihr bereits einige Beispiele dafür gesehen, was mit Shadern und Partikeln möglich ist. Damit möchte ich für heute zum Ende kommen. Das nächste Mal machen wir einen kleinen Abstecher in die Landschaftsgestaltung unserer „Overworld“ und beschäftigen uns mit Gras, welches sich sogar biegt, wenn man hindurch läuft.

Ihr möchtet die Auszüge aus dem Leben eines Entwicklers lieber in englischer Sprache lesen? Unter diesem Link findet ihr die englische Version dieses Tagebucheintrags!


Gehe zu Seite:
Vorherige Seite | Nächste Seite

ANZEIGE:
Kommentare verstecken

- Kommentare


- Noch keine Kommentare vorhanden -

Um Kommentare zu schreiben, bitte oben einloggen oder jetzt Registrieren!