Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. Aesthetics
Gamedevelopment

Alte Schule: Spiele mit Retro-Ästhetik

by
Length:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Alles Alte ist wieder neu und Retro-Spiele sind beliebter denn je.  Getragen von Nostalgie und der Fülle an Casual- und Arcade-Spielen auf iOS- und Android-Geräten feiern Oldschool-Spiele ein Comeback.  In diesem Tutorial gebe ich Ihnen einige Tipps zum Erstellen eines erfolgreichen Retro-Themen-Spiels.


Wählen Sie einen Retro-Stil

Was meinen wir, wenn wir von Retro-Spielen sprechen?  Es gibt keine konkrete Definition, aber ich denke normalerweise an Spiele, die vor 1990 entstanden sind.  Dazu gehören Spiele von Konsolen wie GameBoy, NES, Atari 2600 und Commodore 64 sowie klassische Arcade-Spiele wie Pac Man, Centipede und Space Invaders.

Alle diese Beispiele verwenden blockartige, pixelierte Bitmap- (oder 'Raster') Grafiken. . Das sind die Arten von Spielen, die den meisten Leuten wahrscheinlich einfallen, wenn sie an Retro-Spiele denken.

Retro Games with Raster Graphics
Retro Spiele mit RastergrafikenRastergrafiken: Pac Man (Arkade), Frogger (Atari 2600), Super Mario Bros. (GameBoy)

Aber die frühesten Videospiele verwendeten tatsächlich Vektorgrafiken.  Spiele wie Battlezone, Asteroids und Tempest wurden mit hell leuchtenden Linien anstelle von blockigen Pixeln dargestellt

Retro Games with Vector Graphics
Retro Spiele mit VektorgrafikenVektorgrafik: Battlezone (Arkade), Tempest (Arkade), MineStorm (Vectrex)

Eine andere Art von Spiel, die wir alten Leute zu spielen pflegten, waren einfache Handheld-Spiele, die ein monochromes LCD-Display und eine extrem einfache Spielmechanik verwendeten.

Retro Games with LCD Graphics
Retro-Spiele mit LCD-GrafikenLCD-Grafik: Donkey Kong Jr. (Game & Watch), Marios Zementfabrik (Game & Watch)

In diesem Tutorial werden wir über die populäreren Rastergrafik-Spiele sprechen, aber ich erwähne diese anderen Arten von Spielen, weil sie nicht oft emuliert werden, und ich denke, es gibt eine Menge Möglichkeiten für Spieledesigner, etwas wirklich Cooles zu machen mit diesen Stilen.


Erstellen einer Farbpalette

Um ein überzeugendes Retro-Aussehen zu kreieren, sollten Sie mit einer begrenzten Anzahl von Farben arbeiten.

Alte-Schule-Spielkonsolen konnten nur eine begrenzte Anzahl von Farben anzeigen.  Je nach System werden Grafiken in Schwarzweiß, Graustufen oder 8- oder 16-Bit-Farben angezeigt.  Sie können Beispiele für die genauen Farbpaletten von bestimmten Systemen auf Wikipedia sehen, aber es ist nicht wichtig, historisch genaue Farben zu wählen, solange Sie einen konsistenten Stil innerhalb Ihres Spiels beibehalten.

Wir haben nicht die gleichen Hardwarebeschränkungen wie in der Vergangenheit, aber wenn Sie Ihre Palette auf ein paar sorgfältig ausgewählte Farben beschränken, werden Sie nicht nur die Retro-Ästhetik betonen, sondern auch die Identität Ihres Spiels bestimmen.  Schauen Sie sich diese zwei Beispiele von Farbpaletten von Super Mario Bros. an:

Color Palettes from Super Mario Bros.

Farbpaletten von Super Mario Bros.Die Farben sind so unterschiedlich, dass man das Spiel fast nur an den Farbfeldern erkennen kann.
David Sommers hat eine schöne Sammlung von klassischen Spielpaletten bei ColourLovers.com.

