Share
Was Sie erstellen werdenViele Spieleentwickler sind Programmierer an erster Stelle und Künstler an zweiter Stelle. Egal, ob Sie Pixelkunst verwenden, weil Sie den "Retro" -Look bevorzugen, oder Sie haben nicht die Zeit oder Erfahrung, um Ihre Kunst auf die nächste Stufe zu bringen. Dieser einfache Effekt kann den visuellen Reiz Ihres Spiels erheblich steigern.
Dieser abgeschrägte Pixelstil wird erreicht, indem zunächst die 1: 1-Pixelgrafik unter Beibehaltung des ursprünglichen Seitenverhältnisses vergrößert wird. Durch einen sehr einfachen Prozess, der während der Asset-Erstellung oder zur Laufzeit angewendet werden kann, können Sie Ihre Standard-Pixelgrafik in etwas verwandeln, das selbst bei HD-Auflösungen gut aussieht. Der Effekt ist so einfach, dass er in nahezu jeder Programmiersprache, Entwicklungsumgebung und Engine angewendet werden kann. In diesem Tutorial stelle ich Ihnen vor, dass Sie abgeschrägte Pixel so einführen, dass Sie diesen Effekt sicher in Ihrem eigenen Spielprojekt implementieren können.
Was genau ist ein abgeschrägter Pixel? Ein einzelnes Pixel ist das kleinste grafische Element, das zur Darstellung von Kunst in digitaler Form verwendet wird. Auf diese Weise können Sie sich Pixel als 2D-Bausteine vorstellen. Ein abgeschrägtes Pixel erweitert dieses Bausteinkonzept lediglich durch die Einführung künstlicher Tiefe.
Die Dinge werden etwas verwirrend, wenn Sie feststellen, dass abgeschrägte Pixel aus mehreren 'regulären' Pixeln bestehen, aber es ist eigentlich nicht so kompliziert, wie es scheint. Um den Prozess vollständig zu verstehen, beginnen wir mit einem grundlegenden Verständnis von Pixeln.
Lassen Sie uns zunächst über Pixelgrößen und -verhältnisse sprechen. Das obige Bild zeigt dasselbe Sprite in seiner ursprünglichen Größe und dann bis zu fünfmal so groß. Bei jeder Vergrößerung vergrößert sich auch der ursprüngliche "Baustein" des Pixels. Wenn ein Standardpixel fünfmal (500%) vergrößert wird, wird es zu einem 5x5-Pixelblock. Jetzt haben Sie ein Sprite mit einem Pixelverhältnis von 1: 5. Diese Zahl bedeutet einfach, dass jedes 1x1-Pixel im ursprünglichen Sprite jetzt durch einen 5x5-Pixelblock dargestellt wird. Das gesamte Sprite, das ursprünglich 14 x 15 Pixel misst, ist jetzt 70 x 75 Pixel groß.
Nun, da unser Sprite aus viel größeren Pixelblöcken besteht, können wir sehen, wie abgeschrägte Pixel funktionieren.
Das obige Bild zeigt dasselbe Sprite mit Standardpixeln links und abgeschrägten Pixeln rechts. Bei Standardpixeln besteht jeder 5x5-Block aus derselben Farbe. Im Beispiel mit abgeschrägten Pixeln können wir sehen, dass der 5x5-Block jetzt aus mehreren verschiedenen Schattierungen derselben Farbe besteht.
Das erste Quadrat in jeder Version ist der 5x5-Pixelblock, der das Standard-1x1-Pixel im Originalbild darstellt. Der zweite Satz von Quadraten ist eine vergrößerte Version dieses 5x5-Blocks, um die Zusammensetzung des abgeschrägten Pixelblocks zu zeigen. Diese Pixel sind so angeordnet, dass sie die Illusion von Tiefe vermitteln, mit Hervorhebungen in der rechten oberen Ecke des 5x5-Blocks und Schatten in der unteren linken Ecke. Bei der Kombination zum endgültigen Bild entsteht ein Sprite, das scheinbar aus winzigen, abgeschrägten Blöcken anstelle von flachen 2D-Pixeln besteht.
Nun, da Sie die Grundlagen abgeschrägter Pixel verstehen, fassen wir kurz zusammen, wie dieser Effekt erzielt wird.
Zuerst müssen Sie feststellen, ob Sie diesen Effekt zur Laufzeit in Ihrem tatsächlichen Spiel implementieren oder Ihre Kunstobjekte mit abgeschrägten Pixeln "eingebacken" generieren. In jedem Fall wird der abgeschrägte Pixeleffekt auf ungefähr dieselbe Weise erzielt.
Sie beginnen mit der Erstellung eines Abschrägungssprites, der dieselbe Größe hat wie der letzte vergrößerte "Sprite-Block". Wenn Ihr fertiges Bildmaterial beispielsweise 1: 4 (vierfach vergrößert) ist, erstellen Sie einen 4x4-Abschrägungsblock. Diese Abschrägung wird dann auf das vergrößerte Sprite- oder Spielfenster angewendet und wiederholt, um den gesamten Bildschirm auszufüllen. Indem Sie mit Mischmodi und Deckkraft herumspielen, können Sie unterschiedliche Ergebnisse erzielen.
Auf beide Methoden werde ich später ausführlicher eingehen, aber vorerst sollten wir einige kritische Regeln und Richtlinien beachten.
Dieser Effekt lässt sich zwar durch Anwenden einer einfachen Überlagerung leicht erreichen, es gibt jedoch einige wichtige Punkte, die verhindern können, dass sich die abgeschrägten Pixel richtig anordnen.
Das offensichtlichste Problem ist die Sprite-Größe im Vergleich zur Abschrägungs-Overlay-Größe. Alle Ihre Assets müssen der Vergrößerungsrate folgen, die von der Größe Ihres Abschrägungsblocks vorgegeben wird. Andernfalls sind die Abschrägungslinien nicht konsistent.
Es ist auch wichtig, Ihre Spielfenstergröße zu bestimmen, bevor Sie Ihre Assets vergrößern. Wenn Ihre Spielfenstergröße 640x480px beträgt und Sie eine 4x4-Abschrägung (Verhältnis 1: 4) verwenden möchten, sollten Ihre ursprünglichen Assets auf 160x120px ausgelegt sein. Denken Sie beim Vergrößern von Kunstobjekten daran, dass alles 'X' mal größer sein muss als die Originalgröße, wobei 'X' eine ganze Zahl ist.
Jede Änderung in der Spielansicht oder die Positionierung einzelner Sprites muss beim Versuch des Zeichens der Abschrägungsüberlagerung sorgfältig geprüft werden. Dies bringt uns zur wichtigsten Regel, die zu befolgen ist:
Netzbasierte Bewegung ist zwingend erforderlich! Im obigen Bild haben wir links ein korrektes Beispiel für gitterbasierte Bewegung und rechts ein falsches Beispiel. Da die ursprünglichen Assets viermal vergrößert wurden, sollten alle vertikalen und horizontalen Bewegungen in einem 4x4-Raster einrasten. Das Katzensprite auf der rechten Seite hat sich um ein Pixel nach rechts und ein Pixel nach unten bewegt, was dazu führt, dass das Sprite den Fluss von gerade Abschrägungsblöcken unterbricht.
Dies war ein Beispiel für einen abgeschrägten Pixeleffekt, der in die Assets "eingebacken" wurde. Das folgende Beispiel zeigt, was passiert, wenn Sie bei der Implementierung des Effekts bei nicht der gitterbasierten Bewegung folgen Laufzeit:
Beachten Sie, dass die abgeschrägte Pixelüberlagerung im gesamten Bild leicht falsch ausgerichtet ist. Dies liegt daran, dass die Abschrägungsüberlagerung das gesamte Spielfenster abdeckt und sich nicht bewegt, während die darunter liegenden Sprites sich bewegen, aber nicht im 4x4-Raster einrasten. Erinnere dich daran alles Die Bewegung im Spiel muss sich an das Raster anpassen, das von der Größe Ihres Abschrägungsblocks vorgegeben wird, die von Ihrem Anlagenvergrößerungsgrad bestimmt wird.
Ja, es ist logischer, diesen Effekt in Ihrem Spielcode zu implementieren, anstatt während der Erstellung von Assets. Wenn Sie diesen Effekt während der Erstellung von Assets anwenden, haben Sie mehr Freiheit, schnell zu experimentieren und den perfekten Stil zu finden, der zu Ihrem Projekt passt. Sie können verschiedene Überlagerungen mit unterschiedlichen Überblendungsstilen anwenden, die Sättigung und den Kontrast der darunter liegenden Grafik anpassen und Farben ersetzen, um genau das richtige Gleichgewicht zu finden, bevor Sie sich für Ihren endgültigen Look entscheiden.
Dies ist ein vergrößertes Beispiel eines 6x6-Abschrägungsblocks. Sie sollten Ihre Abschrägungsblöcke auf einem transparenten Hintergrund halten, aber ich habe hier Blau verwendet, damit Sie den Unterschied in der Deckkraft erkennen können.
Um diesen Abschrägungsblock zu erstellen, habe ich mit einer Leinwand begonnen, die meiner beabsichtigten endgültigen Kunstgröße entspricht. In diesem Beispiel habe ich ein 6x6-Bild erstellt, das für 1: 6-Pixel (600% -Vergrößerung) gedacht ist. Dann begann ich mit einem Ein-Pixel-Pinsel in der unteren linken Ecke und wendete drei Pixel Schwarz mit 75% Deckkraft an. Als ich mich von der Ecke entfernte, reduzierte ich die Deckkraft meines Pinsels auf 50% und schließlich auf 25%. Ich habe dann dieselbe Technik gespiegelt, jedoch mit Weiß, beginnend in der oberen linken Ecke.
Mit vielen gängigen Tools wie Photoshop und GIMP können Sie benutzerdefinierte Muster erstellen und definieren. Dies ist der schnellste und einfachste Weg, um die gesamte Leinwand mit einer abgeschrägten Pixelüberlagerung auszufüllen. Für das obige Beispiel habe ich den blauen Hintergrund entfernt und den Abschrägungsblock als Muster gespeichert. Wann immer ich diese Überlagerung auf meine Kunst anwenden möchte, muss ich nur das Farbeimerwerkzeug verwenden, um das Muster auf der obersten Ebene abzulegen.
Nachdem Sie einige benutzerdefinierte Abschrägungsblockmuster definiert haben, können Sie mit verschiedenen Stilen experimentieren. Oben haben wir vier verschiedene Abschrägungsstile, die auf dasselbe Bild angewendet werden. Beachten Sie, wie geringfügige Änderungen in der Konstruktion und der Deckkraft der verschiedenen Abschrägungsblöcke die Form und die Vibration der resultierenden Sprites stark verändern können. Experimentieren Sie mit verschiedenen Größen und Stilen, um die Art der Abschrägung zu finden, die Ihre Pixelkunst ergänzt.
Die verschiedenen Mischmodi, die von den meisten Zeichenwerkzeugen angeboten werden, können auch zu drastisch unterschiedlichen Effekten führen.
Im obigen Bild wird derselbe Abschrägungsstil mit drei verschiedenen Überblendungsmodi angewendet. Der Standard-Überlagerungsmodus erzeugt ein sehr auffälliges und lebendiges Bild mit einem intensiven Kontrast zwischen den hellen und dunklen Bereichen der Abschrägung. Der Color Burn-Modus schaltet die hellen Bereiche der Abschrägung vollständig aus und erzeugt so eine fast dreieckige und unzusammenhängende Abschrägung. Der Soft Light-Modus eignet sich ideal für gedämpfte Farben und erzeugt eine weniger ausgeprägte abgeschrägte Kante.
Anstatt Assets mit diesem Effekt in Ihr Spiel einzufügen, können Sie stattdessen die abgeschrägte Pixel-Überlagerung zur Laufzeit generieren. Dies führt zu einem Spiel, das weitaus skalierbarer und anpassungsfähiger ist, wenn Sie sich später dazu entscheiden, die Assets, die Gitterbewegung oder die Größe des Spielfensters zu ändern.
Ich kann Ihnen zwar nicht genau sagen, wie Sie diesen Effekt in Ihrem spezifischen Projekt implementieren, aber ich kann Sie definitiv in die richtige Richtung weisen. Die meisten Spiele-IDEs verfügen über die allgemeine Funktionalität, die für diesen Effekt erforderlich ist. Es sollte also kein Problem bei der Integration einer abgeschrägten Pixelüberlagerung in Ihr Projekt auftreten. Flash- und ActionScript-Benutzer können beispielsweise mit ColorMatrixFilter Mischmodi auf die Abschrägungsüberlagerung anwenden, und Game Maker-Benutzer können die integrierten Vordergrundwerkzeuge verwenden oder sogar ein spezielles Abschrägungsüberlagerungsobjekt erstellen, das sich auf einer bestimmten Ebene über der Grafik befindet Vermögenswerte.
Zunächst müssen Sie entscheiden, wie Sie die anfängliche Anlagenvergrößerung behandeln. Ich empfehle, 1: 1-Pixel-Art zu verwenden und alles zu skalieren, bevor Sie es auf den Bildschirm zeichnen und dann die Abschrägungsüberlagerung als Nachbearbeitungseffekt anwenden.
Zweitens sollten Sie überlegen, ein Debug-Menü zu erstellen, mit dem Sie verschiedene Abschrägungsgrößen und Mischmodi testen können. Sie wissen nie, wie verschiedene Farben und Bewegungen auf bestimmte Abschrägungsüberlagerungen reagieren. Gehen Sie also auf Nummer sicher und experimentieren Sie mit so vielen Kombinationen wie möglich. Möglicherweise müssen Sie während bestimmter Szenen des Spiels den Deckkraft- oder Überblendungsmodus ändern. Wenn Sie diese in Echtzeit testen können, ist dies auf jeden Fall hilfreich.
Sie sollten auch planen, wie Sie mit dem HUD oder der GUI für Ihr Spiel umgehen sollen. Möchten Sie, dass diese Elemente über oder unter der abgeschrägten Pixelüberlagerung liegen?
Der abgeschrägte Pixeleffekt wurde für einige bekannte Old-School-Spiele angewendet.Dieser Effekt ist eine wunderbare Möglichkeit, Ihre Spielkunst zu verfeinern, ohne komplexe Algorithmen, Shader oder einen unglaublich talentierten Künstler zu benötigen. Bist du in einem Game Jam auf die Zeit gehetzt? Dies ist eine schnelle und einfache Möglichkeit, Ihrer Arbeit etwas mehr visuellen Glanz zu verleihen.
Der wertvollste Aspekt dieses Effekts ist jedoch, dass er Sie dazu ermutigt, sich die Hände schmutzig zu machen und zu experimentieren, was Sie zweifellos zu einer Reihe anderer Entdeckungen auf dem Weg führen wird.
Accentsconagua