Как нарезать спрайты в фотошопе
В заключительной части руководства по пиксельной графике я объединю ранее созданные спрайты в единый холст, который содержит несколько фрагментов спрайтов:
Можно было бы вручную в Photoshop расположить вместе на большем холсте отдельные изображения спрайтов. Хитрость заключается в том, чтобы знать размер каждого фрагмента спрайта и то, где он располагается в системе координат холста. Если, к примеру, мы хотим поместить все наши цветные изображения зелий в спрайт-лист.
1. Нужно определить размер каждого спрайта. Каждое из изображений зелий имеет размер 10 на 16 пикселей:
2. Вычислить размер всего спрайт-листа, исходя из размера отдельного изображения и их количества. У меня есть пять различных спрайтов зелий, 10 на 16 пикселей каждый, так что мой холст будет иметь 16 пикселей в высоту и 50 пикселей в ширину. Таким образом, все спрайты будут выстраиваться в ряд по горизонтали:
3. Перейдите в Файл> Поместить встроенные , чтобы вставить все спрайты игры с пиксельной графикой на холст:
4. Расположите все спрайты рядом. Убедитесь, что включены « Привязка » и « Быстрые направляющие », это поможет выровнять изображения:
Рисунок 4: Функция «Привязать к» находится в разделе «Просмотр» верхнего меню. Установите Привязать к > Все
5. Теперь спрайт-лист готов к сохранению в формате PNG :
Но этот метод имеет ряд ограничений и отнимает много времени, особенно если вы работаете с большим количеством игровых элементов. Наилучшим решением было бы использовать другую программу для пиксельной графики. В интернете доступно несколько бесплатных генераторов спрайт-листов, которые могут сделать этот процесс намного проще.
Например, Stitches позволяет загрузить отдельные изображения, а затем скачать спрайт-лист, включающий их все, а также CSS и HTML- код . Этот инструмент немного ограничен, когда нужно разместить каждый спрайт отдельно. Но если вы размещаете изображения просто в ряд, его возможностей вполне должно хватить.
Я предпочитаю называть файлы понятными с первого слова именами, с дескриптором и / или номером, например " Potion_01_Mana ", " Potion_02_Health ", " Potion_03_Anti-Poison " и т.д.:
Рисунок 7: Я загрузила все спрайты, и Stitches расположил их автоматически. Я даже добавила небольшие отступы между спрайтами с пиксельной графикой
Вот скачанный со Stitches PNG-файл :
Теперь вы можете сослаться в коде игры на один спрайт-лист и получить доступ ко всем изображениям этого листа. Спрайт-листы могут содержать любую часть игровой графики, которая вам нужна, в том числе анимированные циклы ( кадры, которые проигрываются последовательно, создавая анимацию, которая через цикл плавно переходит от последнего кадра к первому ).
Создаем врага - монстра
Используя те же установки, которые мы задали при создании основного графического персонажа (в первой части) и те же приемы, я собираюсь создать монстра крысу.
1. Мы начинаем с холста размером 50 на 50 пикселей. При включенной сетке я добавлю нейтральный цвет заливки:
2. Я начну с базового коричневого цвета и создам тело крысы-врага из игры с пиксельной графикой. Не забывайте использовать инструмент « Карандаш » вместо инструмента « Кисть »:
3. Как я создала тело крысы:
- Нажмите один раз карандашом в 10 пикселей, чтобы создать голову;
- Тело крысы в форме арахисового ореха расположено под углом от головы;
- Далее я добавляю детали: длинную морду, уши, руки, пальцы рук, ноги, пальцы ног и хвост. Чтобы подчеркнуть, что эта крыса - монстр, я также добавила красные глаза и черные ногти:
4. Я решила, что просто серая крыса будет недостаточно похожа на монстра, поэтому после того, как я создала сведенную копию всех слоев, я добавила корректирующий слой ( Слой> Новый корректирующий слой> Цветовой тон / Насыщенность ), чтобы изменить общую цветовую гамму на зеленую:
Рисунок 4: Добавление корректирующего слоя «Цветовой тон /Насыщенность», чтобы изменить общую цветовую гамму
5. Далее я хочу добавить свет и тени, как я делала для главного героя игры с пиксельной графикой. Я создала несколько новых слоев, и, используя режимы наложения « Мягкий свет » и « Перекрытие », добавила глубину. Я также вернула назад красные глаза:
6. Теперь все готово, обрежьте изображение и сохраните файл в формате PNG :
Если вы хотите сохранить изображение большее, чем 50 на 50 пикселей, просто измените значение параметра « Ресамплинг (Размера изображения) » на « По соседним пикселям »:
Создаем оружие
Продолжим наш урок пиксельной графики. Каждый положительный персонаж игры должен иметь что-то особенное, чтобы защитить себя от зла в этом мире. Давайте пропустим стандартную для начального уровня " деревянную палку " и сразу создадим мощную вещь - золотой меч.
1. Создайте новый холст, как мы делали раньше. Или просто удалите все слои из предыдущего проекта ( кроме цвета заливки ) и сохраните его под новым именем.
Подсказка: Я советую создавать новый слой для каждого дополнительного элемента, на тот случай, если вы захотите изменить что-нибудь позже:
3. Я хочу, чтобы лезвие выглядело металлическим, так что добавлю более светлый желтый цвет для одной стороны. Чтобы получить соответствующий оттенок, я использовала инструмент « Пипетка » и подобрала с его помощью цвет, а затем увеличила его насыщенность в панели выбора цвета программы для пиксельной графики:
Рисунок 8: Измените насыщенность основного желтого цвета, чтобы получить правильный оттенок светло-желтого цвета для блестящего метала
4. В качестве последнего штриха добавим украшения в рукоятку меча для героя игры с пиксельной графикой ( рубины ). Я выбираю глубокий красный для основного цвета и более легкую версию этого цвета для бликов:
Рисунок 9: Я изменила яркость базового рубинового цвета, чтобы получить правильный оттенок для бликов
5. Теперь я добавлю больше глубины с помощью слоев света и тени. Я создала новый слой с режимом смешивания « Мягкий свет » и зарисовала его черным цветом. Однако этот режим не работает для желтых цветов лезвия, потому что они цвета очень светлые.
Но я все равно хочу добавить небольшие тени для лезвия, поэтому я вручную выбрала более темный цвет ( как я сделала для блеска лезвия ):
6. Чтобы закончить, обрежьте изображение и сохраните его в формате PNG :
Создание бутылочек с зельями
От " аптечек " до " бутылочек со здоровьем " - идея элемента, который может мгновенно излечить персонажа игры с пиксельной графикой, довольно популярна во многих играх. Вот как сделать зелье здоровья.
2. Горлышко бутылки будет иметь 4 пикселя в ширину.
3. Пробка будет коричневого цвета. Это 2 пикселя выше верхней части горлышка.
6. Добавьте немного теней и все готово:
Хотите создать разные зелья? Добавьте новый слой « Цветовой тон / Насыщенность » и измените цветовую гамму, как мы делали с зеленой крысой. Чтобы пробка оставалась того же цвета, я добавила этот слой снова поверх слоя « Цветовой тон / Насыщенность ».
Рисунок 14: Порядок слоев следующий: слой теней, слой пробки, слой «Цветовой тон / Насыщенность» - все замаскированы сведенным слоем зелья здоровья
Вот мои разные расцветки. Теперь у меня есть:
Используйте палитру цветов для ручного подбора вариантов базового цвета для конкретной детали. В качестве дополнительного шага используйте дополнительные слои с альтернативными режимами наложения и / или непрозрачностью, чтобы добавить свет и тень поверх сведенной копии всех слоев. В конце подрежьте холст до минимального размера и сохраните его в формате PNG .
В заключительной части этого руководства я займусь объединением отдельных игровых элементов в листы спрайтов.
В этой статье я расскажу, как нарисовать пиксель арт в Photoshop CC / CS6. Для этого мы используем пиксельную графику:
Как создать пиксель арт - настройки Photoshop
Создайте новый квадратный документ со сторонами от 20 до 100 пикселей ( в зависимости от того, насколько большой спрайт ). Я буду работать с холстом 50 на 50 пикселей:
Продолжим наш урок пиксельной графики. Выберите инструмент « Карандаш » ( в выпадающем меню инструмента «Кисть» ) и установите размер кисти в 1 пиксель. Выберите инструмент « Ластик » и задайте для него размер - 1 пиксель, Режим - Карандаш :
Еще одно изменение, вернитесь в Настройки > Общие и измените интерполяцию изображения на « По соседним пикселям (сохраняет четкие края) »:
Теперь все готово, чтобы мы могли приступить к созданию пиксельной графики!
Как сделать пиксель арт - создание персонажа
Мы начнем с создания спрайта одиночного персонажа.
Начнем с файла размером 50 на 50 пикселей, который мы создали. Я добавлю фоновый слой со сплошным цветом. После этого мы сможем видеть сетку.
В нижней части палитры слоев нажмите на иконку, которая выглядит как наполовину заполненная окружность. Выберите параметр « Цвет » и задайте для нового слоя нейтральный цвет заливки:
Рисунок 10: Ярлык для добавления нового однородного слоя находится в меню в нижней части палитры слоев
Добавьте новый прозрачный слой поверх этого слоя заливки цветом. Перейдите в Слой> Новый> Слой или просто нажмите иконку с загнутым листом в меню в нижней части палитры слоев.
С помощью инструмента « Карандаш » нарисуйте тело персонажа игры с пиксельной графикой. Я хочу сделать тело как можно более простым, а затем в конце подкорректировать его. Мы добавим больше деталей, когда создадим основную форму.
Подсказка: Для каждого нового элемента добавляйте дополнительный слой, чтобы иметь возможность вернуться позже и откорректировать.
Подсказка: Если хотите создать прямую линию, кликните один раз в том месте, где вы хотите ее начать, а затем, удерживая нажатой клавишу Shift , кликните в месте, где хотите завершить линию. Photoshop автоматически создаст прямую линию между двумя точками.
Вы можете создавать тело, как вам нравится. Вот, как это сделала я:
- Нажмите один раз на холсте карандашом размером 15 пикселей, чтобы создать голову;
- Создайте треугольник ( направленный вниз ), это будет грудь, и нарисуйте сверху от него шею ( с помощью карандаша с размером 3 пикселя );
- Создайте туловище с помощью другого треугольника ( направленного вверх ) снизу от треугольника груди;
- Нарисуйте ноги из нижней части треугольника туловища;
- Поставьте " точки " в тех местах, где будут заканчиваться руки. Одна рука у персонажа будет поднята вверх, а другая опущена. Удерживая нажатой клавишу Shift , кликните мышью по краю плеча, чтобы соединить плечо и конец руки;
- Добавьте кисти рук и ступни ног персонажа игры с пиксельной графикой;
- Теперь можете добавить или стереть некоторые пиксели, чтобы скорректировать форму тела. Я добавила немного больше объема в ногах, чтобы сделать шею и тело толще и немного округлила плечи.
Теперь мы добавим одежду, волосы и лицо. Используйте базовую форму тела как шаблон, чтобы создать одежду. Я хочу добавить шесть новых слоев для рубашки, брюк, обуви, волос, лица и мелких деталей:
Файл Photoshop так, как он есть на текущий момент.
На данном этапе урока пиксельной графики нашего парня уже можно было бы назвать завершенным, но я хочу добавить больше глубины с помощью света и тени.
Дополнительный шаг, добавление теней
Создадим сведенную копию всех слоев. Для этого отключите видимость слоя заливки цветом ( нажмите на иконку глаза слева от миниатюры слоя ), затем нажмите Command-Option-Shift-E (Mac) или Ctrl-Alt-Shift-E (PC) . Это автоматически создаст сведенную копию всех видимых слоев поверх остального стека слоев.
Теперь я предлагаю поместить слои в отдельную папку и отключить ее видимость. Чтобы быстро сгруппировать слои, выберите их и кликните по ним, а затем нажмите Ctrl / Option -G :
Добавьте новый слой и измените его режим смешивания. Режим смешивания можно задать с помощью выпадающего меню в верхней части палитры слоев, слева от параметра непрозрачности. По умолчанию в этой программе для пиксельной графики он установлен на « Нормальный ».
Я хочу выбрать режим смешивания « Мягкий свет », потому что это хорошо затемнит цвета, которые я использовала для персонажа. При выбранном новом слое ( я назову его " Shading " ), удерживая нажатой клавишу Alt , кликните по слою, расположенному ниже ( сведенному слою персонажа ), чтобы создать маску. Таким образом, все, что вы рисуете на слое “ Shading ” будет видно в пределах маски слоя “ Character ”:
Зарисуйте области слоя " Shading " черным карандашом. При текущем режиме смешивания черный цвет будет затемнять цвет под ним. Красный цвет рубашки станет темно-красным, зеленый цвет волос станет темно-зеленым и так далее.
Подсказка: Если затенение является слишком жестким, измените режим смешивания или непрозрачность слоя. Если хотите добавить больше оттенков затененных цветов, создайте новые слои " Shading " с различной непрозрачностью.
В конце у меня получилось два слоя теней: первый с непрозрачностью 25%, а второй с непрозрачностью 45%:
Если хотите добавить светлые участки, создайте новый слой “ Highlighting ” так же, как мы добавили слой " Shading ", только установите режим смешивания « Перекрытие » и используйте белый карандаш.
Перейдите в меню Файл> Сохранить как. > Формат: PNG
У нас получился крохотный персонаж размеров 30 на 45 пикселей в файле PNG:
Это идеальный размер для мобильных устройств, где предпочтение отдается компактной графике.
Если хотите, чтобы изображение было больше, перейдите в Изображение> Размер изображения , и задайте для параметра « Ресамплинг » значение « По соседним пикселям (четкие края) ».
Подводя итоги
Мы начали с нескольких основных установок Photoshop , чтобы было проще создавать пиксельную графику. Мы задали для параметра « Интерполяция изображения » значение « Соседние пиксели », а для деления сетки - 1 пиксель. Затем мы использовали « Карандаш » и « Ластик » в режиме « Карандаш » соответственно.
В следующей части этого руководства, я возьмусь за создание других графических элементов фэнтези игры: врага, оружия, а также элемента здоровья.
Шаг 1. Открытие Photoshop'a.
Я рекомендую использовать CS5, и данное руководство рассчитано именно на него. Но и CS4 должен сойти, так как все действия, производимые в данном руководстве выполнимы и в CS4.
Шаг 2. Открытие окна образцов.
Для этого требуется выбрать в верхнем меню "Окно->Образцы". После этого появится окно, как на втором скриншоте в этом шаге.
Шаг 3. Загрузка палитры Cortex Command.
В появившемся окне нажимаем на маленькую кнопку в правом верхнем углу, после чего появляется меню, где мы выбираем заменить образцы. Затем мы выбираем либо sct.act (для рисования обычных спрайтов) либо mct.act (для рисования карт). Данные файлы можно скачать в прикреплениях.
Изначально эти файлы не будут показываться в диалоге открытия, поэтому нужно будет выбрать там тип файлов - Таблица цветов (*.ACT). После чего набор цветов в палитре образцов заменится на палитру Cortex Command.
Теперь вы можете спокойно рисовать в уже существующих спрайтах. Для выбора определенного цвета нужно просто щелкнуть по нему левой кнопкой мыши в палитре образцов, и он сразу станет основным цветом для рисования. Но ведь иногда требуется создать спрайт с нуля? Или перевести существующее изображение в палитру CC? Тогда продолжим.
Шаг 4. Применение таблицы Cortex Command для изображения.
Для начала попробуем создать спрайт с нуля. Создаем новое изображение нужных вам размеров. Затем делаем следующее. В верхнем меню выбираем "Изображение->Режим->Индексированные цвета" (Рис 1). В появившемся диалоговом окне выбираем из выпадающего списка "Палитра" пункт "Заказная. " (Рис 2). Далее в следующем окне (Рис 3) нажимаем на "Загрузить. " и выбираем файл sct.act (или mct.act, если создаете ландшафт). Результатом станет следующее - Рис 4. Далее жмем везде "ОК", и вуаля - ваше изображение в палитре Cortex Command.
Для изменения таблицы уже существующих изображений операции точно такие же, но стоит помнить, что если исходное изображение уже в индексированных цветах, то нужно сначала перевести его в RGB, и уже потом переводить в таблицу CC.
Это продолжение серии переводов туториалов от Twinklebear, в оригинале доступных тут. Перевод отчасти вольный и может содержать незначительные поправки или дополнения от переводчика. Перевод первых двух уроков — за авторством InvalidPointer, а третьего и четвертого — за k1-801.
Список уроков:
Нарезка листа спрайтов
Зачастую в 2D играх используют одно большое изображение для хранения нескольких меньших изображений, например, тайлы в тайлсетах вместо множества маленьких картинок для каждого тайла. Такое изображение называется лист спрайтов и оно очень удобно для работы, так как нам не нужно менять текстуру, которую хотим отрисовать, а лишь указать, какую часть текстуры нужно использовать.
В этом уроке мы увидим, как выбирать части текстуры, используя SDL_RenderCopy, а также немного о том, как обнаружить определенные события нажатия клавиш, которые будем использовать, чтобы выбрать, какой участок текстуры рисовать. На листе спрайтов будут четыре разноцветных круга:
В данном уроке лист спрайтов состоит из множества спрайтов одинакового размера, в таком случае нарезка не представляет трудностей. В противном же случае для спрайтов разного размера, нам бы понадобился файл с метаданными, в котором была бы информация о расположении частей. Для этого урока мы будем использовать 4 спрайта размера 100x100. Код этого урока основан на уроке 4, если у вас еще нет кода, на основании которого вы будете писать, можно взять его с Github.
Выбор части изображения
С помощью SDL очень легко выбрать часть текстуры, которую хотим нарисовать. В уроке 4 оставшиеся параметры SDL_RenderCopy со значением NULL означают координаты прямоугольника, который определяет, какую часть текстуры мы хотим отрисовать. При передаче значения NULL указываем, что нам нужна вся текстура, но мы можем легко добавить параметры прямоугольника и рисовать только часть текстуры. Чтобы это сделать, внесем изменения в функцию renderTexture так, чтобы она могла брать прямоугольную область, но все еще сохраним короткую версию синтаксиса из старой версии для удобства.
Изменяем renderTexture
Чтобы не привязывать все больше и больше параметров к нашей функции renderTexture и при этом сохранять удобство значений по умолчанию, мы разделим ее на две функции. Первая практически идентична вызову SDL_RenderCopy, но предоставляет параметр вырезаемой области со значением nullptr. Эта версия renderTexture будет получать место расположения в виде прямоугольной области, которую можем настроить сами или с помощью одной из наших других специализированных функций renderTexture. Новая базовая функция рендера становится очень простой.
Для удобства напишем другую функцию, где нам не нужно было бы создавать SDL_Rect для расположения, а лишь предоставлять x и y и позволить нашей функции отображения заполнить ширину и высоту текстуры. Мы создадим перегруженную версию renderTexture, которая это сделает с некоторыми настройками для обработки отсечения. Добавим прямоугольник вырезания, как параметр со значением по умолчанию nullptr и в случае, если вырез был передан, будем использовать ширину и высоту выреза вместо ширины и высоты текстуры. Таким образом, мы не будем растягивать маленький спрайт до размера его потенциально очень большого листа спрайтов, когда он отрисовывается. Эта функция является модификацией оригинальной функции renderTexture и выглядит весьма похоже.
Определение прямоугольников отсечения
В нашем случае очень легко посчитать прямоугольники отсечения, используя метод во многом похожий на метод тайлинга из урока 3, однако вместо того, чтобы идти строка за строкой, мы пойдем столбец за столбцом. Таким образом, первый кусок будет зеленым, второй — красным, третий — синим и четвертый — желтым. Идея вычислений такая же, как в уроке 3, но только вместо строк пробегаем столбцы. Так наши координаты по y вычисляются получением остатка при делении индекса тайла на количество тайлов (2), а координата по x делением индекса на количество тайлов. Эти координаты x и y являются индексами x и y, так что мы переводим их в реальные координаты пикселей умножением на ширину и высоту выреза, который для всех тайлов одинаковый (100x100). Наконец, выбираем кусок, чтобы рисовать, в данном случае первый.
Мы также хотели бы нарисовать наши куски в центре экрана, поэтому вычисляем эти координаты x и y, используя ширину и высоту тайла вместо ширины и высоты текстуры.
Если бы вместо этого мы использовали более сложный лист спрайтов с упакованными вместе повернутыми спрайтами разного размера, нам нужно было бы хранить информацию об их расположении и повороте в некотором файле метаданных, чтобы мы могли легко находить части.
Изменение изображений на основе ввода
Чтобы проверить все созданные нами части изображения, добавим обработку ввода с клавиатуры в цикл обработки событий и сделаем выбор отображаемой части с помощью клавиш 1-4. Чтобы определить, произошло ли нажатие клавиши, можно проверить имеет ли событие тип SDL_KEYDOWN и если это так, то мы можем узнать, какая клавиша была нажата, проверяя код клавиши внутри события, используя e.key.keysym.sym. Полный список типов событий, кодов клавиш и остальной информации по SDL_Event доступен на вики.
Когда клавиша нажата, нам нужно поменять значение useClip на номер части изображения, которую мы хотим рисовать. С этими изменениями цикл обработки событий выглядит следующим образом:
Рисуем вырезанное изображение
Последнее, что нужно сделать, это получить нужную часть изображения на экране! Сделаем это, вызвав нашу более удобную версию renderTexture для рисования части изображения без дополнительного масштабирования и передачи части, которую мы хотим использовать (та, что используется в useClip).
Конец урока 5
При запуске программы вы должны увидеть часть 0 (зеленый кружок) в центре экрана и иметь возможность выбирать различные части изображения с помощью цифровых клавиш. Если у вас возникнут какие-либо проблемы, дважды проверьте свой код и/или отправьте автору оригинала электронное письмо или твит.
Читайте также: