Wie kann man einen Spielbildschirm "3 in einer Reihe" in Affinity Designer erstellen

In dieser Lektion werden wir einen Spielbildschirm für das Spiel "3 in einer Reihe" entwickeln.  Wir werden die geometrischen Grundformen transformieren, um niedliche Tierikonen zu kreieren und verschiedene Arten von Farbverlaufsfüllungen anzuwenden, um Objekte hell und dreidimensional zu machen.  Am Ende erstellen wir einen Hintergrund für das Einrichten der Spielbildschirm-Vorlage.

Spiele "3 in einer Reihe" sind sehr beliebt, vor allem für mobile Geräte.  Das Spiel ist ziemlich einfach, aber süchtig: Sie müssen drei identische Objekte in einer Reihe setzen, um mehr und mehr Punkte zu erzielen.  In diesem Tutorial werden wir einen hellen Game-Pad mit bunten quadratischen Tieren entwickeln. Darüber hinaus hilft Ihnen diese Lektion, sich inspirieren zu lassen und jede andere Art von Spielbildschirmen "3 in einer Reihe" zu gestalten, wie das Spiel mit Edelsteinen oder flacher Frucht.  Fühlen Sie sich frei, den Envato Markt für neue Ideen für das Entwerfen eines flachen Spielbildschirms zu durchsuchen, und lassen Sie uns beginnen!

1. Einen quadratischen Bären erstellen 

Schritt 1

Beginnen Sie mit der Erstellung einer neuen Datei mit einer Größe von 600 x 800 pc.  Wenn Sie nicht gerne auf weißem Hintergrund arbeiten, erstellen Sie mit dem Rectangle Tool (M) eine Form, die die Leinwand abdeckt, und füllen Sie sie mit Gelb.  Sperren Sie es in der Layers-Lage, indem Sie oben auf ein kleines Schlosssymbol klicken. Wir werden diese Zahl am unteren Rand behalten, und wir werden sie später neu streichen können.

Schritt 2

Lasst uns den Kopf unseres ersten Tieres formen: einen niedlichen Bären.  Nehmen Sie das Rounded Rectangle Tool (M) und macht eine lila Figur 200 x 200 pc.  Denken Sie daran, dass Sie Corner Radius Ihrer Form auf dem Bedienfeld von oben anpassen können.  Halten wir es bei 25%.

Nehmen Sie das Fill Tool (G), halten Sie die Shift gedrückt und setzen Sie den Füller vertikal über die Form, verwenden Sie eine zweifarbige lineare Verlaufsfüllung.

Wir können die Füllfarbe anpassen, indem Sie auf die Enden des Schiebereglers klicken und die entsprechende Farbe im Bedienfeld Colour auswählen.  Wählen wir eine hellpurpurne Farbe für die Oberseite und eine dunklere Farbe für die Unterseite der Figur, um ihr eine Lautstärke zu geben.

Schritt 3

Lass uns anfangen, das Auge zu formen.  Nehmen Sie das Ellipse Tool (M), halten Sie die Shift-Taste gedrückt und machen Sie einen glatten Kreis mit einer Größe von 50 x 50 px.  Wechseln Sie zum Fill Tool (G) und ändern Sie den Fill Type von oben auf dem Bedienfeld in Radial.  Tragen Sie eine weiße Farbe auf die Mitte der Form und grau auf die Kante auf, so dass das Auge kugelförmig ist.

Jetzt lass uns die Iris bilden.  Copy Sie den Augapfel und Paste Sie ihn (Command-C > Command-V), halten Sie Command-Shift gedrückt und verkleinern Sie die Kopie mit dem Move Tool (V) auf 35 x 35 px.  Füllen Sie es mit einer radialen Füllung aus türkis in der Mitte und dunklem türkis entlang der Kante.

Duplizieren Sie (Command-C > Command-V) die Iris und reduzieren Sie die Kopie, indem Sie eine Pupille bilden.  Füllen Sie es mit einer dunkel türkisen einfarbigen Farbe.  Machen Sie mit dem Ellipse Tool (M) ein kleines weißes Highlight auf dem Auge.

