Создаем 8-битную пиксельную графику с помощью Photoshop - часть 3

2016-05-07 0 ∞

В заключительной части руководства по пиксельной графике я объединю ранее созданные спрайты в единый холст, который содержит несколько фрагментов спрайтов:

Можно было бы вручную в Photoshop расположить вместе на большем холсте отдельные изображения спрайтов. Хитрость заключается в том, чтобы знать размер каждого фрагмента спрайта и то, где он располагается в системе координат холста. Если, к примеру, мы хотим поместить все наши цветные изображения зелий в спрайт-лист...

1. Нужно определить размер каждого спрайта. Каждое из изображений зелий имеет размер 10 на 16 пикселей:

Рисунок 1: Определите размеры каждого изображения спрайта

2. Вычислить размер всего спрайт-листа, исходя из размера отдельного изображения и их количества. У меня есть пять различных спрайтов зелий, 10 на 16 пикселей каждый, так что мой холст будет иметь 16 пикселей в высоту и 50 пикселей в ширину. Таким образом, все спрайты будут выстраиваться в ряд по горизонтали:

Рисунок 2: Создание нового холста для спрайт-листа

3. Перейдите в Файл> Поместить встроенные, чтобы вставить все спрайты игры с пиксельной графикой на холст:

Рисунок 3: Используйте функцию «Поместить встроенные», чтобы вставить все спрайты на холст

4. Расположите все спрайты рядом. Убедитесь, что включены «Привязка» и «Быстрые направляющие», это поможет выровнять изображения:

Рисунок 4: Функция «Привязать к» находится в разделе «Просмотр» верхнего меню. Установите Привязать к > Все

Рисунок 5: Быстрые направляющие включаются в разделе Просмотр> Показать> Быстрые направляющие

5. Теперь спрайт-лист готов к сохранению в формате PNG:

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

Например, Stitches позволяет загрузить отдельные изображения, а затем скачать спрайт-лист, включающий их все, а также CSS и HTML- код. Этот инструмент немного ограничен, когда нужно разместить каждый спрайт отдельно. Но если вы размещаете изображения просто в ряд, его возможностей вполне должно хватить.

Я предпочитаю называть файлы понятными с первого слова именами, с дескриптором и / или номером, например "Potion_01_Mana", "Potion_02_Health", "Potion_03_Anti-Poison" и т.д.:

Рисунок 6: Stitches, генератор HTML5 спрайт-листов

Рисунок 7: Я загрузила все спрайты, и Stitches расположил их автоматически. Я даже добавила небольшие отступы между спрайтами с пиксельной графикой

Вот скачанный со Stitches PNG-файл:

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