So erstellen Sie ein Game Character-Sprite-Sheet in Affinity Designer

Wenn Sie jemals die Entwicklung von Spielen und das Charakterdesign ausprobieren wollten, ist dieses Tutorial für Sie! Heute erstellen wir mit verschiedenen Tools und Funktionen des Affinity Designers ein Sprite-Sheet für eine originelle, vogelartige Kreatur für Video- und Handyspiele. Wir werden den gesamten Prozess durchlaufen, von der Skizzierung der Skizze über die Farbgebung bis hin zur Erstellung von Posen, die für Animationen verwendet werden können. Lass uns anfangen!

1. Zeichne die grundlegenden Teile des Charakters

Schritt 1

Normalerweise fange ich an, eine Figur zu erfinden, indem ich skizziere und versuche, das richtige Bild, eine interessante Form und ein ungewöhnliches Aussehen zu finden. Versuchen Sie, einige fiktive Details von Tieren oder Gegenständen zu kombinieren, die Sie im wirklichen Leben treffen, und suchen Sie nach originellen und außergewöhnlichen Lösungen. Sie können sich inspirieren lassen, indem Sie durch die Spielcharaktere oder Spiel-Sprites-Bereiche von Envato Market blättern oder nach Spielcharaktere-Sprites auf Pinterest suchen. Versuchen Sie, Ihre eigenen Ideen zu entwickeln und unerwartete Kombinationen zu erstellen.

Wenn Sie mehrere Variationen vorgenommen haben, wählen Sie die gewünschte aus und arbeiten Sie damit weiter. Versuchen Sie es mit verschiedenen Posen und Gesichtsausdrücken.

Ich mache viele grobe Skizzen, die mir helfen zu verstehen, wie sich mein Charakter bewegt, ob er interessant und originell aussieht, ob er in die Umgebung passt oder wie unser zukünftiges Spiel aussieht und so weiter.

Schließlich bin ich mit dem mysteriösen Fantasy-Look dieses kleinen Mannes ziemlich zufrieden, und hier ist die Skizze, mit der wir in diesem Tutorial arbeiten werden. Sie können es direkt von hier herunterladen. Klicken Sie einfach mit der rechten Maustaste auf das Bild und speichern Sie es auf Ihrem PC.

Schritt 2

Wir arbeiten mit der Drawing-Persona von Affinity Designer und verwenden die Vektorfunktionen, um unser Charakter-Sprite für Videospiele zu erstellen, das einfach in verschiedenen Posen animiert werden kann.

Erstellen Sie ein neues Dokument mit einer Größe von 600 x 800 px. Verwenden Sie das Werkzeug zum Platzieren von Bildern, um unsere Skizze zu importieren und sie in der Mitte der Leinwand zu positionieren.

Und fangen wir an, den Charakter zu skizzieren. Nimm das Ellipse-Werkzeug (M) und mache eine Form, die der Größe des Gesichts entspricht. Bewaffne dich mit dem Bleistift-Werkzeug (N) und zeichne einen Schnabel, der die Skizze nachzeichnet. Sie können den Strich mit dem Knotentool (A) bearbeiten, um ihn flüssiger und fließender zu gestalten.

Schritt 3

Wählen Sie beide Formen aus, die wir erstellt haben, und verwenden Sie den Vorgang zum Hinzufügen in der oberen Kontext-Symbolleiste. Auf diese Weise haben wir beide Elemente zu einer einzigen Form zusammengefügt.

Verwenden Sie nun das Ellipse-Werkzeug (M), um ein Auge zu erzeugen, und fügen Sie ein paar weitere Ellipsen hinzu, um es detaillierter zu machen. Folgen Sie den Linien der Skizze, sodass die Formen in die Skizze passen.

Schritt 4

Zeichnen Sie mit dem Stiftwerkzeug (N) eine lange, gekrümmte Linie über das Gesicht und bearbeiten Sie sie bei Bedarf mit dem Knotenwerkzeug (A). Wir können Stil, Breite und andere Parameter unserer Linie im Konturbedienfeld ändern (Sie finden sie auf einer der Registerkarten neben dem Farbbedienfeld).

Setzen Sie von hier aus die Breite auf 11 pt und bewegen Sie sich zum Dropdown-Fenster Druck. Hier können Sie die Breite der einzelnen Segmente der Linie mithilfe des Diagramms variieren. Wählen Sie den rechten Punkt der Kurve in der Grafik aus und ziehen Sie ihn nach unten, um den rechten Teil des Strichs (der sich an der Nase des Charakters befindet) dünner zu machen.

Schritt 5

