Der ultimative Kurs für Unity 2D Games in Pixel Art
4.8 (135 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,364 students enrolled

Der ultimative Kurs für Unity 2D Games in Pixel Art

Von Grafik bis Code: Erstelle Dein pixelpräzises, smartphone-fähiges RPG mit Aseprite, C# und Unity 2018.
Highest Rated
4.8 (135 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,364 students enrolled
Last updated 4/2020
German
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 23.5 hours on-demand video
  • 24 articles
  • 21 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • PixelArt verstehen und 2D Grafik selbst zeichnen können
  • Unitys 2D Kachel- und Sprite-System beherrschen
  • Pixel-perfekt ausgerichtete 2D-Spiele in Unity programmieren
  • Eigenes, leicht erweiterbares Minirollenspiel erstellen
  • Steuerung per Tastatur, Gamepad und Touchscreens (Smartphone) realisieren
Requirements
  • Windows-PC oder Mac
  • Unity ab 2018.2 (ältere Version funktioniert NICHT!)
  • Aseprite ab 1.2.7
  • Grundwissen über C# (bzw. OOP) empfohlen
  • Spaß an technischen Bastel-Projekten
Description

Lerne PixelArt zu zeichnen und mit Unity-C# in 2D-Spiele zu verwandeln, DEM weltweiten Industrie-Standard für Videospiel-Produktion. Inklusive gratis eBook PDF Download!

Die Tutorials dieses Kurses beschäftigen sich zur Hälfte mit dem Erstellen von PixelArt-Grafik, die wir in einem der führenden Spezial-Werkzeuge erstellen: Aseprite. Du lernst, worauf es aus gestalterischer Sicht ankommt, um mit wenigen Pixeln ansprechende Hintergründe, Objekte und Figuren zu erstellen. Der Kurs zeigt Dir die Konzepte und Handgriffe zur Realisierung von kachelbaren Grafiken, der Objektorganisation in Spritesheets, dem Definieren von Animationssequenzen und vieles mehr.

Die andere Hälfte der Inhalte zeigt, wie sich die 2D-Werkzeuge von Unity einsetzen lassen, um mit den gezeichneten Bildern ein interaktives Mini-Rollenspiel (RPG = Role Playing Game) umzusetzen. Besonders viel Wert legt der Kurs auf die pixelpräzise Darstellung der Grafiken, so dass der sorgfältig erstellte Pixel-Look Deiner Grafiken auch bei Skalierung und Zusammenspiel mehrerer technischer Komponenten stets gestochen scharf und sauber ausgerichtet bleibt. Dieses extra für diesen Kurs ausgearbeitete Detailwissen, wirst Du in kaum einem anderen Unity-Kurs oder Tutorial finden!

Wenn Du diesen Kurs belegst, wirst Du durch alle Entwicklungsschritte von Erstellen der Grafiken bis zur Umsetzung des Spiels geführt. Nach Abschluss aller Lektionen hast Du einen Werkzeugkasten erstellt, mit dem Du den im Kurs entstandenen Spielprototyp problemlos um weitere Levels und Inhalte erweitern kannst!

Als Vertiefungs-Thema für fortgeschrittene Anfänger ist dieser Kurs eine hervorragende Fortsetzung für Teilnehmer, die bereits erste Schritte in Unity und C# unternommen haben. Keine Sorge - es werden alle Details der Umsetzung unserer Spielinhalte genau besprochen. Da wir uns jedoch voll auf die Umsetzung von Spiellogik und 2D-Techniken konzentrieren, solltest Du mit Grundlagen der objektorientierten Programmierung bereits vertraut sein und beispielsweise wissen, was eine Variable, Funktion oder Klasse ist. 


DAS WIRST DU LERNEN:

Aseprite und Pixel-Design:

  • Worauf man bei PixelArt achten sollte

  • Farbe und Formen bei geringer Pixelauflösung gezielt setzen

  • Detaillierte Erklärung wie Du Hintergründe, Bäume, Büsche, Figuren, Gegenstände, uvm. zeichnest.

  • Funktionsweise der Aseprite-Werkzeuge kennen und richtig einsetzen

  • Wiederholbare Hintergrundgrafiken erstellen

  • Mit Ebenen arbeiten, Animations-Frames organisieren und verbinden

  • Bild-Bögen ("Sprite-Sheets") in Aseprite exportieren und in Unity importieren

  • Pixelpräzise Schriften verwenden (Textlogo bauen)

  • Spezialeffekte wie Licht/Schattenkante und Pixelfarbverläufe realiseren

  • ...

Unity und Levelaufbau:

  • Unitys Tilemap-System verwenden, um das Level per Pinsel in die Szene zu malen

  • Unity für die scharfe, pixelpräzise Darstellung von 2D-Objekten konfigurieren

  • animierte oder zufällig variierte Spezialkacheln erstellen

  • Intelligente Kacheln definieren, die die Grafik aufgrund der gezeichneten Form auswählen

  • Zeichenreihenfolge über Sortierindizes und Ebenen beeinflussen

  • Räumliche Effekte über Ebenen realisieren

  • Ankerpunkte und Segmente für 2D-Grafiken bearbeiten

  • 2D-Animationen per Zeitleiste

  • Animator-Zustandsdiagramme, inkl. Parametrierung und Überschreiben einzelner Grafiken

  • UI-System mit pixelpräziser Ausrichtung verwenden

  • Pixelpräzise ausgerichtete, dynamische Texte mit Pixelschrift darstellen

  • Mit Prefabs einen Baukasten aus Spielobjekten zur Levelgestaltung aufbauen

  • Szenenwechsel, Menüs, Pause und Gameover-Zustand realisieren

  • Audio-Komponenten in die Szene integrieren, wiederholen oder einzeln abspielen, aus der Zeitleiste aufrufen

  • Einstellungen für die Publikation des Projekts

  • ...

C#-Programmierung:

  • Pixelpräzise Objekt-Bewegungen berechnen

  • Kollisionen selbst auswerten, um Verschiebungen durch das Physik-System zu verhindern

  • Zeitabhängige Berechnungen, Spielablauf ganz oder teilweise pausieren

  • Geräteunabhängige Steuerungskomponenten aufbauen

  • Reine Skript-Animationen

  • Scripte mit Zeitleistenereignissen verbinden

  • Savegame auf JSON-Basis, Serialisierung von Datenobjekthierarchien, Speichern & Laden im Dateisystem

  • Bewegungsblockaden, Ereignisauslöser, Inventarmechnismus, Objektzerstörung programmieren

  • Sound per Code steuern, einzelne Sounds trotz Spielpause fortsetzen

  • Text aus Assets lesen und sequenziell anzeigen

  • ...


DAS SETZEN WIR IN DIESEM KURS KONKRET UM:

  • Kachelsystem zur Gestaltung von Gras, zufällig gestreutes Laub, im Wind wehende Blumenwiese

  • Animierte Ozean-Fläche im Hintergrund

  • Wanderweg mit automatischer Richtungs- und Kurvengrafik

  • Insel-Landmasse, mit automatischer Wahl der jeweils richtigen Randgrafik an der Formkante

  • Heldenfigur, die in vier Richtungen laufen und kämpfen kann

  • Bäume mit räumlichem Effekt (Figur läuft vor den Wurzeln, aber hinter der Baumkrone vorbei)

  • Blocker-Hilfsmittel, um die Laufbewegung auf die Landmasse zu beschränken

  • Ausrüstbarer Schild, mit Wechsel der Bilder der Heldenfigur ("Skin")

  • Ausrüstbares Schwert mit sichtbarem Schwung beim Schlagen

  • Inventar, einsammelbare Kristalle und Lebesenergie-Herzen

  • Zerstörbare Büsche mit Zerschlagungsanimation

  • Feinde, die den Weg blockieren, den Helden verletzen und wegstoßen und mit dem Schwert zerstört werden können

  • Modulare Explosion, die z.B. bei Feindvernichtung abspielt

  • Blinken des Helden bei Verletzung

  • Todesanimation und GameOver bei vollständiger Erschöpfung

  • Zufälliges Erscheinen von Schätzen bei Zerstörung von Busch und Feind ("Random Spawns")

  • Status-Leiste per UI-System - pixelpräzise mit der Spielszene ausgerichtet

  • Savegame-System zur Sicherung von gesammelten Ressourcen, zerstörten Objekten und Spielerzustand

  • Speicherpunkte und Portalsystem

  • Integration von Musik und Soundeffekten (verschiedene Techniken)

  • Pausieren und Fortsetzen, Anzeige eines InGame-Menüs bei abgedunkelter Szene

  • Startmenü zum Fortsetzen, Neustarten oder Beenden des Spiels; inkl. animiertem Wolkenhintergrund

  • Credits-Szene mit selbstablaufendem Abspanntext (aus Textdatei gelesen)

  • Steuerung per Tastatur und Gamepad

  • Erstellen einer Bildschirmtastatur, um das Spiel auf Smartphones bedienen zu können

  • ...

ES WIRD NOCH BESSER:

  • Übungen mit Musterlösungen zur eigenen Vertiefung der Themen

  • Ressourcen und Download-Links, um sofort selbst mitzumachen

  • Kostenloses eBook (PDF) mit Stichpunkten und Code-Schnipseln zu sämtlichen besprochenen Techniken auf über 35 Seiten!

  • pures Kompaktwissen - keine langen Compiler- oder Wartezeiten in den Videos

  • ... und natürlich Udemys extrem kundenfreundliche Benefits: 30-Tage Rückgaberecht, integriertes Support-Forum und Abschlusszertifikat

     

Los geht's - starte jetzt mit der Programmierung Deiner Spiele!


Who this course is for:
  • Fortgeschrittene Anfänger, die schonmal mit Unity C# gearbeitet haben
  • Kreative Pixel-Art-Liebhaber, die ein eigenes Spiel programmieren wollen
  • Entwickler mit Begeisterung für Retro-Games
Course content
Expand all 243 lectures 23:25:19
+ Einleitung
7 lectures 20:44
eBook-Download
00:09

Aseprite wird als kostenloses Produkt oder als Quellcode angeboten. Hier schauen wir auf die beiden Modelle.

Preview 03:05
In diesem Video erfährst Du, wie Du eine Aseprite-Lizenz erwirbst, sowie Besonderheiten der Dateinamenerweiterung.
Preview 02:30
Benötigte Unity-Version
00:13

Zu Beginn legen wir unsere Basisauflösung fest und optimieren Aseprite für die Arbeit mit diesem Format.

Aseprite anpassen und einrichten
04:57

Dieses Video gibt eine kurze Vorschau auf die Charakteristik von Pixel-Art und die daraus entstehenden technischen Herausforderungen mit denen wir uns im weiteren Kursverlauf beschäftigen werden.

Einführung Pixel-Art und Kachel-System
06:32
+ Gras zeichnen - Erste Schritte in Aseprite
4 lectures 22:37

Anhand des Beispiels einer einfachen Grasfläche betrachten wir in diesem Video die grundsätzliche Arbeitsweise von Aseprite sowie einige der essentiellen Werkzeuge.

Gras zeichnen
05:00

Die visuelle Wirkung von Pixel-Art lässt sich durch die bewusste Auswahl einer Farbpalette stark beeinflussen. Aseprite enthält bereits eine Sammlung typischer Gruppen aufeinander abgestimmter Farben.

Farbe in PixelArt und Aseprite
09:22

Aseprite bietet verschiedene Werkzeuge, um ein Bild einzufärben.

Gras einfärben - Verschiedene Ansätze zum Färben
07:04

Unter MacOS verwendet Aseprite das Systemmenü. Das Erscheinungsbild unter Windows lässt sich über die Einstellungen auch auf dem Mac aktivieren.

[MacOS] Menüzeile einblenden
01:11
+ Grasfläche erzeugen - Grundaufbau Pixelprojekt in Unity
5 lectures 20:35

Zunächst legen wir ein neues Unity-Projekt und eine Basis-Ordnerstruktur an.

Neues Unity-Projekt anlegen
05:05

Infos zur Verwendung einer neueren Unity-Version.

Kompatibilität mit Unity ab 2018.3
01:06

In diesem Video besprechen wir Aseprite-Optionen, die sich auf das Speichern und Exportieren beziehen. Unsere Gras-Kachel wird dabei für Unity exportiert.

Bild speichern und exportieren
04:32

In diesem Video sehen wir uns die Parallelen zwischen dem Unity-Tilemap-System und den Arbeitsabläufen eines Künstlers an, wodurch das Konzept leicht nachzuvollziehbar wird.

Preview 02:24

Wir importieren binden unsere Gras-Textur nun in das Tilemap-System ein und erstellen die notwendigen Bestandteile, um die Grasfläche mit grafischen Werkzeugen bearbeiten zu können.

Eine Tilemap erstellen und Werkzeuge anwenden
07:28
+ Pixel gestochen scharf darstellen
4 lectures 16:22

Die Import-Einstellungen für Grafiken beeinflussen die Schärfe der Pixelgrafik.

Einstellungen an der Bilddatei
01:31

Wenn die Auflösung des Bildschirms und der Szenengröße nicht aufeinander abgestimmt werden, kommt es zu unschönen Verzerrungen der Grafik.

Hardware-Pixel und Software-Pixel synchronisieren
09:03

Die Hardware-Synchronisation schränkt die Darstellung der Inhalte zwangsläufig ein. Mit dem Problem kann auf zwei Arten umgegangen werden.

Lösungen für die abgeschnittenen Seiten
03:15

Als Arbeitsgrundlage für den weiteren Aufbau des Spiels legen wir jetzt eine sichtbare Kachelanzahl fest.

Kachel-Anzahl für weiteres Bearbeiten setzen
02:33
+ Gras und Laub - Ebenen, Überlappungen, Variationen
6 lectures 26:47

Um die Szene interessanter zu gestalten, lassen sich weitere Pinselfarben der Kachelpalette hinzufügen.

Einfarbiges Gras (Zweite Palettenfarbe)
03:06

Ausgereiftere Designs erfordern die Überlagerung von Elementen, um komplexere Hintergründe zu darzustellen. Für diesen Effekt lassen sich Kachel-Ebenen nutzen.

Laub und Streudeko (Überlagern von Kacheln)
05:28

Damit sich wiederholende Elemente wie das auf dem Boden liegende Laub abwechslungsreich aussehen, können mehrere Varianten erstellt und über ein einheitliches Sprite-Sheet verwaltet werden. 

Laub-Variation (statische Sprite-Sheets)
06:50

Anhand einer dritten Variation des Laubs werden in diesem Video die Arbeitsschritte bei der Verwendung von Spritesheets als Quelle für statische Kacheln wiederholt.

Dritte Laub-Variation (Zusammenfassung der Sprite-Sheet-Schritte)
02:40

Mithilfe eines Plugins ist es möglich, die vom Pinsel gezeichnete Kachel zufällig auszuwählen. Damit lassen sich Variationen und Streuungen sehr leicht realisieren.

Zufalls-Pinsel erzeugen (+ 2d-extras Download)
07:50

Durch die Sort Order lässt sich die Zeichenreihenfolge der Kachel-Ebenen unabhängig von der Objektreihenfolge festlegen.

Fehlerquelle: Zeichenreihenfolge der Ebenen festlegen
00:53
+ Blumen im Wind - Animierte Hintergründe
6 lectures 21:33

Mit den Ebenen, Frames und Animationswerkzeugen wie dem Zwiebelschichteffekt und Verbundenen Frames zeichnen wir zunächst eine animierte Blume in Aseprite.

Animierte Blume zeichnen
06:03

In diesem Video sehen wir uns die automatisierte Sprite-Aufteilung sowie die Erstellung animierter Kacheln an.

Blume in Unity einbauen (Grundlage animierte Kacheln)
04:28

Sowohl Kachelebenen als auch Animierte Kacheln selbst haben Eigenschaften, die die Animationsgeschwindigkeit beeinflussen.

Animationsgeschwindigkeit steuern
03:09

Der ungenutzte Platz in der Blumen-Kachel wird durch Duplizieren und Verschieben der Ebene nun aufgefüllt.

Blumendetails ergänzen
04:51

Unitys eigene Optimierungseinstellungen können bei PixelArt Bildstörungen verursachen, so dass Pixel die falsche Farbe haben oder komplett verloren gehen.

Fehlerquelle: Kompressionsartefakte in der Pixelgrafik
01:09

Zur Ausdekoration der Kachel ergänzen wir nun Grashalme, die wir dank Aseprites Frame-Verknüpfung nur einmal für die gesamte Animation zeichnen müssen.

Grashalme ergänzen (Verbundene Frame-Bearbeitung)
01:53
+ Wanderweg - Regelbasierte Kacheln
5 lectures 30:35

Zu Beginn zeichnen wir sehr einfache Bilder für horizontale und vertikale Wege, sowie eine Kreuzung.

Wege-Sprites zeichnen
04:33

Mittels der einfachen Wege-Grafiken sehen wir uns das Grundprinzip der regelbasierten Kacheln an. Es wird ein Pinsel entstehen, der die Grafik automatisch anhand der Strichrichtung auswählt.

Grundprinzip regel-basierter Kacheln
06:41

Wir ergänzen die regelbasierte Kachel nun um Eckstücke und sehen uns dabei Möglichkeiten der Wiederverwendung von Grafiken durch automatische Spiegelung und Rotation an.

Ecken ergänzen
02:47

Zur Komplettierung unseres dynamischen Pinsels ergänzen wir abschließend T-Stücke bei denen zwei Wege rechtwinklig aufeinander treffen.

T-Stücke ergänzen
06:45

Sobald sich Kacheln durch Details wie eine Schattenkante unterscheiden, funktioniert die Spiegelfunktion nicht mehr wie gewünscht und es müssen individuelle Kacheln erstellt werden.

Individuell gestaltete Kacheln
09:49
+ Graskanten und Inseln - Regelbasierte Kacheln
5 lectures 33:23

Zunächst sehen wir uns an, wie sich regelbasierte Kacheln auch dazu eignen, Flächenränder zu verschönern. 

Einfache Graskante zeichnen und konfigurieren
10:33

Nachdem der Grundaufbau der Graskanten fertig ist, können wir mit der grafischen Ausgestaltung beginnen.

Deko: Erd-Ränder unter der Graskante
06:05

An einem ersten Beispiel sehen wir uns an, wie die noch fehlende Gestaltung konvexer Ecken ergänzt werden kann.

Konvexe Ecke ergänzen
07:34

Im Zeitraffer kannst Du hier nachverfolgen, wie ich die restlichen drei Ecken nach dem in der vorherigen Lektion vorgestellten Vorgehen ergänze.

Restliche konvexe Ecken vervollständigen
02:07

Da mir die hintere Graskante noch nicht gefällt, kannst Du Dir in diesem Video ansehen, wie ich sie noch verändert habe.

Der Clip enthält keine essentiellen Neuerungen und kann auch übersprungen werden.

Deko-Details: Graskante verschönern (überspringbar)
07:04
+ Baum - Übergroße Kacheln
9 lectures 51:59

Zunächst legen wir die Grundform des Baumes in Aseprite auf verschiedenen Ebenen an.

Baum zeichnen - Grundform
04:33

Um der Baumkrone ein plastisches, kugelförmiges Aussehen zu verleihen, fügen wir nun Farbstufen ein.

Baum zeichnen - Kugelform und Farbstufen
04:55

Durch das Hinzufügen von Details ändert sich das Aussehen der Kugel zu einer Baumkrone.

Preview 04:25

Die Ausgestaltung der Wurzeln vervollständigt nun den Baum.

Baum zeichnen - Wurzeln
04:40

In diesem Video lernst Du den Unterschied zwischen Ebenentransparenz und transparenter Pinselfarbe in Aseprite anhand der Gestaltung des Baumschattens kennen.

Baum zeichnen - Transparenter Schatten
07:04

Dieses Video demonstriert die Ausrichtungsprobleme, die beim Einsetzen der übergroßen Kachel in Unity entstehen und gibt eine Vorschau auf zwei Lösungsmöglichkeiten.

Situation in Unity - 2 Wege zur Problemlösung
03:14

In diesem Video erfährst Du, wie Du die Ausrichtung mittels Anpassung der Ankerpunkte korrigierst.

Methode 1: Ankerpunkte verändern (überspringbar)
10:53

In diesem Video erfährst Du, wie Du das Ausrichtungsproblem durch Segmentieren des Sprites sehr einfach lösen kannst.

Methode 2: Bild segmentieren
04:18

Ein Vorteil des segment-basierten Weg 2 ist, dass sich auch Teilstücke gut austauschen lassen. In diesem Video erfährst Du, wie dies konkret funktioniert. Dazu erzeugen wir einen dichten Wald durch Überlappung von Bäumen - ohne zusätzliche Ebenen.

Überlappungen der Bäume
07:57
+ Spielfigur - Grundlagen für interaktive Sprite-Objekte
8 lectures 51:38

Dieses Video erklärt die beiden Sortierebenen, mithilfe derer sich festlegen lässt, welche Elemente im Vordergrund und welche im Hintergrund erscheinen.

Zeichenreihenfolge - Theoretischer Hintergrund
05:29

Wir legen zunächst ein einfaches Platzhalterobjekt an, um die bewegliche Spielfigur vorzubereiten. Eine separate Sortiergruppe bietet sich in diesem Zusammenhang an, um die Zeichenreihefolge zu verwalten.

Dummy-Objekt anlegen und sortieren
05:42

Ein einfaches C#-Script bewegt die Figur auf Tastendruck nun zur Seite.

Bewegung mit C# - Grundansatz
04:00

Mithilfe der Berücksichtung anfallender Rechenzeiten ist es möglich, ein Spiel so zu programmieren, dass es unabhängig von der Hardware läuft. Diese Präsentation erläutert die Grundlagen und den mathematischen Ansatz hinter diesem Prinzip.

Time.deltaTime erklärt
10:19

Die im vorangehenden Vortrag kennengelernten Grundlagen werden jetzt im Projekt angewendet, um den Platzhalter per Tastendruck in alle vier Richtungen zu bewegen.

Bewegung in vier Richtungen, framerate-unabhängig
04:26

Mittels Unitys Physik-System bewirken wir, dass der Held nicht mehr über Bäume und andere Hindernisse läuft, sondern davor stehen bleibt.

Hindernisse mit Collidern realisieren
08:14

Zur Optimierung des Codes sehen wir uns in diesem Video die Bedeutung von FixedUpdate an und setzen dieses in unserem Projekt ein.

Optimierung: FixedUpdate nutzen
03:10

Durch geschickten Einsatz von Segmentierung und Ebenen lassen sich auch im 2D-Spiel interessante räumliche Wirkungen erzielen.

Variante: 3D-Effekt durch Ebenenverteilung
10:18