Share
Alles Alte ist wieder neu und Retro-Spiele sind beliebter als je zuvor. Gestärkt durch Nostalgie und die Fülle an Casual- und Arcade-Spielen auf iOS- und Android-Geräten erlebt Old School-Spiele ein Comeback. In diesem Tutorial werde ich Ihnen einige Tipps geben, wie Sie ein erfolgreiches Spiel mit Retro-Thema erstellen können.
Was meinen wir, wenn wir über Retro-Spiele sprechen? Es gibt keine konkrete Definition, aber ich denke normalerweise an Spiele, die vor 1990 hergestellt wurden. Dazu gehören Spiele von Konsolen wie dem GameBoy, NES, Atari 2600 und Commodore 64 sowie klassische Arcade-Spiele Pac Man, Tausendfüßler, und Space Invaders.
In all diesen Beispielen werden blockierte, pixelierte Bitmap- (oder Raster-) Grafiken verwendet. Diese Art von Spielen fällt den meisten Menschen wahrscheinlich ein, wenn sie an Retro-Spiele denken.
Aber die ersten Videospiele verwendeten eigentlich Vektorgrafiken. Spiele mögen Battlezone, Asteroiden und Sturm wurden mit hell leuchtenden Linien anstelle von blockigen Pixeln gerendert.
Eine andere Art von Spiel, das wir alten Leute benutzten, waren einfache Handheld-Spiele, die ein monochromes LCD-Display und extrem einfache Spielmechaniken verwendeten.
In diesem Tutorial werden wir über die bekannteren Raster-Grafikspiele sprechen, aber ich erwähne diese anderen Arten von Spielen, weil sie nicht oft nachgeahmt werden, und ich denke, es gibt eine Menge Möglichkeiten für Spieledesigner, etwas wirklich Cooles zu tun mit diesen Stilen.
Um einen überzeugenden Retro-Look zu erzielen, sollten Sie mit einer begrenzten Anzahl von Farben arbeiten.
Spielkonsolen der alten Schule konnten nur eine begrenzte Anzahl von Farben darstellen. Je nach System werden Grafiken in Schwarzweiß, Graustufen oder 8- oder 16-Bit-Farben angezeigt. In Wikipedia finden Sie Beispiele für die exakten Farbpaletten bestimmter Systeme. Es ist jedoch nicht wichtig, historisch genaue Farben auszuwählen, solange Sie einen konsistenten Stil in Ihrem Spiel beibehalten.
Wir sind nicht mit den gleichen Hardware-Einschränkungen konfrontiert, die wir in der Vergangenheit gemacht haben. Wenn Sie Ihre Palette jedoch auf einige sorgfältig ausgewählte Farben beschränken, wird dies nicht nur die Retro-Ästhetik betonen, sondern auch die Identität Ihres Spiels bestimmen. Sehen Sie sich diese beiden Beispiele für Farbpaletten an Super Mario Bros.:
Die Farben sind so verschieden, dass Sie das Spiel fast nur an den Farbfeldern erkennen können.
David Sommers hat eine schöne Sammlung klassischer Spielpaletten bei ColourLovers.com.
Die genauen Farben, die Sie auswählen, hängen vom Thema und der Stimmung Ihres Spiels ab. Wenn Sie sich jedoch die Zeit nehmen, um eine gute Farbauswahl zu wählen, wird Ihr Spiel so ikonenhaft sein wie die Klassiker. Schauen Sie sich diese modernen Beispiele an:
Wenn Sie Schwierigkeiten bei der Auswahl von Farben haben, die gut zusammenpassen, lesen Sie dieses großartige Tutorial von Tyler Seitz, das Auswählen einer Farbpalette für das Artwork Ihres Spiels.
Retro-Rasterspiele sind am leichtesten an ihren großen, grobkörnigen Pixeln zu erkennen, als die Bildschirmauflösungen viel niedriger waren. In der heutigen Welt der HD-Bildschirme und Retina-Displays sind die physischen Pixel auf unseren Geräten kaum sichtbar - nicht annähernd ausreichend, um den Retro-Block-Look zu erzielen.
Um dies zu berücksichtigen, müssen wir mehrere physikalische Pixel verwenden, um jeden sichtbaren Pixel in unserer Spielgrafik anzuzeigen.
Sie können entscheiden, welche Skalierungsstufe für Ihr Spiel angemessen ist, je nachdem, wie blockiert Ihr Spiel aussehen soll. Normalerweise führt eine Skalierung auf das Zwei- bis Dreifache der normalen Größe zu einem guten Effekt. Bedenken Sie, dass je größer Sie gehen, desto weniger können Sie auf den Bildschirm passen.
Ich empfehle Ihnen, dass Sie immer Ihre Spiel-Engine Ihre Pixel-Skalierung für Sie durchführen lassen. Dies bedeutet, dass alle Ihre Assets und Ihr Text mit 100% (klein) gezeichnet werden und das Spiel einfach die gesamte Spielfläche vergrößert, um die endgültige Größe zu erreichen. Sie könnten zwar Objekte mit größeren Pixeln zeichnen, dies erhöht jedoch die Dateigröße und Ladezeiten und kann sich auch negativ auf die Spieleleistung auswirken.
Wenn Sie versuchen, Ihre Assets manuell zu skalieren, kann dies zu Inkonsistenzen in Ihrer Pixel-Skala führen. Beachten Sie im obigen Beispiel, wie die Pixel im Spieletitel sind enorm im Vergleich zu den winzigen Pixeln im Text der Schaltfläche "Jetzt spielen". Unser Spielcharakter ist außerdem blockierbarer als sein Edelstein oder der Höhlenboden. Einige davon sind subtile Unterschiede, aber sie summieren sich, damit das Spiel ein bisschen "abwesend" wirkt..
Neven Mrgan (Mitgestalter von Der Vorfall) spricht in seinem Blog etwas mehr darüber.
Das Erstellen großartiger Pixelkunst kann extrem schwierig sein. Es erfordert viel Übung und ist ein Thema, das zu lang ist, um es in diesem Tutorial vollständig zu behandeln. Hier sind ein paar Links, um den Einstieg zu erleichtern:
Viele Leute verwenden normale Grafikprogramme wie Photoshop, Gimp oder sogar MS Paint, um Pixelbilder zu zeichnen.
Ich fand es frustrierend, Photoshop zu verwenden, sobald ich versuchte, Charaktere zu animieren und nahtlose Kacheln zu legen. Also habe ich ein Werkzeug namens Pickle erstellt, mit dessen Hilfe einige der Funktionen, die traditionellen Editoren fehlten, wie Live-Animationsvorschauen, nahtlose Kachelvorschauen und Terrain-Kacheln, aufgefüllt werden können.
Pickle hat ein begrenztes Funktionsangebot und erfüllt nicht alle Bedürfnisse. Glücklicherweise gibt es auch andere ähnliche Apps wie Pyxel Edit, ASEPRITE und GraphicsGale.
Es gibt viel von guten Pixel Art Tutorials online. Hier einige, die ich in der Vergangenheit hilfreich gefunden habe:
Überzeugende Charaktere mit Grafiken mit niedriger Auflösung zu entwerfen, kann sehr schwierig sein. Wie können Sie genug Details darstellen, um ein einzigartiges Zeichen mit so wenigen Pixeln und Farben zu erstellen, dass Sie damit arbeiten können??
Wie beim Zeichnen von Pixelkunst im Allgemeinen ist das Zeichendesign etwas, das Geduld und Übung erfordert. Wir können ein paar hilfreiche Strategien von klassischen Spielfiguren lernen.
Schauen Sie sich hier unseren Freund Mario an. Beachten Sie, wie wenig Pixel verwendet werden, um einen erkennbaren menschlichen Charakter darzustellen. Drei Farben, keine Konturen, keine Schattierung. Wie kann man mit diesen Einschränkungen ein Gesicht zeichnen? Schauen Sie sich an, wie die Pixel, die Marios Schnurrbart zeichnen, auch dazu dienen, Nase und Mund zu definieren.
Es wäre auch schwierig, Marios Arme auf dieser Detailebene zu zeichnen, ohne dass sie sich in seinen Körper einarbeiten lassen, wodurch sein Körper wie ein kleiner Fleck wirkt. Marios Schöpfer lösten dieses Problem, indem sie ihm einen Overall anziehen. Sehen Sie, wie die Linien seiner Kleidung seine Arme deutlich vom Rest seines Körpers trennen? Genius!
In diesem Fall ist es durch das Hinzufügen bestimmter körperlicher Merkmale (Gesichtshaare und Overall) leichter, ihn innerhalb der grafischen Grenzen zu zeichnen. Die Einschränkungen selbst geben Aufschluss über die Gestaltung des Charakters.
Eine andere Technik, um mit grafischen Einschränkungen umzugehen, ist abstrakt. Warum sollten Sie versuchen, einen erkennbaren menschlichen Charakter zu zeichnen, wenn Sie nicht müssen? Schau dir Pac-Man dort an. Er ist nicht erkennbar etwas. Er ist nur ein gelber Fleck mit einem Mund.
Pac-Man ist trotz seines Mangels an körperlichen Eigenschaften ein denkwürdiger Charakter. Seine Persönlichkeit erhält er aus dem Gameplay - die Art, wie er sich durch das Labyrinth bewegt, seine Soundeffekte und die Art und Weise, wie er mit seinen Feinden interagiert.
Wer sagt, dass Sie menschliche Charaktere in Ihrem Spiel haben müssen? Warum machen Sie nicht den nächsten Pac-Man, Q * bert oder Qix??
Wenn Sie Grafiken für Ihren Titelbildschirm, In-Game-Menüs und andere Textelemente wie Noten erstellen, müssen Sie mit dem Stil Ihrer grafischen Elemente übereinstimmen. Dies bedeutet, dass dieselbe Farbpalette, Pixelgröße und Kunststil beibehalten wird.
Die meisten Schriftarten sind so gestaltet, dass sie bei der Anzeige auf dem Bildschirm ein Anti-Aliasing (Glätten) haben. Das heißt, wenn wir versuchen, sie auf unsere Pixelgröße zu sprengen, sehen wir viele rauschende Pixel an den Rändern der Buchstaben. Es passt auch einfach nicht zu unserer Ästhetik. Es ist alles weich und verschwommen, anstatt knackig und blockig.
Wir möchten also die Schriftarten ohne Anti-Aliasing anzeigen. Das Anzeigen einer normalen Schriftart ohne Glättung wird jedoch normalerweise furchtbar aussehen. Sie sind einfach nicht dafür konzipiert, so zu arbeiten. Sehen Sie, wie funky und schwer zu lesen es bei 100% ist? Wenn wir es in die Luft jagen, können wir viele verirrte Pixel und unregelmäßige Striche sehen.
Die Antwort ist, immer Schriftarten zu verwenden, die ohne Anti-Aliasing dargestellt werden sollen. Sie lesen schön und sauber in kleinen Größen und haben den großartigen Retro-Look, wenn wir sie in die Luft sprengen.
Einige meiner beliebtesten Pixel-Schriften stammen von Matthew Bardram von Atomic Media.
Ein Nachteil bei der Verwendung von Pixel-Schriftarten ist, dass jede Schrift nur mit einer bestimmten Größe arbeitet. Stellen Sie sicher, dass Sie die Schriftart nur in dieser bestimmten Größe oder einem Vielfachen dieser Größe verwenden. Wenn Sie also eine Schriftart verwenden, die für 10pt ausgelegt ist, wird sie auch bei 20 oder 30pt gut aussehen, nicht jedoch bei den dazwischen liegenden Größen.
Überlegen Sie, welche Art von Spielmechanik am besten zu Ihrem Kunststil passt. Wenn Sie sich für eine vereinfachte, klassische Mechanik entscheiden, können Sie Ihre Spieler in die Retro-Stimmung bringen. Einige klassische Spielmechaniken sind Weltraum-Shooter (Asteroiden, Space Invaders), Plattformfahrer (Super Mario Bros., Donkey Kong) und Abenteuerspiele (Abenteuer, Zelda).
Bedenken Sie, dass Ihr begrenzter Kunststil es schwieriger macht, dem Spieler komplexe Informationen zu vermitteln, so dass ein einfacher Mechaniker von großem Nutzen sein kann.
Wie einfach kannst du dein Spiel machen? Können Sie ein Spiel entwerfen, das nur eine Schaltfläche für die Steuerung verwendet?
One-Button-Spiele funktionieren hervorragend auf berührungsbasierten Geräten, da der Spieler einfach auf dem Bildschirm zerdrücken kann, ohne befürchten zu müssen, dass nicht-taktile Tastenbereiche berührt werden.
Viele endlose Runner-Style-Spiele verwenden das Ein-Tasten-Kontrollschema (Canabalt, Jetpack Joyride, Winzige Flügel). Können Sie sich einen anderen Spielstil einfallen lassen, der mit nur einer einzigen Taste für die Steuerung gleichermaßen funktioniert??
Wenn Sie jemals eines Ihrer beliebtesten Arcade-Spiele der alten Schule in einem Emulator auf Ihrem Computer gespielt haben, haben Sie möglicherweise bemerkt, dass es sich nicht ganz so anfühlt. Im Vergleich zu dem verschwommenen, flackernden, verzerrten Blick eines Arcade-Monitors oder Ihres alten CRT-Fernsehers aus der Kindheit ist auf Ihrem Computermonitor alles etwas zu scharf und sauber.
Einige Leute denken wahrscheinlich, dass es eine gute Sache ist, dass wir uns nicht mit diesen Verzerrungsartefakten einer vergangenen Ära abfinden müssen, aber es kann Spaß machen, ein bisschen Unschärfe wieder in ein von Retro inspiriertes Spiel einzufügen.
Hier einige Beispiele für die Emulation eines alten CRT-Bildschirms:
Zeilen scannen: Sie können eine statische Grafik aus dünnen, eng beabstandeten horizontalen weißen Linien verwenden, um CRT-Scanlinien zu simulieren. Lege sie einfach auf dein Spiel. Passen Sie Deckkraft und Mischmodus an, um den gewünschten Stil und die gewünschte Intensität zu erzielen.
Lärm: Gaußsche Geräusche können Ihrem Spiel eine schöne Textur verleihen. Im Idealfall wäre das Rauschen animiert, aber ein statisches Bild funktioniert gut genug, wenn das Rauschen des Animationsgeräts ständig beeinträchtigt wird.
Verwischen: EIN sehr leicht Unschärfe fügt dem Bild etwas Weichheit hinzu. Gehen Sie mit diesem nicht zu weit; Sie möchten immer noch die Pixel sehen können.
Farbsäume: Einer meiner Lieblingseffekte aus der alten Schule ist, ein wenig RGB-Farbsäume hinzuzufügen. Sie können dies tun, indem Sie die Spieloberfläche in getrennte Kanäle für Rot, Grün und Blau unterteilen und sie leicht aus der Ausrichtung verschieben. Dieser Effekt sieht zwar sehr gut aus, wenn er animiert ist, er kann jedoch sehr rechenintensiv sein. Daher müssen Sie möglicherweise die Verwendung einschränken. Ich habe ein anderes Tutorial, in dem gezeigt wird, wie der Effekt mit AS3 implementiert wird: Erstellen eines Retro-CRT-Verzerrungseffekts mit RGB-Verschiebung.
Kombination: Kombinieren Sie mehrere Effekte für maximalen Spaß!
Sie können auch eine animierte Überrollleiste hinzufügen, um eine fehlerhafte CRT zu simulieren.
Das Flash-Spiel Cronus X implementiert viele dieser Effekte während Menüübergängen. Dies ist eine gute Lösung, wenn Sie besorgt sind, dass die Auswirkungen auf die Spieleleistung negativ sind.
Lassen Sie sich nicht zu sehr von den Einschränkungen der alten Schulspiele aufhalten. Es ist wichtiger für das Spiel, Spaß zu haben, ein Retro-Gefühl zu haben, als historisch genau zu sein.
Versuchen Sie nicht, einen klassischen Weltraum-Shooter oder Plattformspieler einfach neu zu erstellen. Fügen Sie einige Innovationen hinzu, um Ihr Spiel einzigartig zu machen. Verwenden Sie die Retro-Ästhetik als Ausgangspunkt, fügen Sie jedoch einige Ihrer eigenen einzigartigen Elemente und Elemente hinzu, um etwas Neues zu schaffen. Es kann sogar Spaß machen, moderne Musik, Sounds oder Elemente (wie Partikeleffekte) zu mischen, um eine klassische Interpretation klassischer Arcade-Spiele zu erhalten.
Einige gute Beispiele dafür sind Geometriekriege die mischende moderne Effekte in einem Vektor-Stil-Arcade-Spiel mischt, Space Invaders Extreme wo ein klassisches Arcade-Spiel auf fantastischen Hintergrundgrafiken liegt und auf moderne elektronische Musik eingestellt ist, oder Fez, Ein klassisches 2D-Pixel-Art-Plattformprogramm, mit dem Sie die Welt im 3D-Raum transformieren können.
Das ist alles für jetzt. Viel Glück da draußen! Füge einen Link in den Kommentaren ein und zeig mir, was du machst. Ich würde gerne Ihre Einstellung zur Retro-Ästhetik sehen.
Accentsconagua