Nimm jetzt das Rechteckwerkzeug (M) und lass uns zum Körper weitergehen. Erstellen Sie ein Rechteck, richten Sie es an dem Körper aus und konvertieren Sie es in Kurven in der oberen Kontext-Symbolleiste. Wechseln Sie zum Knotenwerkzeug (A), und verschieben Sie die unteren Knoten voneinander. Dadurch wird der untere Teil breiter.

Wähle beide oberen Knoten aus und ziehe sie nach oben, um den Kopf unseres Charakters zu bedecken. Wählen Sie dann den oberen rechten Knoten aus und verwenden Sie die Funktion In glatte konvertieren aus der oberen Kontext-Symbolleiste, um den rechten Teil des Rechtecks glatt und abgerundet zu gestalten.

Schritt 6

Verwenden Sie nun das Knotenwerkzeug (A), um die linke Seite des Körpers zu ändern, weitere Knoten hinzuzufügen, die Ecken glatt zu machen und die Kontur in die Skizze einzufügen.

Schritt 7

Fügen wir die Federn zum unteren Teil des Körpers hinzu und bilden so eine Art Rock. Nehmen Sie das Ellipse-Werkzeug (M) und formen Sie unten links am Körper eine gequetschte Form. Drücken Sie die Wahltaste und ziehen Sie die Form nach rechts, um eine Kopie zu erstellen. Wiederholen Sie die gleiche Aktion, erstellen Sie weitere Kopien und füllen Sie den unteren Teil aus.

Wählen Sie schließlich die Körperform und die Federn aus, navigieren Sie zur oberen Kontext-Symbolleiste, und wenden Sie die Add-Operationen an. Großartig! Jetzt haben wir die Elemente zu einer einzigen Form zusammengefügt.

Schritt 8

Nun geht es weiter zum Bein. Machen wir es einfach: Zeichnen Sie eine gerade vertikale Linie mit einem kleinen Fuß am unteren Rand. Gehen Sie zum Strichbedienfeld und lassen Sie das Bein mehr dimensionieren, indem Sie es dicker machen. Setzen Sie den Wert für Width auf 60 pt und machen Sie den unteren Teil mithilfe des Druckdiagramms dünner (siehe Abbildung unten).

Schritt 9

Jetzt müssen wir den Strich in eine Form umwandeln, damit wir ihn bearbeiten und Details, Umrisse usw. hinzufügen können. Wechseln Sie zum ausgewählten Bein zu Ebene > Schlaganfall erweitern. Die Form sieht gut aus, obwohl sie eine Reihe von Knoten haben kann.

Während die Form immer noch glatt aussieht, kann es sehr schwierig und zeitraubend sein, alle nicht benötigten Knoten manuell zu löschen. Hier haben wir zwei Möglichkeiten: Entweder die Form mit einer Reihe von Knoten belassen oder, wenn Sie besondere Wert auf Qualität legen, eine neue Form erstellen.

Wir können hier eines der Zeichenwerkzeuge verwenden - entweder das Stiftwerkzeug (N) oder das Stiftwerkzeug (P). Ich bevorzuge das Stiftwerkzeug (P). Verfolgen Sie einfach das erstellte Bein oben, machen Sie eine glatte, abgerundete Form und verschieben Sie die Knoten mit dem Knotenwerkzeug (A).

Kopieren Sie das Bein, um ein weiteres hinzuzufügen.

Schritt 10

Wir haben einen zweischichtigen Federrock in unserer Skizze, also fügen wir eine zweite gefiederte Körperschicht hinzu. Kopieren Sie die Körperform und erweitern Sie sie nach unten, sodass die Form groß wird, sodass sie in die Skizze passt. Löschen Sie den oberen Teil der erweiterten Form und lassen Sie nur den Rock zurück. Sie können dies mit Hilfe des Knotentools (A) tun, indem Sie alle nicht benötigten oberen Knoten auswählen und löschen.

Als Option können Sie auch den oberen Teil der Form mit dem Vektor-Ausschnitt-Werkzeug löschen. Ich bevorzuge jedoch die erste Methode, da das Vector Crop Tool den gelöschten Teil in einer Schnittmaske versteckt. Dies kann in vielen Fällen sehr hilfreich sein, wenn Sie die Form wiederherstellen müssen, aber wir müssen dies nicht tun.

Schritt 11

Lassen Sie uns nun einen stilisierten Arm oder einen Flügel für unseren Vogelcharakter bilden. Machen Sie eine Ellipse, fügen Sie den Flügel in die Skizze ein und wandeln Sie ihn in Kurven um. Ziehen Sie die beiden Ankerpunkte etwas nach unten, um die Form unten breiter zu machen. Fügen Sie eine weitere Ellipse hinzu, sodass der Arm am Ellbogen gebogen wird.

