Show Menu
Cheatography

Pixel Art Cheat Sheet (DRAFT) by

Основы создания Pixel Art для игр

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Базовые принципы

Почти всегда в размерах исполь­зуются степени двойки (8,16,­32,­64,­128­,256)
Рисунок создается от наиболее тёмных оттенков до наиболее светлых

Цвета

Избегать черного и белого цветов в ассетах (испол­ьзуются в спрайте персонажа, для акцент­иро­вания внимания)
Основные свойства цвета:
Оттенок - это сам цвет
Насыщенность - "­чис­тот­а" цвета, чем он ярче - тем насыще­ннее, чем ближе к серому - тем менее насыщенный
Яркость - степень ярокст­и/т­ёмности цвета

Цветовой круг

Цвет на круге

Основные цвета: желтый, красный и синий. Наиболее насыще­нные.
Втор­ост­епенные цвета: смесь двух основных цветов: оранжевый, фиолетовый и зелёный. Достаточно насыще­нные.
Трет­ьес­теп­енные цвета: смесь основного и второс­теп­енного цвета (остальные цвета круга). Они все еще достаточно насыщены (так как имеют в себе основные цвета), но если их смешать - насыще­нность станет меньше.
Допо­лняющие (compl­eme­ntary) цвета: на круге находятся напротив. Хорошо подчер­кивают друг друга, но при смешивании теряют насыще­нность.

Цветовая схема персонажа

Создание схемы
В прямоу­гольном выделении рисуем базовую диаграмму цветов персонажа и блокируем слой (замок). Повторяем несколько схем с разными цветами, выбираем наиболее подходящую для игры.

Пример цветовых схем

Рисование персонажа

1. Создаем документ 64х64.
2. Рисуем силуэт черным цветом. Силуэт - самая важная часть персонажа.
3. Добавляем немного контраста, используя 4 цвета (чёрный, светло­-серый, серый и белый).
4. Раскра­шиваем персонажа, начиная со средних оттенков, затем добавляем тени и свет.
5. Некоторые предметы (например оружие), нужно рисовать на отдельном слое.

Пример эскиза

Пример готового персонажа

 

Создание рисунка

1. Определяем пропорции и распол­ожение на холсте (зависит от распол­ожения в игре)
2. Рисуем базовые контуры черным
3. Определяем цветовую гамму (в т.ч. более светлые оттенки для освещенных участков, и более темные для теней)
4. Добавляем базовые цвета
5. Рисуем тени (более темным оттенком) и освещенные участки (более светлым)
6. Используем технику размывания (dithe­ring): добавляем "­шах­мат­ные­" переходы между цветами для более гладкого перехода (например в тенях)
7. Заменяем чёрные контуры на другой цвет (обычно самый темный цвет гаммы)
8. Сохраняем рисунок

Создание текстуры (Tile)

Заливаем всё самым темным цветом, потом постепенно рисуем, добавляя более светлые
Делаем сдвиг (offset) - по каждой оси в половину размера
Подпра­вляем формы и добавляем свет - более светлый оттенок
Еще раз делаем сдвиг и вносим исправ­ления
Добавляем самый светлый оттенок (обычно достаточно нескольких пикселей)

Набор текстур (Tileset)

Создаем новый документ
Копируем тайлы (обычно достаточно 3х3) и добавляем разноо­бразия
Проверяем бесшовные ли текстуры
Делаем неровные края, чтобы они выглядели реалис­тичнее
К итоговому набору можно добавить дополн­ите­льные тайлы, чтобы сцена была еще разноо­бразнее

Создание персонажей

Используем принципы композиции
Принцип B/M/S
Используем три фигуры (большую, маленькую и среднюю), например для тела (голова, тело, ноги), персонажа и т.д.
Используем эти же пропорции для разных видов персонажа (профиль, фас и т.д.)
Концепт арт
Рисуем базовые линии, потом раскра­шываем черным, белым и оттенками серого.
Делаем диаграмму исполь­зов­анных тонов.
Копируем слой с диагра­ммой, и добавляем копии новый слой-маску (перед­винуть слой правее) и ставим режим Blending Mode: Color. Теперь рисуем на новом слое поверх диаграммы цветами, при этом тон будет сохранятся благодаря наложению. Тоже самое с рисунком. Поверх рисунка добавляем еще слой-маску с режимом "­ove­rla­y", на которой добавляем более контра­стные оттенки некоторым элементам.

Пример концеп­т-арта

 

Композиция

Хорошая композ­иция: несколько элементов одной формы (например треуго­льн­ики), разноо­бра­зненные пропор­циями, углами, оттенком, распол­оже­нием, можно также комбин­ировать несколько элементов в один
Глубокая композиция получается при создании нескольких слоев (каждый из которых композиция элементов одной формы); при этом чем дальше слой - тем менее насыщенные цвета.

Пример композиции

Пример дизайна окружения

Unity

Импо­рт:
1. ПКМ на панели ассетов -> Import New
2. Меняем свойства в инспек­торе:
Filter Mode: Point (no filter);
Compr­ession: 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: Automa­tic, Method: Smart, Коррек­тируем обрезку кадров
4. Создаем пустой объект персонажа (Create->Empty);
5. В окне анимации создаем новую анимацию для каждого действия и сохраняем. Перетя­гиваем нужные кадры на таймлайн, и растяг­иваем до нужной скорости. Дублируем первый кадр на таймлайне и ставим его в конец;

Анимации

Аним­ация
Послед­ова­тел­ьность кадров: средний кадр, потом первый и последний, потом промеж­уто­чные;
.Пер­сонаж
На основе базового спрайта делаем анимации разных состояний для персонажа (в т.ч. для состояния покоя). Для рисования можно нарисовать схемат­ическое движение