Schritt 4

Nun, wenn das Auge bereit ist, Gruppieren Sie (Command-G) alle Elemente, halten Sie die Option-Shift und ziehen Sie nach rechts, um die Kopie zu machen.  Gruppieren Sie die beiden Augen, um sie auszuwählen, zusammen mit dem Bild des Kopfes und verwenden, um die Align Platte über Formen horizontal zentriert auszurichten.

Benutzen Sie das Ellipse Tool (M) weiter, um eine abgeflachte Nase 50 x 15 px zu machen.  Tragen Sie eine vertikale lineare Füllung von hellrosa bis zu einem dunkelrosa darunter.  Machen Sie einen kleineren dunklen rosa Top-Ellipse und schalten Sie den Blend Mode in der Layers-Lage auf Screen, wodurch ein durchscheinend Highlight bildet.

Schritt 5

Dann werden wir einen Mund bilden.  Verwenden Sie Pen Tool (P) und halten Sie die Shift-Taste gedrückt, um eine quadratische Linie zu erstellen.  Stellen Sie die Füllfarbe auf dem Paneel Colour auf none und tragen Sie eine dunkle violette Farbe auf den Stroke ein.  Gehen Sie zum Paneel Stroke und stellen Sie die Breite auf 2 pt ein. Belassen Sie alle anderen Parameter als Standard.

Nehmen Sie das Corner Tool (C) und runden Sie die Ecken der Form, indem Sie die Eckpunkte nach oben ziehen. 

Duplizieren Sie die Form und verwenden Sie die Funktion Flip Horizontal aus der Toolbox oben, um die Form wiederzugeben.

Schritt 6

Jetzt werden wir Ohren hinzufügen.  Verwenden Sie das Ellipse Tool (M), um einen Kreis von 70 x 70 px zu erstellen.  Lassen Sie sie gut mit dem Kopf verschmelzen und wählen Sie die richtige Farbe.  Finden Sie das Werkzeug Color Picker im Farbfeld, halten Sie es gedrückt und ziehen Sie es über den Kopf des Bären.  Sie werden eine Lupe sehen, die Ihnen hilft, die Farbe zu finden, die Sie brauchen.  Wählen Sie eine hellpurpurne Farbe in der Nähe des Ohres und lassen Sie die Maustaste los.  Jetzt können Sie das Ohr auswählen und die Farbe des Musters neben dem Color Picker anwenden.  Das haben wir bekommen!

Jetzt sehen wir, wie wir den komplexen Stil des Füllens anderer Objekte kopieren können.  Duplizieren Sie (Command-C > Command-V) das Ohr und reduzieren Sie die Kopie. Kopieren Sie (Command-C) den Kopf, wählen Sie das oberste Ohrelement und gehen Sie zu Edit > Paste Style.  Ändern Sie die Füllposition mit dem Fill Tool (G).  Fügen Sie das zweite Ohr auf der gegenüberliegenden Seite des Kopfes hinzu.

Wie Sie sehen können, können wir nicht nur die Objekte selbst, sondern auch ihr Aussehen kopieren.

Schritt 7

Lasst uns den Bären fertig machen und ein weiteres Element hinzufügen: einen stilisierten Bauch.  Verwenden Sie das Ellipse Tool (M), um ein Oval zu erstellen und füllen Sie es mit einer tiefen Purpurfarbe. Schalten Sie den Blend Mode im Paneel Layers auf Screen um. 

Wir können die erzeugte Ellipse in die Figur des Kopfes einfügen und so die unnötigen Teile verbergen.  Wählen Sie das erstellte Oval auf dem Paneel Layers aus und strecken Sie es über die Form des Kopfes, bis Sie einen schmalen blauen Balken sehen, wie in der Abbildung unten gezeigt.  Lassen Sie die Ellipse los, indem Sie sie auf die Kopfschicht legen.

Wir sind fertig!  Gehen wir weiter zum nächsten Tiersymbol.

2. Einen quadratischen Panda erstellen 

Schritt 1 

