Базовые принципы
Почти всегда в размерах используются степени двойки (8,16,32,64,128,256) |
Рисунок создается от наиболее тёмных оттенков до наиболее светлых |
Цвета
Избегать черного и белого цветов в ассетах (используются в спрайте персонажа, для акцентирования внимания) |
Основные свойства цвета:
Оттенок - это сам цвет
Насыщенность - "чистота" цвета, чем он ярче - тем насыщеннее, чем ближе к серому - тем менее насыщенный
Яркость - степень яроксти/тёмности цвета |
Цвет на круге
Основные цвета: желтый, красный и синий. Наиболее насыщенные. |
Второстепенные цвета: смесь двух основных цветов: оранжевый, фиолетовый и зелёный. Достаточно насыщенные. |
Третьестепенные цвета: смесь основного и второстепенного цвета (остальные цвета круга). Они все еще достаточно насыщены (так как имеют в себе основные цвета), но если их смешать - насыщенность станет меньше. |
Дополняющие (complementary) цвета: на круге находятся напротив. Хорошо подчеркивают друг друга, но при смешивании теряют насыщенность. |
Цветовая схема персонажа
|
Создание схемы В прямоугольном выделении рисуем базовую диаграмму цветов персонажа и блокируем слой (замок). Повторяем несколько схем с разными цветами, выбираем наиболее подходящую для игры.
|
Рисование персонажа
1. Создаем документ 64х64.
2. Рисуем силуэт черным цветом. Силуэт - самая важная часть персонажа.
3. Добавляем немного контраста, используя 4 цвета (чёрный, светло-серый, серый и белый).
4. Раскрашиваем персонажа, начиная со средних оттенков, затем добавляем тени и свет.
5. Некоторые предметы (например оружие), нужно рисовать на отдельном слое. |
Пример готового персонажа
|
|
Создание рисунка
1. Определяем пропорции и расположение на холсте (зависит от расположения в игре) |
2. Рисуем базовые контуры черным |
3. Определяем цветовую гамму (в т.ч. более светлые оттенки для освещенных участков, и более темные для теней) |
4. Добавляем базовые цвета |
5. Рисуем тени (более темным оттенком) и освещенные участки (более светлым) |
6. Используем технику размывания (dithering): добавляем "шахматные" переходы между цветами для более гладкого перехода (например в тенях) |
7. Заменяем чёрные контуры на другой цвет (обычно самый темный цвет гаммы) |
8. Сохраняем рисунок |
Создание текстуры (Tile)
Заливаем всё самым темным цветом, потом постепенно рисуем, добавляя более светлые |
Делаем сдвиг (offset) - по каждой оси в половину размера |
Подправляем формы и добавляем свет - более светлый оттенок |
Еще раз делаем сдвиг и вносим исправления |
Добавляем самый светлый оттенок (обычно достаточно нескольких пикселей) |
Набор текстур (Tileset)
Создаем новый документ |
Копируем тайлы (обычно достаточно 3х3) и добавляем разнообразия |
Проверяем бесшовные ли текстуры |
Делаем неровные края, чтобы они выглядели реалистичнее |
К итоговому набору можно добавить дополнительные тайлы, чтобы сцена была еще разнообразнее |
Создание персонажей
|
Используем принципы композиции |
|
Принцип B/M/S Используем три фигуры (большую, маленькую и среднюю), например для тела (голова, тело, ноги), персонажа и т.д.
Используем эти же пропорции для разных видов персонажа (профиль, фас и т.д.)
|
|
Концепт арт Рисуем базовые линии, потом раскрашываем черным, белым и оттенками серого.
Делаем диаграмму использованных тонов.
Копируем слой с диаграммой, и добавляем копии новый слой-маску (передвинуть слой правее) и ставим режим Blending Mode: Color. Теперь рисуем на новом слое поверх диаграммы цветами, при этом тон будет сохранятся благодаря наложению. Тоже самое с рисунком. Поверх рисунка добавляем еще слой-маску с режимом "overlay", на которой добавляем более контрастные оттенки некоторым элементам.
|
|
|
Композиция
Хорошая композиция: несколько элементов одной формы (например треугольники), разнообразненные пропорциями, углами, оттенком, расположением, можно также комбинировать несколько элементов в один |
Глубокая композиция получается при создании нескольких слоев (каждый из которых композиция элементов одной формы); при этом чем дальше слой - тем менее насыщенные цвета. |
Unity
|
Импорт: 1. ПКМ на панели ассетов -> Import New 2. Меняем свойства в инспекторе: Filter Mode: Point (no filter)
; Compression: None
; Pixels Per Unit: 32
|
|
Импорт Tileset: 1. Импортируем как обычный ассет; 2. Указываем свойство Sprite Mode: Multipe
, и в пункте Sprite Editor: Slice: Grid by Cell Size
Pixel Size: по размеру текстуры
Pivot: Bottom Left
|
|
Создание сцены Сцена создается путем "перетаскивания ассетов" . За порядок слоев отвечает ось z (для самых передних объектов можно установить 100, так как редко используется 100 слоев)
|
|
Импорт Анимаций 1. Все кадры помещаем в один документ последовательно; 2. Импортируем документ как ассет; 3. Sprite Mode: Multiple
Sprite Editor
-> Type: Automatic
, Method: Smart
, Корректируем обрезку кадров 4. Создаем пустой объект персонажа ( Create
-> Empty
); 5. В окне анимации создаем новую анимацию для каждого действия и сохраняем. Перетягиваем нужные кадры на таймлайн, и растягиваем до нужной скорости. Дублируем первый кадр на таймлайне и ставим его в конец; |
Анимации
|
Анимация Последовательность кадров: средний кадр, потом первый и последний, потом промежуточные;
|
|
.Персонаж На основе базового спрайта делаем анимации разных состояний для персонажа (в т.ч. для состояния покоя). Для рисования можно нарисовать схематическое движение
|
|