Schritt 12

Fahren Sie fort, indem Sie die zweite Ellipse in Kurven umwandeln und die Linien mit dem Knotenwerkzeug (A) verschieben, sodass sie in die Skizze passen. Verwenden Sie die Operation Hinzufügen, um die Formen zusammenzuführen und alle Knoten glatt zu machen.

Schritt 13

Ziehen Sie schließlich mit dem Pencil Tool (N) ein kleines Federbüschel am Ellbogen und mischen Sie es ebenfalls mit dem Arm zusammen.

Großartig! Die Umrisse sind fertig. Lass uns jetzt die Farben hinzufügen!

2. Anwenden von Farben und unterschiedlichen Posen

Schritt 1

Wir arbeiten mit einer dunkelvioletten Palette. Ich wähle die Farben normalerweise mit Hilfe des Farbbedienfelds und des Pipettenwerkzeugs aus, das sich direkt über dem Farbrad im Farbbedienfeld befindet.

Versuchen Sie, die oberen Teile des Charakters leichter als die unteren Teile zu machen, um die Elemente voneinander zu trennen und sie herausspringen zu lassen. Machen Sie das Gesicht hellbeige und schaffen Sie einen auffallenden Kontrast, um es zum Hauptelement der Figur zu machen, was die Aufmerksamkeit des Betrachters auf sich zieht.

Schritt 2

Nun lass uns mit dem Gesicht arbeiten. Wenden Sie die Farben auf alle drei Ellipsen des Auges an, wodurch der innere Teil dunkler wird und ein Loch entsteht. Und lassen Sie uns die rote Linie über dem Gesicht bearbeiten. Machen Sie es dicker und erhöhen Sie das Strichgewicht im Strichfeld. Schneiden Sie die Linie aus (Befehl-X), wählen Sie die beige Form aus und gehen Sie zu Bearbeiten > Einfügen. Großartig! Jetzt befindet sich die Linie innerhalb der Gesichtsform, wie in einer Schnittmaske, und wir können sie bei Bedarf noch bearbeiten.

Schritt 3

Fügen wir unserem Charakter einige Schatten hinzu, damit er detaillierter wird. Nimm das Bleistiftwerkzeug (N) und beginne mit dem Zeichnen einer Form, wobei die linke Körperseite teilweise bedeckt ist. Es muss nicht perfekt sein, da wir es ausschneiden (Befehl-X) und dann Bearbeiten > Einfügen innerhalb der Körperform verwenden. Machen Sie den Schatten etwas dunkler als den Körper.

Schritt 4

Verwenden Sie das Ellipse-Werkzeug (M), um eine Gruppe kleiner Kreise entlang der Schattenkante hinzuzufügen, die sich überlappen und den Schatten texturiert machen. Halten Sie die Umschalttaste gedrückt, um die Kreise perfekt auszugleichen.

Fügen Sie eine dunkler-violette Ellipse für den Schatten unter dem Gesicht hinzu (drücken Sie mehrmals die Befehlstaste [, um die Ellipse unter die Gesichtsform zu verschieben). Machen Sie weitere Details, bilden Sie einen dunklen Schatten auf dem unteren „Rock“ und fügen Sie einen blauen Oberton mit gesprenkelten Kreisen auf der rechten Seite des Körpers der Figur hinzu. Schließlich machen Sie den Arm viel leichter als der Körper, indem Sie ihn von den übrigen Elementen trennen.

Vergessen Sie nicht, den Beinen zwei kleine, abgerundete Schatten hinzuzufügen, um sie dreidimensionaler zu gestalten.

Schritt 5

Verringern Sie die Deckkraft der hellblauen Hervorhebung im Ebenenfenster, um sie subtiler zu gestalten.

Wenn Sie mit den Farben herumspielen möchten, um sie lebendiger zu gestalten, wählen Sie mit dem Pipettenwerkzeug die Farbe eines Elements aus und wenden Sie sie auf das andere Element an. Wenn Sie dieses Tool noch nicht in Affinity Designer ausprobiert haben, ist es möglicherweise etwas schwierig, aber dennoch sehr praktisch.

Suchen Sie das Pipettensymbol im Farbbedienfeld und ziehen Sie es nach rechts auf Ihr Bild. Sie sehen eine Lupe, mit der Sie die gewünschte Farbe auswählen können. Diese wird neben dem Pipettensymbol im Bedienfeld „Farbe“ angezeigt. Jetzt können Sie sie auf jede beliebige Form anwenden, indem Sie einfach auf den kleinen farbigen Kreis im Farbbedienfeld klicken.

Schritt 6

Fügen wir unserem ausgefallenen Kerl weitere Details hinzu. Fügen Sie die Schatten zu allen Körperteilen hinzu, einschließlich des Kopfes und des Arms (wenn Sie noch nicht hinzugefügt haben), und machen Sie weitere Flecken im Gesicht, um die Struktur zu verbessern.

Platzieren Sie noch ein paar Ellipsen im Auge und heller, bis die Farben strahlen. In der Abbildung unten sehen Sie mein Ebenenfenster, in dem alle Teile der Augengruppe dargestellt werden.

Schritt 7

Unser Charakter sieht zu diesem Zeitpunkt bereits gut aus, aber wenn wir uns vorstellen, ihn vor einem detaillierten Videospielhintergrund zu platzieren, könnte er mit dem Hintergrund verschmelzen, wenn die Farbpaletten der Elemente ähnlich sind. Wir müssen unseren Charakter vor jedem Hintergrund deutlicher machen. Es muss attraktiv und auf den ersten Blick deutlich sichtbar sein. Und hier ist eine einfache Möglichkeit, den Charakter visuell zu trennen: Wir sollten Konturen verwenden! Je dicker die Kontur um den Charakter ist, desto deutlicher wird er!

Wählen Sie den Arm aus, gehen Sie zum Farbbedienfeld und wenden Sie einen schwarzen Strich mit einem Wert von 3 pt Breite an. Fügen Sie die Kontur auch dem Gesicht und den Beinen hinzu. Sie müssen möglicherweise die Elemente innerhalb der Gruppe mithilfe des Bedienfelds Ebenen auswählen, um den Strich anwenden zu können.

Schritt 8

Für den Körper möchte ich eine einzige Kontur auf die gesamte Form anwenden. Der Körper besteht jedoch aus zwei Elementen, daher machen wir einen kleinen Trick. Wählen Sie beide Körperteile aus und duplizieren Sie sie (Befehl-C> Befehl-V). Sie sehen die Kopien in Ihrem Ebenenfenster. Wählen Sie die Kopien aus und fügen Sie sie mit dem Vorgang Hinzufügen zu einer einzigen Form zusammen.

Jetzt können wir die Füllfarbe der zusammengeführten Form im Farbbedienfeld auf "Keine" setzen und einen schönen dicken 4-Punkt-Strich anwenden, wobei die Umrissform oben auf dem Körper bleibt.

Schritt 9

Mal sehen, was wir bis jetzt haben. Wir haben eine fantastische Fantasy-Figur geschaffen, die aus dem Körper (zusammen mit dem Gesicht), einem Paar geflügelten Armen und einem Paar lustigen Beinen besteht. Und das ist eigentlich alles, was wir brauchen, um ein bewegendes Spiel-Sprite zu machen! Stellen Sie sicher, dass Sie im Bedienfeld „Ebenen“ alle Teile ordnungsgemäß gruppiert (Befehl-G) haben, sodass Ihre Arbeit sauber und konsistent bleibt.

Jetzt können wir bestimmte Posen machen, die unser Charakter während des Spiels ausführen kann. Sie können den Sprite-Bereich für Spielcharaktere bei GraphicRiver durchsuchen, um zu sehen, welche Posen normalerweise in Spielen verwendet werden, oder wie Sie Ihre eigene gestalten.

Hier habe ich die Grundpositionen dargestellt, indem ich einfach die Teile unseres Sprites bewegte, damit es stehen, rennen, springen oder ohnmächtig werden kann. Beachten Sie, dass ich die glühenden Augen in der schwachen Pose entfernt habe, damit sie unbewusster wirkt.

Sieg! Unser Fantasy Game Character Sprite ist fertig!

Gut gemacht! Wir haben gerade unsere fantastische Vogelkreatur fertiggestellt und ein Sprite-Blatt mit mehreren einfachen Posen erstellt, die für Animationen verwendet werden können. Ich hoffe, Sie haben einige nützliche Tipps und Tricks gefunden, die Ihnen helfen, Affinity Designer besser kennenzulernen oder Sie dazu inspirieren, neue einzigartige Charaktere und Sprite-Sheets für PC-, Browser- oder Handyspiele zu erstellen.

Wenn Sie eine einsatzbereite EPS-Datei mit unserem ausgefallenen Vogel erhalten möchten, einschließlich der detaillierten Rahmen für jede Pose, schauen Sie sich dieses Sprite-Blatt mit Vogelkreaturen an. Es kann für einfache Animationen verwendet werden.

Viel Spaß beim Entwerfen neuer Charaktere! Vergiss nicht, deine Ergebnisse zu teilen!