Lassen Sie uns das Bär-Symbol verwenden, das wir bereits erstellt haben, um ein neues Element zu erstellen.  Duplizieren Sie es und ändern wir die Farben der linearen Füllung auf die weiße und graue Unterseite.  Dann streichen Sie die Ohren von violett bis dunkelgrau neu.  Ändern Sie die lineare Füllung der Nase zu dunkelgrau, und passen Sie auch die Farbe der Biegung des Mundes an, indem Sie es auf rosa umstellen. 

Passen Sie schließlich die Augenfarbe an, indem Sie die radiale Füllung auf eine hellbraune Farbe in der Mitte und dunkelbraun an der Kante ändern, und tragen Sie eine dunkelbraune Farbe auf die Pupille auf.

Schritt 2

Als nächstes fügen wir dunkle Flecken um die Augen hinzu, damit unser Charakter mehr wie ein echter Panda aussieht.  Verwenden Sie das Ellipse Tool (L), um eine 75 x 95 px Form zu erstellen, die mit einer linearen Füllung eines dunkelgrauen Farbtons gefüllt wird.

Drehen Sie die Form um 45 Grad und platzieren Sie sie unterhalb des Auges, indem Sie die Form zum Paneel Layers ziehen.

Beachten Sie den Unterschied zwischen dem Platzieren einer Figur in der anderen und dem Platzieren einer Figur unter der anderen.  Diesmal sehen Sie einen längeren blauen Marker, wie in der Abbildung unten gezeigt.

Schritt 3

Duplizieren Sie (Command-C> Command-V) einen Spot und drehen Sie ihn horizontal auf der anderen Seite, indem Sie die Transforms-Funktion in der Toolbox von oben verwenden.  Verschieben Sie die Kopie des Spots so, dass sie mit dem zweiten Auge übereinstimmt.

Und jetzt haben wir einen Panda! Lassen Sie uns weitergehen.

3. Eeinen quadratischen Waschbär erstellen 

Schritt 1 

Lassen Sie uns den Panda-Charakter duplizieren und in einen niedlichen Waschbär verwandeln!  Ändern Sie zunächst die Farbe der Kopfform mit einer vertikalen linearen Füllung von hellblau von oben nach unten zu dunklerem Blau.

Fahren Sie fort, indem Sie die Farbe der Augen zu rosaroter Farbe änderen, und lassen Sie uns den Mund ersetzen.  Verwenden Sie das Pen Tool (P), um die eckige Form des Mundes mit einem dunkelgrauen Strich zu erstellen.

Schritt 2

Jetzt ändern wir die Ohren.  Wählen Sie eine größere Kreisform des Ohrs und Convert to Curves, indem Sie die Schaltfläche in der Toolbox von oben verwenden.  Nehmen Sie das Node Tool (A) und wählen Sie den oberen Punkt der Form.  Convert to Sharp vom oberen Bedienfeld, um das Ohr spitz zu machen.  Machen Sie das Gleiche für die Innenseite des Ohrs: Convert to Curves und Convert Sie den oberen Punkt in Sharp. 

Schritt 3 

Ändern Sie die Farbe des Ohres so, dass es sich dem Kopf nähert und drehen Sie das Ohr um 45 Grad.  Duplizieren Sie das Ohr und drehen Sie es horizontal. Legen Sie die Kopie auf die gegenüberliegende Seite.

Schritt 4

Wählen Sie einen Ort um das Auge mit dem Fill Tool (G) und stellen Sie die Füllfarbe, ändert sie mehr Licht und dunkle Blauton.  Kopieren Sie (Command-C) einen Punkt, wählen Sie den zweiten Punkt und Edit > Paste Style, wenden Sie einen neuen Look.

Vervollständigen Sie den Charakter, indem Sie dem Bereich unter der Nase eine hellgraue Ellipse hinzufügen.  Mit einem Waschbären ist das alles!  Lassen Sie uns zu unserer letzten Ikone gehen!

4. Einen quadratischen Papagei erstellen

Schritt 1

