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

Я собираюсь рассказать о том, как создавать собственные листы спрайтов с пиксельной графикой, о проблемах их анимации с помощью стандартного Javascript и о возможностях использования такой библиотеки, как Phaser.

Шаблон:

Если вы планируете использовать React, просто предупреждайте, что существует довольно много документации о том, что Phaser и React плохо работают вместе. Если вы хотите быстро приступить к работе, я настоятельно рекомендую начать с шаблона Phaser здесь: https://github.com/photonstorm/phaser3-project-template

Принимайте творческие решения!

Затем определитесь со своим персонажем и движениями, которые вам нужны для анимации. Начни с простого.

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

Таблицы спрайтов

Вместо того, чтобы хранить каждый кадр отдельно (что быстро могло бы стать беспорядочным), 2D-игры хранят позы в активах, называемых листами спрайтов. Ниже приведен пример листа спрайтов, который я сделал из кота «Пушин»:

Есть несколько отличных программ, которые позволяют рисовать пиксельную графику и генерировать для вас листы спрайтов.

Если вы хотите узнать, как настраивать и создавать листы спрайтов в Adobe Photoshop, продолжайте читать, в противном случае вы можете перейти к разделу «Добавление рамок в вашу игру».

Создание листов спрайтов в Adobe Photoshop

Сначала создайте новый холст желаемого размера. Помните, что мы работаем с пикселями! Так что мы будем работать с небольшими размерами - что-то вроде 40 x 40 пикселей - хорошее начало. Мы всегда можем изменить это позже.

Увеличьте масштаб вашего крошечного холста, а теперь давайте настроим его, чтобы мы могли видеть, где находятся пиксели.

Настройки направляющих, сетки и фрагментов: (настройки- ›направляющие, сетка и фрагменты)

Эти настройки создадут видимую сетку для каждого пикселя, что упростит нам их рисование:

Теперь ваш холст должен выглядеть так, как показано справа:

Если вы не видите свою сетку, выберите «Просмотр» - ›« Показать »->« Нажмите «Сетка», чтобы включить линии сетки.

Настройки кисти:

Перейдите в настройки кисти и, удерживая нажатой кнопку мыши, отпустите, чтобы увидеть другие параметры кисти, и выберите «Инструмент« Карандаш »».

Измените размер кисти до 1 пикселя. Вы можете использовать горячие клавиши [и], чтобы быстро изменить размер кистей. Или вы можете щелкнуть раскрывающийся список кистей на панели инструментов и выбрать размер кисти вручную.

Настройки интерполяции изображений:

Перейдите в настройки- ›Общие -› Интерполяция изображений: ближайший сосед

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

Создание рамок для вашей игры

Затем вы должны найти способ сообщить вашей игре, где находится текущий кадр, который вам нужен.

Мы можем добиться этого, передав ему координаты x и y и размеры отдельного кадра, который вы хотите вырезать из листа спрайтов.

В приведенном ниже примере размер каждого пушина составляет 35 x 35 пикселей.

Простая формула для получения этих координат x, y:

x = индекс * ширина

y = индекс * высота

Если бы в нашем листе спрайтов было несколько строк, мы бы вычислили x и y следующим образом:

Вы можете видеть, как с несколькими позами и большим количеством игровых ресурсов это может довольно быстро стать довольно утомительным.

Войдите в Phaser!

Анимация спрайтов в Phaser

Phaser выполняет эти вычисления за нас и делает анимацию со спрайтами очень простой.

Настройка игры

Сначала мы создаем новую игру с помощью «новой» команды и передаем ей требуемые тип, размер, сцену и физические свойства. Типичная установка с гравитацией выглядит так:

Свойство отладки пригодится при (как и следовало ожидать) отладке. Если установлено значение true, вы можете видеть хитбоксы вокруг всех игровых объектов, что помогает определить, когда актив ведет себя не так, как ожидалось.

Выше этого создайте свою игровую сцену, расширив класс Phaser.Scene. Убедитесь, что имя вашей сцены, которое вы передаете свойству сцены игры, совпадает !:

Методы сцены

Сцена состоит из трех основных методов:

  • preload ()
  • create ()
  • update ()

preload ()

Предварительная загрузка - это место, где вы загружаете все свои исходные игровые изображения.

Здесь я использую встроенные методы в фазере для загрузки листа спрайтов «кошка» и двух изображений: «фон» и «трава».

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

create ()

Create - это то место, где вы будете создавать свои игровые объекты из изображений, которые вы загрузили выше.

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

Здесь мы также создадим наши анимационные циклы!

Вернемся к исходному листу спрайтов с одной строкой. Помните, как раньше нам приходилось вычислять наши x и y для каждого кадра? С Phaser это так же просто, как указать индекс изображения в таблице спрайтов.

Для таблицы спрайтов под нашим циклом бодрствования будут кадры 0 и 1, а для сна - 2 и 3.

Мы можем использовать метод this.anims.create () для создания циклов анимации, между которыми наш персонаж будет переключаться. Передаем ему следующие свойства:

ключ: название вашего анимационного цикла.

repeat: сколько раз повторяется цикл. Значение -1 установит непрерывный цикл. Ниже мы настраиваем кошку на анимацию «сидеть» в течение 4 кадров перед тем, как снова заснуть.

frames: сюда мы передаем ключевое имя нашей таблицы спрайтов, которое мы назвали ранее, и передаем номера начального и конечного индексов из нашей таблицы спрайтов для нашего цикла .

update ()

Наш третий и последний основной метод в нашей игровой сцене - это обновление. Здесь мы добавим логику для обновления состояния нашей игры, например, когда цикл анимации должен измениться.

Phaser также имеет встроенные прослушиватели событий клавиатуры, которые мы можем использовать. Мы можем сохранить его в переменной, чтобы код был чище и с ним было легче работать.

В этом примере я настроил слушателей для кошки, перемещающейся по экрану. Если игрок щелкнет влево, кошка воспроизведет цикл leftWalk и будет двигаться в этом направлении и так далее.

На самом деле это только начало всего, что умеет Phaser. Я надеюсь, что это поможет вам начать создавать свои собственные потрясающие пиксельные ассеты и анимировать их в Phaser!