Evgenii Legotckoi
Evgenii Legotckoi17. Oktober 2015 06:42

So zeichnen Sie ein Sprite-Sheet in Adobe Illustrator

Ich bin es leid, GameDev -Prozesse mit Dreiecken und Rechtecken zu testen. Es ist langweilig und uninteressant, also ist es an der Zeit, etwas in die Luft zu jagen. Aber wo fängt man an? - du fragst. Und meine Antwort ist, Sie müssen eine Sprite Explosion zeichnen, um genau zu sein, und dann ein Sprite Sheet für die Explosion zeichnen, das die Explosionsanimation darstellt.

Aber wie geht das? - Diese Frage hat mich verwirrt. Nachdem ich mehrere Foren und Video-Tutorials studiert hatte, beschloss ich, die erhaltenen Informationen in einer Lektion auf meiner Website zu sammeln. Wir haben also die folgende technische Aufgabe für diese Lektion:

  1. Zeichne einige Sprite Bilder, aus denen wir ein Sprite Sheet für die Explosionsanimation erstellen;
  2. Erstellen Sie das Sprite-Sheet selbst und speichern Sie es als PNG -Datei;
  3. Machen Sie alles mit der Software Adove Illustrator .

Sprite-Bilder Schritt für Schritt zeichnen

Hinweis Auch wenn Sie nicht daran interessiert sind, die Schritt-für-Schritt-Anleitung zu lesen, schlage ich vor, sofort auf das Video-Tutorial am Ende des Artikels zu verweisen, alles wird anschaulich beschrieben, gezeigt und erklärt.

Schritt eins

Erstellen Sie eine Canvas-Datei für Sprite-Bilder mit den Parametern 20 x 20 Pixel. Dies sind die Bilder, die wir in den nächsten Tutorials zu GameDev in Qt verwenden werden, um Kugelexplosionen zu implementieren. Wir werden Explosionen zeichnen.

Schritt zwei

Erstellen Sie nun ein rechteckiges Netz auf der Leinwand, das unsere Pixel trennt. In diesem Fall müssen die Rasterparameter so eingestellt werden, dass Breite und Höhe der Breite und Höhe des Sprites entsprechen, und die Anzahl der vertikalen und horizontalen Teiler sollte der Anzahl der Pixel in Höhe und Breite entsprechen , bzw. Vergessen Sie auch nicht, den Strich zu entfernen und den Hintergrund transparent zu machen, wir brauchen keine zusätzliche weiße Farbe im Sprite-Bild.

Schritt drei

Wählen Sie das Werkzeug Live Paint Bucket und klicken Sie mit der linken Maustaste auf eine Live Paint Fill-Gruppe in einem rechteckigen Raster. Live Paint füllt mit der ausgewählten Farbe den durch Trennzeichen begrenzten Bereich sowie eine Kontur oder einen Strich. Da das Raster die Leinwand Pixel für Pixel teilt, ist jedes Rechteck ein Pixel, das wir mit Fast Fill mit Farbe füllen.

Schritt vier

Nachdem wir alle 15 Sprite-Bilder gezeichnet haben, erstellen Sie in Adobe Illustrator ein neues Projekt, das alle 15 Sprite-Bilder enthält und 15 Bilder breit und ein Bild hoch ist. Das heißt, wir werden alle Bilder in einer Reihe zeichnen. Wir werden das Rechteck auch auf der gesamten Leinwand platzieren. Vergessen Sie nicht, den Strich zu entfernen und den Hintergrund transparent zu machen.

Schritt fünf

Als nächstes erstellen Sie ein Konturnetz im Rechteck, bestehend aus einer Zeile und 15 Spalten für alle Sprite Bilder.

Schritt sechs

Und jetzt, indem Sie zum Datei-Menüpunkt gehen, mit dem "Platzieren" -Punkt, fügen Sie alle vorbereiteten Sprites zum Projekt hinzu.

Schritt sieben

Jetzt beenden wir die Erstellung des Sprite Sheets , indem wir es als PNG Bild mit transparentem Hintergrund speichern. Nachdem wir das resultierende Bild gespeichert haben, überprüfen wir es, wie es in einem normalen Bildbetrachter aussieht.

Außerdem wird die gesamte Lektion im folgenden Video-Tutorial vorgestellt.

Videoanleitung

Рекомендуємо хостинг TIMEWEB
Рекомендуємо хостинг TIMEWEB
Stabiles Hosting des sozialen Netzwerks EVILEG. Wir empfehlen VDS-Hosting für Django-Projekte.

Magst du es? In sozialen Netzwerken teilen!

Kommentare

Nur autorisierte Benutzer können Kommentare posten.
Bitte Anmelden oder Registrieren
Letzte Kommentare
A
ALO1ZE19. Oktober 2024 18:19
Fb3-Dateileser auf Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
ИМ
Игорь Максимов5. Oktober 2024 17:51
Django – Lektion 064. So schreiben Sie eine Python-Markdown-Erweiterung Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
d
dblas55. Juli 2024 21:02
QML - Lektion 016. SQLite-Datenbank und das Arbeiten damit in QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
k
kmssr9. Februar 2024 05:43
Qt Linux - Lektion 001. Autorun Qt-Anwendung unter Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
Qt WinAPI - Lektion 007. Arbeiten mit ICMP-Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
Jetzt im Forum diskutieren
J
JacobFib17. Oktober 2024 13:27
добавить qlineseries в функции Пользователь может получить любые разъяснения по интересующим вопросам, касающимся обработки его персональных данных, обратившись к Оператору с помощью электронной почты https://topdecorpro.ru…
JW
Jhon Wick2. Oktober 2024 01:52
Indian Food Restaurant In Columbus OH| Layla’s Kitchen Indian Restaurant If you're looking for a truly authentic https://www.laylaskitchenrestaurantohio.com/ , Layla’s Kitchen Indian Restaurant is your go-to destination. Located at 6152 Cleveland Ave, Colu…
КГ
Кирилл Гусарев27. September 2024 19:09
Не запускается программа на Qt: точка входа в процедуру не найдена в библиотеке DLL Написал программу на C++ Qt в Qt Creator, сбилдил Release с помощью MinGW 64-bit, бинарнику напихал dll-ки с помощью windeployqt.exe. При попытке запуска моей сбилженной программы выдаёт три оши…
F
Fynjy22. Juli 2024 14:15
при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …

Folgen Sie uns in sozialen Netzwerken