Lassen Sie uns unser erstes Symbol duplizieren - lila Bär - und es verwenden, einen lustigen Papagei zu machen.  Ändern Sie die Farbe des Kopfes mit einer linearen Füllung von hellgrün nach dunkelgrün am unteren Rand.  Entfernen Sie die elliptische Form Bauch und Mund tragen, da sie nicht mehr benötigt werden.

Ändern Sie die Augenfarbe in orange-braun. 

Schritt 2

Lassen Sie uns die Nase eines Bären in einen Papageienschnabel verwandeln!  Drehen Sie es um 90 Grad und Convert to Curves.  Wählen Sie den unteren Punkt mit dem Node Tool (A) und Convert to Sharp aus der Toolbox von oben. 

Ändern Sie die Farben der linearen Füllung von oben in gelb und von unten in orange.

Schritt 3

Nehmen Sie das Ellipse Tool (M) und machen Sie eine schmale Form mit einer Größe von 15 x 40 px.  Fülle es mit einer hellgrünen Farbe und ändere den Blend Mode auf Multiply, um einen dunklen, durchsichtigen Stift zu erhalten.

Halten Sie die Option-Shift gedrückt und ziehen Sie die Feder nach rechts, um eine Kopie zu erstellen.  Drücken Sie einige Male Command-J, um zwei weitere Kopien zu erstellen.

Schritt 4

Fügen wir unserem Papagei das letzte Detail hinzu.  Verwenden Sie das Ellipse Tool (M), um eine Form von 40 x 70 px in der Mitte der Stirn zu erstellen, wählen Sie die richtige Farbe von der hellsten Stelle auf Ihrer Stirn aus und tragen Sie eine hellgrüne Farbe auf die Form auf.

Fügen Sie zwei kleinere Ellipsen auf beiden Seiten der mittleren Figur hinzu.  Wählen Sie alle drei Formen aus, und verwenden Sie im Bedienfeld oben die Add Operation, um alle Ellipsen in einer Form zusammenzufassen.

Duplizieren Sie die Form (Command-C > Command-V) und verschieben Sie die untere Kopie ein wenig, indem Sie die Abwärtspfeiltaste mehrmals drücken.  Ändern Sie die Farbe der Form in dunkelgrün und erstellen Sie einen flachen Schatten.

Und jetzt ist er bereit!  Unsere Papageiensymbol ist fertig!

Schritt 5

Hier ist unser Set von niedlichen quadratischen Tieren, die wir als Elemente des Spiels "3 in einer Reihe" verwenden werden.  Lassen Sie uns bewegen und erstellen Sie einen einfachen Spielbildschirm, um zu sehen, wie sie zusammenarbeiten werden!

5. Eines Spielbildschirms "3 in einer Reihe" erstellen

Schritt 1

Lassen Sie uns unsere Hintergrundform freischalten und ihre Farbe zu einer zarten Orange ändern.  Verwenden Sie das Rounded Rectangle Tool (M), um eine gelbe Form mit den Maßen 415 x 600 px und einem Corner Radius von 10% zu erhalten.

Schritt 2

Duplizieren Sie (Command-C> Command-V) die Form und erstellen Sie eine kleinere Kopie, indem Sie die Füllfarbe in ein dunkleres Gelb ändern.

Duplizieren Sie die neue Form und reduzieren Sie die Kopiengröße erneut, indem Sie die Farbe auf das gleiche Hellgelb wie das größere abgerundete Rechteck umstellen.

Schließlich duplizieren Sie das größte abgerundete Rechteck und verschieben Sie die untere Kopie ein wenig, indem Sie die Abwärtspfeiltaste mehrmals drücken.  Machen Sie die Kopie ein wenig größer und ändern Sie im Paneel Layers den Blend Mode auf Multiply, um einen schwer fassbaren Schatten zu bilden.  Im Allgemeinen haben wir vier abgerundete Rechtecke für das Spielfeld.

Schritt 3

Verwenden Sie das Ellipse Tool (M) und halten Sie die Shift-Taste gedrückt, um einen großen grünen Kreis am unteren Rand der Leinwand zu erzeugen.  Platziere es zwischen dem Spielbildschirm und der Hintergrundfigur.  Fügen Sie weitere Kreise hinzu, die den unteren Rand der Zeichenfläche abdecken.

