Фон сцены
Помните, в последней статье мы вставили нашу карту на сцену игры и заметили, что фон (background) чёрного цвета. Phaser 3, если не задать ему конкретный цвет фона (с помощью backgroundColor: color в объекте config или установкой цвета фона камеры this.cameras.main.setBackgroundColor(color)) по умолчанию устанавливает чёрный цвет.
Мы поступим иным способом, чем просто заливать фон цветом или градиентом, мы добавим фоновую картинку и размножим её на весь уровень. Почему размножим? Потому что наша фоновая картинка с облаками имеет ширину 1024px, а весь игровой уровень шириной 6400px, т.е. требуется повторить вставку фона 6 раз, чтобы на весь уровень был фон (он даже будет заползать немного за экран, но ничего страшного в этом нет).
Как мы помним, сначала в функции preload необходимо предварительно загрузить требуемый фон:
Затем в create 6 раз вставим фон на сцену с помощью метода this.add.image, причём каждую последующую картинку надо смещать на ширину фона:
Если у Вас во время разработки открыта вкладка в браузере со страницей игры, то наш умный webpack всё быстро соберёт и перезагрузит страницу, как только Вы сохраните у себя index.js. Разумеется этот и последующий код следует добавлять к тому, что мы уже написали в предыдущих статьях.
Существуют и другие способы добавления фона в игру, как объект-картинка из Tiled карты, если у Вас например уровень создан как non-tiled map или как комбинация его со стандартным tiled map. Мы затронем вопрос, каким образом объекты из Tiled вставлять на Вашу сцену игры. Дальше мы двинемся и изучим подробно вопрос касательно спрайтов и их анимация.
Спрайты. Анимация спрайтов
Вы когда-нибудь задумывались, каким-образом главный герой или враги оживают на глазах во время игры. Вспомните, ведь мы не добавляли персонажей в виде картинок, когда создавали карту в Tiled, а тем более не делали их перемещение и анимацию. Мы просто сделали некоторые указатели, где они должны появится при запуске сцены игры.
Так вот разработчики игры добавляют на сцену так называемые спрайты - это картинки, которые в один или несколько рядов содержат в себе наш персонаж в разных позах или положениях, которые потом программным путём перемещают по экрану и создают анимации. Анимации нужны для того, чтобы спрайты перемещались по экрану ни как застывшие мумии (ведь одна картинка статическая), а создавали эффект динамики, т.е. если выражаться техническими словами, анимация это смена картинки спрайта в единицу времени (представьте некоторую рамку которая пробегается по спрайту как по киноленте и создаёт иллюзию движения). Причём части спрайта, если это например движение человечка, отличаются друг от друга не очень сильно. Например, левая рука идёт вперёд, правая назад, как при ходьбе человека в реальности, точно также ноги сменяются в противоход друг другу. Как Вы понимаете, чем больше картинок в анимации, тем более плавнее кажется движение. Это принцип мультипликации.
Теперь от теории, перейдём к практике. В Phaser 3 сначала необходимо загрузить спрайт. Если у нас в спрайте двигаемый персонаж имеет одинаковые широты и высоты, то нам не надо "париться" и можно загружать спрайт как spritesheet в preload:
Если же размеры персонажа спрайта отличаются друг от друга, то необходима ещё информация о размерах и позициях из так называемого атласа (atlas):
Атласы заранее готовятся, если у Вас нету под рукой готового спрайта. Профессиональные разработчики игр предпочитают использовать программку Texture Packer:
Но эта программа к сожалению частично платная, если пользоваться бесплатной демо версией, то она не даст вам сохранить спрайт из собранных отдельных картинок. Точнее сохранить то даст, но вместо персонажа Вы увидите магазинную корзину на красном фоне (такой сюрприз от создателей Texture Packer). Меня этот факт огорчил и я долгое время искал замену этой программе. И вскоре натолкнулся на вполне приличный, абсолютно бесплатный, инструмент, под названием Leshy SpriteSheet Tool:
Этот software хоть и примитивен, но вполне выполняет все свои основные функции. Интерфейс интуитивно понятный и надеюсь не требует подробного описания. Просто с помощью drag&drop перенесите отдельные картинки спрайта в серую зону и по окончанию сохраняете сам спрайт (PNG картинку) и снизу сохраняете атлас в JSON формате. Хочу подчеркнуть, что сохраняйте в формате JSON-TP-Array. TP - это аббревиатура от Texture Packer, т.е. это означает, что атлас сохранится ровно с такой же структурой, с какой сохраняет сам Texture Packer.
Каждый фрейм из спрайта имеет название файла, который Вы добавляли в спрайт. Если Вы наберёте код:
Вы увидите все имена фреймов, составляющих данный спрайт. Теперь осталось рассмотреть каким-образом создаётся анимация на основе готового спрайта и атласа. Создать именованную анимацию в Phaser 3 можно следующим образом:
- key - ключ (имя) анимации, по которой мы потом сможем запустить анимацию.
- frames - массив фреймов, каждый фрейм это объект со свойствами
- key - ключ спрайта, который мы указали в this.load.spritesheet или в this.load.atlas
- frame - номер фрейма из спрайта (нумерация слева вправо, сверху вниз). Либо это индекс из атласа.
- frameRate - количество фреймов в секунду, т.е. скорость смены картинок.
- repeat - сколько раз повторять анимацию. -1 означает анимировать до бесконечности
Не всегда удобно перечислять фреймы в массиве frames, поэтому в Phaser 3 предусмотрена автоматическая генерация имен фреймов для этого массива:
- start - номер фрейма, с которого необходимо начинать анимацию
- end - номер фрейма, которым оканчивать анимацию
- zeroPad - это свойство немного запутывает, это просто число цифр в именах
- prefix - префикс имен фреймов (по сути файлов с картинками)
- suffix - суффикс имен фреймов
Давайте же наконец создадим к нашей игре три анимации, это
- idle - когда главный герой стоит на месте
- walk - когда главный герой двигается, вправо или влево
- jump - когда главный герой прыгает
Надеюсь данный фрагмент кода не нуждается в пояснении, если Вы всё внимательно изучили выше. Теперь осталось вставить в нашу сцену данный спрайт (главного героя) и запустить анимацию. Создаётся спрайт и сразу отрисовывается на холсте с помощью метода this.add.sprite, а анимация запускается посредством метода спрайта play(key):
Ещё анимации имеют десяток полезных методов, которые Вы можете изучить и использовать как справочник на сайте API Documentation.
P.S. По сути по спрайтам и их анимации - это всё что Вам требуется знать на данный момент времени. В следующей статье познаем как перемещать наш спрайт, как задавать так называемую физику нашему игровому миру, а также всем спрайтам на сцене. А также затронем вопрос коллайдеров, чтобы главный персонаж не проваливался под землю и не мог проходить сквозь объекты.