Die genauen Farben, die Sie auswählen, hängen vom Thema und der Stimmung Ihres Spiels ab, aber wenn Sie sich die Zeit nehmen, eine gute Auswahl an Farben zu wählen, wird Ihr Spiel so ikonisch wie die Klassiker sein.  Sehen Sie sich diese modernen Beispiele an:

Modern Games with Retro Palettes
Canabalt von Adam Atomic, Die letzte Rakete von Shaun Inman, Fez von Polytron

Wenn Sie Schwierigkeiten haben, Farben zu wählen, die gut zusammenpassen, dann schauen Sie sich dieses tolle Tutorial von Tyler Seitz an, indem Sie eine Farbpalette für das Artwork Ihres Spiels auswählen.


Auswählen einer Pixelgröße

Retro-Raster-Spiele sind am ehesten an ihren großen klobigen Pixeln zu erkennen, zu einer Zeit, als die Bildschirmauflösung viel niedriger war.  In der heutigen Welt der HD-Bildschirme und Retina-Displays sind die physischen Pixel auf unseren Geräten kaum sichtbar - nicht annähernd prominent genug, um das Retro-Blocky-Aussehen zu erhalten.

Scaling Up a Game Sprite
In diesem Beispiel wird jedes Pixel unserer Charaktergrafik auf dem Bildschirm mit vier physischen Pixeln angezeigt.

Um das zu berücksichtigen, müssen wir mehrere physische Pixel verwenden, um jedes sichtbare Pixel in unseren Spielgrafiken anzuzeigen.

Different Scale Factors

Sie können entscheiden, welche Skalierungsstufe für Ihr Spiel geeignet ist, abhängig davon, wie blockig Ihr Spiel aussehen soll.  In der Regel reicht eine Skalierung bis zur zwei- bis dreimal so großen Größe aus.  Denken Sie daran, dass je größer Sie gehen, desto weniger können Sie auf dem Bildschirm passen.

Ich empfehle, dass Sie Ihre Game-Engine immer Ihre Pixel-Skalierung für Sie vornehmen lassen.  Das bedeutet, dass alle deine Assets und Texte zu 100% (klein) gezeichnet sind und das Spiel den gesamten Spielbereich skaliert, um die endgültige Größe zu erreichen.  Sie können zwar Objekte mit größeren Pixeln zeichnen, das erhöht jedoch die Dateigrößen und Ladezeiten und kann sich auch negativ auf die Spieleleistung auswirken.

Pixel Scale Inconsistencies
Inkonsistente Pixelgrößen sehen nicht ganz richtig aus.

Der Versuch, Ihre Assets manuell zu skalieren, kann auch zu Inkonsistenzen in der Pixelgröße führen.  Beachten Sie im obigen Beispiel, wie groß die Pixel im Titel des Spiels im Vergleich zu den winzigen Pixeln im Text der Schaltfläche 'Jetzt spielen' sind.  Außerdem ist unser Spielcharakter blockierter als sein Edelstein oder der Höhlenboden.  Einige davon sind subtile Unterschiede, aber sie alle addieren sich, um das Spiel ein wenig "aus" aussehen zu lassen.

Neven Mrgan (Mitschöpfer von The Incident) spricht in seinem Blog ein wenig darüber.


Zeichnungs-Pixel-Kunst

Erstellen von gut aussehenden Pixel-Art kann extrem schwierig sein.  Es erfordert viel Übung und ist ein Thema, das zu umfangreich ist, um in diesem Tutorial vollständig behandelt zu werden.  Hier sind ein paar Links, um Sie zu starten:

Zeichen- und Animationswerkzeuge

Viele Leute verwenden normale Grafikprogramme wie Photoshop, Gimp oder sogar MS Paint, um Pixelgrafiken zu zeichnen.