Schritt 4

Wählen Sie einen helleren grünen Farbton und verwenden Sie das Ellipse Tool (M), um kleinere und hellere Kreise zu bilden, die einfache stilisierte Sträucher darstellen.

Schritt 5

Verwenden Sie weiterhin die gleiche Technik und füllen Sie die Oberseite der Leinwand mit hellorangenen Kreisen, die stilisierte Wolken darstellen.

Schritt 6

Jetzt können wir damit beginnen, die Tiersymbole auf dem Spielfeld zu platzieren.  Hier verwende ich einen einfachen Trick, damit alle Elemente gleich sind.  Wie Sie wahrscheinlich bemerkt haben, ist unser Papagei etwas kleiner als andere Charaktere, weil er keine Ohren hat.  Es kann die Ausrichtung der Figuren ein wenig schwieriger machen, und deshalb kopiere ich die Ohren vom Panda-Symbol und hefte sie an den Papagei.  Machen Sie die Ohren vollständig transparent, indem Sie die Fill und Stroke auf none setzen und die Elemente dann gruppieren.

Jetzt können wir die Symbole in eine Reihe setzen und die Größe reduzieren, so dass sie dem Spielbildschirm entsprechen.  Während Sie die ausgewählten Symbole speichern, gehen Sie von oben in die Symbolleiste und öffnen Sie das Arrangierfenster.  Klicken Sie bei diesem Objekt auf Space Horizontally und deaktivieren Sie das Kontrollkästchen Auto Distribution, indem Sie den Leerstellenwert auf 0 px setzen.

Sie können die Formen auch unten anordnen, indem Sie dasselbe Arrange-Bedienfeld verwenden.

Schritt 7

Gruppieren Sie (Command-G) eine Reihe von Symbolen, halten Sie die Shift-Taste gedrückt und ziehen Sie sie, um eine Kopie zu erstellen.  Drücken Sie mehrmals auf Command-J und füllen Sie den Spielbildschirm mit Symbolen.  Wählen Sie alle Zeilen aus, wechseln Sie zum Bereich Arrange und klicken Sie auf Space Vertically.  Deaktivieren Sie das Kontrollkästchen mit der Option Auto Distribute, und legen Sie den Leerstellenwert auf 2 px fest, wodurch schmale Lücken zwischen den Kanten der Symbole entstehen.

Sie können das Layout anpassen, indem Sie die Symbole verkleinern oder vergrößern und den Abstand zwischen den Reihen so anpassen, dass die Symbole bis zum Spielfeld reichen.

Gleich danach können wir die Symbole zufällig mischen, so dass die ganze Szene wie ein echter Spielbildschirm aussieht.  Doppelklicken Sie auf die Reihe der Symbole, um die Gruppe zu isolieren, und verschieben Sie die Symbole innerhalb der Gruppe horizontal, während Sie die Shift-Taste gedrückt halten.

Herzlichen Glückwunsch!  Sie sind eine Stufe höher gegangen!

Ausgezeichnete Arbeit!  Unser Spielbildschirm "3 in einer Reihe" ist fertig!  Ich hoffe, es hat Ihnen Spaß gemacht, dieser Lektion zu folgen, und Sie haben nützliche Tipps und Tricks gefunden, mit den Hauptfiguren, Farbverlaufsfüllungen und verschiedenen transformierenden Affinity Designer-Operationen gearbeitet.  Zögern Sie nicht, Ihre Wissen anzuwenden, neue Spiele und persönliche Projekte zu erstellen und vergessen Sie nicht, Ihre erstaunlichen Ergebnisse zu teilen!

Wenn Sie lernen möchten, wie Sie in Affinity Designer andere Designelemente für Spiele erstellen können, sollten Sie sich die folgenden Orte ansehen:

• So erstellen Sie einen Bildlaufhintergrund in Affinity Designer
• So erstellen Sie einen Sprite Sheet-Spielcharakter im Affinity Designer