How to draw a sprite sheet in the Adobe Illustrator

adobe, adobe illustrator, sprite sheet, sprite, спрайт

Мне надоело тестировать процессы GameDev с помощью треугольников и прямоугольников. Это скучно и не интересно, поэтому настало время что-нибудь взорвать. Но с чего начать? - спросите Вы. А я отвечу, нужно нарисовать sprite взрыва, если быть точным, то нарисовать sprite sheet для взрыва, который будет представлять анимацию взрыва.

Но как это сделать? - этим вопросом озадачился я. После изучения нескольких форумов и видеоуроков, я решил собрать полученную информацию в один урок на своём сайте. Итак у нас следующее технической задание на этот урок:

  1. Нарисовать несколько sprite картинок, из которых мы сделаем sprite sheet для анимации взрыва;
  2. Собрать сам sprite sheet и сохранить его в PNG файл;
  3. Сделать всё это, используя ПО Adove Illustrator .

Рисуем sprite картинки по шагам

Примечание. Также, если не интересно читать пошаговый мануал, то предлагаю сразу обратиться к видеоуроку в конце статьи, там всё наглядно расписано, показано и объяснено.

Шаг первый

Создаём файл с полотном для sprite картинки с параметрами 20 на 20 пикселей. Именно такие картинки будем использовать в следующих уроках по GameDev в Qt для реализации взрывов от пуль. Будем рисовать взрывы.

Шаг второй

А теперь создаём на рабочем полотне прямоугольную сетку, которая будет разделять наши пиксели. При этом необходимо задать параметры сетки такие, что её ширина и высота будут равны ширине и высоте спрайта, а количество вертикальных и горизонтальных разделителей сделать количеству пикселей по высоте и ширине соответственно. Также не забудьте убрать обводку и сделать фон прозрачным, нам же не нужен лишний белый цвет в sprite-картинке.

Шаг третий

Выбираем инструмент Быстрая Заливка и  создаём левым кликом мыши группу для быстрой заливки из прямоугольной сетки. Быстрая заливка заполняет выбранным цветом область ограниченную разделителями, а также контуром или обводкой. Поскольку сетка разделяет полотно по пикселям, то каждый прямоугольник будет одним пикселем, который мы будет заполнять цветом с помощью Быстрой Заливки.

Шаг четвертый

После того, как мы отрисуем все 15 sprite картинок, создадим новый проект в Adobe Illustrator. Который будет содержать все 15 sprite картинок и будет шириной на все 15 картинок и по высоте на одну картинку. То есть будем отрисовывать все картинки в один ряд. Также поместим прямоугольник на всё полотно. Не забудьте убрать обводку и сделать фон прозрачным.

Шаг пятый

Далее создаём в Прямоугольнике контурную сетку, состоящую из одной строки и 15 столбцов под все sprite картинки.

Шаг шестой

А теперь, зайдя в пункт меню Файл, с помощью пункта "Поместить" добавляем в проект все подготовленные спрайты.

Шаг седьмой

А теперь завершаем создание sprite sheet , сохранив его в PNG картинку с прозрачным фоном. После сохранения получившегося изображения проверим его, как оно выглядит в обычном просмотрщике изображений.

Также весь урок представлен в ниже следующем видеоуроке.

Видеоурок

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate

Comments

Only authorized users can post comments.
Please, Log in or Sign up
Donate

Hello, Dear Users of EVILEG!!!

If the site helped you, then support the development of the site financially, please.

You can do it by following ways:

Thank you, Evgenii Legotckoi

v
April 9, 2020, 1:11 a.m.
vitalisimys

C++ - Тест 003. Условия и циклы

  • Result:64points,
  • Rating points-1
AF
April 7, 2020, 8:15 a.m.
Andrey Fedorov

C++ - Тест 003. Условия и циклы

  • Result:71points,
  • Rating points1
A
April 6, 2020, 4:24 a.m.
Alexey

C++ - Test 001. The first program and data types

  • Result:86points,
  • Rating points6
Last comments
April 8, 2020, 8:12 a.m.
ogustbiller

Круто! Немного начинает проясняться что к чему. Спасибо.
K
April 7, 2020, 7:55 a.m.
KULINAR847

А вот уже и на python... #!/usr/bin/env python# -'''- coding: utf-8 -'''-import sysfrom PySide2.QtWidgets import *from PySide2.QtQuick import *from PySide2.QtCore import *from PySide2.…
April 3, 2020, 7:06 a.m.
Konstantin Grudnitskiy

Я надеюсь вы уже разобрались в чем дело, но если вдруг нет, то проблема состоит в том, что вы пытаетесь запустить программу из интерпретатора питона. Файл main.py это уже готова…
April 3, 2020, 5:18 a.m.
Konstantin Grudnitskiy

>>> text = 'hello world'>>> ' '.join(word for word in text.split()[:-1])'hello'>>> def remove_last_word(text):... return text and ' '.join(word for word in text.s…
March 27, 2020, 1:40 p.m.
Evgenij Legotskoj

Добрый день. В конце пятой статьи скачать можете.
Now discuss on the forum
DK
April 9, 2020, 2:31 a.m.
Dzhon Kofi

Привет. Делаю реализацию перемещения строк на QTableView с моделью QSqlTableModel. Буду в этой теме спрашивать нужное. Пока такой вопрос при создании модели: как мне узнать rowCount? int…
April 8, 2020, 4:42 p.m.
elyana

Подскажите как правильно реализовать... Нужно создать массив в C++ с переменными типа сhar или же int. В Qml будет переменная, например text, которая будет изменять своё значение в зависим…
DK
April 8, 2020, 5:29 a.m.
Dzhon Kofi

:-D блин, без слов, пойду пройдусь))
s
April 8, 2020, 3:59 a.m.
slava_d2000

Всем привет. Прошу помощи.есть статическая сборка 5.14.2 (без SSL) компилируется чистый шаблон на QML и Widgets если войти на компьютер в терминальной сессии и запустить программ…
s
April 6, 2020, 7:06 a.m.
shuric

Добрый день. Объясните пожалуйста ... ... допиливать стилевое оформление в прокси классе ... где именно копать ? В каком виртуальном методе лучше допиливать (если можно н…
EVILEG
About
Services
© EVILEG 2015-2019
Recommend hosting TIMEWEB