Ich fand es frustrierend, Photoshop zu benutzen, sobald ich anfing, Charaktere zu animieren und nahtlose Kacheln auszulegen.  Also habe ich ein Werkzeug namens Pickle erstellt, um einige Funktionen zu ergänzen, die in herkömmlichen Editoren fehlten, wie Live-Animationsvorschau, nahtlose Kachelvorschau und Terrain-Kachelvorschau.

Pickle Sprite Editor

Pickle Sprite EditorPickle hat ein begrenztes Funktionsangebot und erfüllt nicht alle Bedürfnisse.  Zum Glück gibt es noch andere ähnliche Apps wie Pyxel Edit, ASEPRITE und GraphicsGale.

Tutorials 

Es gibt viele gute Tutorials zur Pixelkunst online.  Hier sind ein paar, die ich in der Vergangenheit hilfreich gefunden habe:


Charakter-Design

Überzeugende Charaktere mit lo-res Grafiken zu entwerfen kann sehr schwierig sein.  Wie können Sie genug Details darstellen, um einen einzigartigen Charakter mit so wenigen Pixeln und Farben zu erstellen, dass Sie damit arbeiten können?

Wie beim Zeichnen von Pixelgrafiken im Allgemeinen ist Charakterdesign etwas, das Geduld und Übung erfordert.  Wir können ein paar hilfreiche Strategien von klassischen Spielcharakteren lernen.

Verwenden Sie Einschränkungen zu Ihrem Vorteil

Mario Mario

Mario MarioWerfen Sie einen Blick auf unseren Freund Mario hier.  Beachten Sie, wie wenige Pixel verwendet werden, um einen erkennbaren menschlichen Charakter darzustellen.  Drei Farben, keine Konturen, keine Schattierung.  Wie können Sie ein Gesicht mit diesen Einschränkungen zeichnen?  Schauen Sie sich an, wie die Pixel, die Marios Schnurrbart zeichnen, auch dazu dienen, seine Nase und seinen Mund zu definieren.

Es wäre auch schwierig, Marios Arme auf dieser Detailebene zu zeichnen, ohne dass sie in seinen Körper übergehen und seinen Körper wie einen kleinen Klecks aussehen lassen.  Marios Schöpfer lösten dieses Problem, indem sie ihm einen Overall anzogen.  Sehen Sie, wie die Linien seiner Kleidung seine Arme deutlich vom Rest seines Körpers trennen?  Genius!

In diesem Fall erleichtert das Hinzufügen spezifischer körperlicher Eigenschaften (Gesichtsbehaarung und Overalls) es tatsächlich, ihn innerhalb der grafischen Grenzen zu zeichnen.  Die Einschränkungen selbst bestimmen das Design des Charakters.

Gehen Sie abstrakt

Pac-Man and Ghosts

Eine andere Technik, um mit grafischen Einschränkungen umzugehen, besteht darin, abstrakt zu werden.  Warum sollten Sie versuchen, einen erkennbaren menschlichen Charakter zu zeichnen, wenn Sie es nicht müssen?  Sehen Sie sich Pac-Man dort an.  Er ist nichts zu erkennen.  Er ist nur ein gelber Klecks mit einem Mund.

Pac-Man ist trotz seines Mangels an körperlichen Eigenschaften ein denkwürdiger Charakter.  Er erhält seine Persönlichkeit aus dem Gameplay - die Art, wie er sich durch das Labyrinth bewegt, seine Soundeffekte und die Art, wie er mit seinen Feinden interagiert.

Wer sagt, dass Sie menschliche Charaktere in Ihrem Spiel haben müssen?  Warum nicht den nächsten Pac-Man, Q*Bert oder Qix machen?


Menü- und Punktetext

Wenn Sie Grafiken für Ihren Titelbildschirm, In-Game-Menüs und andere Textelemente wie Partituren erstellen, müssen Sie mit dem Stil Ihrer Grafikelemente konsistent bleiben.  Das bedeutet, dass die gleiche Farbpalette, Pixelgröße und der gleiche Stil beibehalten werden.

Antialiased Text
Gotham Bold von Hoefler und Frere-Jones (Anti-Aliasing)

Die meisten Schriftarten sind so konzipiert, dass sie beim Anzeigen auf dem Bildschirm geglättet werden.  Das heißt, wenn wir versuchen, sie zu vergrößern, um sie an unsere Pixelgröße anzupassen, werden wir viele Pixel an den Rändern der Buchstaben sehen.  Es entspricht auch nicht der Ästhetik, die wir anstreben.  Es ist alles weich und verschwommen statt knackig und blockig.

Aliased Text
Gotham Bold ohne Anti-Aliasing

Daher möchten wir die Schriftarten ohne Anti-Aliasing anzeigen.  Aber eine normale Schriftart ohne Glättung anzuzeigen, wird normalerweise schrecklich aussehen.  Sie sind einfach nicht so konzipiert, dass sie so funktionieren.  Sehen Sie, wie funky und schwer zu lesen es bei 100% ist?  Wenn wir es in die Luft sprengen, sehen wir viele verirrte Pixel und unebene Striche.

Pixel Font
Bionika Black von Atomic Media

Die Antwort besteht darin, immer Schriftarten zu verwenden, die ohne Anti-Aliasing angezeigt werden sollen.  Sie lesen schön und sauber in kleinen Größen, und haben dieses große klobige Retro-Aussehen, wenn wir sie groß in die Luft sprengen.

Einige meiner Lieblings-Pixel-Schriftarten stammen von Matthew Bardram von Atomic Media.

Ein Nachteil bei der Verwendung von Pixelschriften ist, dass jede Schriftart nur für eine bestimmte Größe geeignet ist.  Stellen Sie sicher, dass Sie nur die Schriftart in dieser bestimmten Größe oder einem Vielfachen dieser Größe verwenden.  Wenn Sie also eine Schriftart verwenden, die für eine Auflösung von 10 pt ausgelegt ist, sieht sie auch bei 20 oder 30 pt gut aus, aber nicht bei Größen dazwischen.


Spielmechanik

Denken Sie darüber nach, welche Art von Spielmechanik am besten zu Ihrem Kunststil passt.  Wenn Sie eine vereinfachte, klassische Mechanik wählen, werden Ihre Spieler in die Retro-Stimmung kommen.  Einige klassische Spielmechaniken sind Space-Shooter (Asteroids, Space Invaders), Platformer (Super Mario Bros., Donkey Kong) und Abenteuerspiele (Adventure, Zelda).

Denken Sie daran, dass Ihr begrenzter Kunststil es schwieriger macht, komplexe Informationen an den Spieler zu übermitteln, so dass eine einfache Mechanik ein großer Vorteil sein kann.

Wie einfach können Sie Ihr Spiel machen?  Können Sie ein Spiel entwerfen, das nur einen Knopf für die Steuerung benutzt?
One-Button-Spiele funktionieren hervorragend auf Touch-basierten Geräten, da der Player nur auf dem Bildschirm mampfen kann, ohne sich um nicht taktile Tastenbereiche kümmern zu müssen.

Viele endlose Runner-Style-Spiele verwenden das Ein-Tasten-Steuerschema (Canabalt, Jetpack Joyride, Tiny Wings).  Können Sie einen anderen Spielstil finden, der genauso gut mit nur einem Knopf für die Steuerung funktioniert?


Verzerrungseffekte

Wenn Sie jemals in einem Emulator auf Ihrem Computer eines Ihrer Lieblings Arcade-Spiele der alten Schule gespielt haben, haben Sie vielleicht bemerkt, dass es sich nicht ganz gleich anfühlt.  Im Vergleich zum verschwommenen, flackernden, verzerrten Aussehen eines Arcade-Monitors oder Ihres alten CRT-Fernsehers aus der Kindheit ist alles etwas zu frisch und sauber auf Ihrem Computerbildschirm.

Manche Leute denken wahrscheinlich, dass es gut ist, dass wir uns nicht mit den Verzerrungsartefakten einer vergangenen Ära abfinden müssen, aber es kann Spaß machen, ein bisschen Retro in ein Retro-inspiriertes Spiel einzubauen.

Hier sind einige Beispiele, wie Sie einen alten CRT-Bildschirm emulieren können:

CRT Screen Effects

Scanlinien: Sie können eine statische Grafik aus dünnen, eng beabstandeten horizontalen weißen Linien verwenden, um CRT-Scanlinien zu simulieren.  Schichten Sie sie einfach über Ihr Spiel.  Passen Sie die Opazität und den Mischmodus an, um den gewünschten Stil und die gewünschte Intensität zu erzielen.

Rauschen: Gaußsches Rauschen kann Ihrem Spiel eine schöne Textur hinzufügen.  Idealerweise würde das Rauschen animiert werden, aber ein statisches Bild wird gut genug funktionieren, wenn ständig animierendes Rauschen die Leistung Ihres Spiels beeinflusst.

Unschärfe: Eine sehr leichte Unschärfe verleiht dem Bild eine angenehme Weichheit.  Gehen Sie nicht zu weit mit diesem; Sie möchten immer noch die Pixel sehen können.

Farbsäume: Eine meiner Lieblings-Alte-Schule-Effekte ist es, ein wenig RGB Farbsäume hinzuzufügen.  Sie können dies tun, indem Sie die Spielfläche in separate Kanäle für Rot, Grün und Blau aufteilen und sie leicht aus der Ausrichtung verschieben.  Dieser Effekt sieht wirklich gut aus, wenn er animiert wird, aber er kann ziemlich prozessorintensiv sein, daher müssen Sie möglicherweise seine Verwendung einschränken.  Ich habe ein anderes Tutorial, wo ich zeige, wie man den Effekt mit AS3 implementiert: Erstellen Sie einen Retro-CRT-Verzerrungseffekt mit RGB-Shifting.

Kombination: Kombinieren Sie mehrere Effekte für maximalen Spaß!

Animated CRT Screen Effects

Sie können auch einen animierten Überrollbalken hinzufügen, um eine fehlerhafte CRT zu simulieren.

Das Flash-Spiel Cronus X implementiert viele dieser Effekte gut während der Menüübergänge.  Das ist eine gute Lösung, wenn Sie sich Sorgen machen, dass sich die Effekte negativ auf die Spieleleistung auswirken.


Innovieren

Lassen Sie sich nicht durch die Beschränkungen des Alte-Schule-Spielens verzetteln.  Es ist wichtiger für das Spiel, Spaß zu haben, ein Retro-Gefühl zu haben, als historisch korrekt zu sein.

Und versuche nicht einfach einen klassischen Space-Shooter oder Platformer nachzubauen.  Fügen Sie etwas Innovation hinzu, um Ihr Spiel einzigartig zu machen.  Verwenden Sie die Retro-Ästhetik als Ausgangspunkt, fügen Sie jedoch etwas von Ihrem eigenen einzigartigen Stil und Elementen hinzu, um etwas Neues zu schaffen.  Es kann sogar Spaß machen, moderne Musik, Sounds oder Elemente (wie Partikeleffekte) zu mischen, um eine neue Interpretation klassischer Arcade-Spiele zu erstellen.

Einige großartige Beispiele hierfür sind Geometry Wars, die schillernde moderne Effekte in ein Arcade-Spiel im Vektor-Stil mischt, Space Invaders Extreme, wo ein klassisches Arcade-Spiel auf ausgefallene Hintergrundgrafiken und moderne elektronische Musik oder Fez, ein klassischer 2D-Pixel-Kunst-Plattformer, mit dem Sie die Welt im 3D-Raum transformieren können.


Viel Spaß beim Spielen!

Das ist alles für jetzt.  Viel Glück da draußen! Schreiben Sie einen Link in die Kommentare und zeigen Sie mir was Sie machen.  Ich würde gerne sehen, wie Sie die Retro-Ästhetik nehmen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.