Gamedev + Phaser

Добрый день, уважаемые читатели.

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

Подготовка к работе

для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все необходимые файлы доступны по ссылке.

Реализация счётчика

Для этого мы будем использовать функционал работы с текстом встроенный в phaserjs. Для этого мы объявим две переменные, одна будет содержать текущий счёт, а вторая объект который позволяет работать с текстом:

Для переменной scoreText мы устанавливаем значение в функции create:

Где:

- 16x16 - это координаты на которых будет располагаться счётчик ( отсчёт идет от левого верхнего угла );

- 'score: 0 ' - начальное значение счётчика;

{ fontSize: '32px', fill: '000' } - объект который устанавливает размер и цвет счётчика, если не устанавливать эти параметры по умолчанию phaserjs будет использовать шрифт Courier;

Далее нам нужно изменить функцию collectStar, мы добавим в неё код который будет повышать значение счётчика каждый раз когда мы поднимаем звезду:

Таким образом каждая поднятая звезда будет прибавлять к нашему счётчику 10 очков:

Добрый день, уважаемые читатели.

Предыдущие уроки:

Надо что то с этим сделать но пикабу не позволяет копировать ссылки а каждый раз вставлять их в ручноую это жжжжж.

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

Давайте добавим несколько звезд на сцену и позволим игроку собирать их. Для этого мы создадим новую группу под названием «звезды» и заполним ее.

Подготовка к работе

для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все не обходимые файлы доступны по ссылке.

В нашей функции create мы добавляем следующий код:

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

Группы можно настраивать используя объекты конфигурации. В этом случае объект группы состоит из 3 частей:

1. Мы создаем группу объектов и помещаем ее в переменную stars;

2. Устанавливаем ключ текстуры в качестве изображения звезды. Это означает, что все дочерние элементы, добавленные в эту группу будут по умолчанию получать текстуру звезды;

3. Устанавливаем итератор равным 11. Поскольку он автоматически создает 1 дочерний элемент, повторение 11 раз означает, что в общей сложности мы получим 12 дочерних элементов, и это как раз то, что нам нужно для нашей игры.

Последняя часть - setXY - используется для определения позиции 12 дочерних элементов, которые создает группа. Каждый дочерний элемент будет размещен начиная с x: 12, y: 0 и с шагом x70. Это означает, что первый дочерний элемент будет расположен в 12 x 0, второй - в 70 пикселях от 82 x 0, третий - 152 x 0 и т. д. Значения 'step' - это действительно удобный способ разметки дочерних групп во время создания. Значение 70 выбрано, потому что это означает, что все 12 звезд будут идеально расположены на экране.

Следующий фрагмент кода выполняет обход всех элементов в группе и дает им случайное значение отказов Y в диапазоне от 0,4 до 0,8. Диапазон отскока находится между 0, отскока вообще нет, и 1, полный отскок. Поскольку все звезды появляются в точке y, гравитация будет тянуть их вниз, пока они не столкнутся с платформами или землей. Значение отскока означает, что они будут случайным образом возвращаться обратно до тех пор, пока, наконец, не успокоятся.

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

Помимо этого, мы также проверим, соприкасается ли игрок со звездой или нет:

Это говорит Phaserjs, что нужно проверить совпадение между игроком и любой звездой в группе звезд. Если они найдены, они передаются в функцию collectStar:

Проще говоря, у звезды отключено физическое тело, а ее родительский игровой объект сделан неактивным и невидимым, что убирает его с экрана.

Итог

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

Предыдущие посты

1. Введение

2. Выбор редактора

3. Hello world

4. Загрузка ресурсов

5. Создание мира

6. Как работают платформы

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

В прошлом уроке мы добавили обработку столкновений с объектами которая работает хорошо. Однако на данный момент у нас нет возможности управлять нашим персонажем. Возможно вы подумали что сейчас нам нужно обратится к документации и поискать в ней как можно прослушивать события в Phaserjs, однако в этом нет необходимости т.к в Phaserjs есть удобный менеджер клавиатуры.

Подготовка к работе

для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все не обходимые файлы доступны по ссылке.

Добавляем управление с клавиатуры

Как я уже сказал ранее в Phaserjs есть встроенный менеджер клавиатуры который можно подключить, одной строчкой:

Чаще всего для управления персонажем используются клавиши верх, низ, влево, вправо ( в консолях не на пк, на пк это WASD сочетание ) обработку нажатия этих клавиш мы добавим в метод loop:

Хотя мы добавили много кода, все должно быть довольно читабельным.

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

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

Реализация прыжка

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

Если оба эти условия соблюдены, мы применяем вертикальную скорость 330 пикс / сек. Игрок автоматически упадет на землю из-за гравитации.

Попробуйте поменять значение 330 и посмотреть что при этом получится.

Предыдущие посты ( по просьбе @Lionin ):

1. Введение

2. Выбор редактора

3. Hello world

4. Загрузка ресурсов

5. Создание мира

6. Как работают платформы

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

На момент написания статьи Phaser поставляется с Arcade Physics, Impact Physics и Matter.js Physics. Для этого урока мы будем использовать систему Arcade Physics для нашей игры, которая проста и легка, идеально подходит для браузерных игр.

Когд спрайт имеющий свойства физического объекта создан, ему присваивается свойство body, которое является ссылкой на его Аркадное Физическое Тело. Это представляет спрайт как физическое тело в движке Phasers Arcade Physics. У объекта body есть много свойств и методов, с которыми мы можем управлять.

Например, чтобы симулировать влияние гравитации на спрайт, достаточно написать:

Это произвольное значение, но логически, чем выше значение, тем тяжелее ощущается ваш объект и тем быстрее он падает. Если вы добавите это в свой код или запустите, вы увидите, что наш персонаж падает без остановки, полностью игнорируя созданную нами ранее площадку:

так происходит потому что мы не проверяем соприкасается наш персонаж с землей или нет.

Мы уже сказали Phaser, что наша земля и платформы будут статичными телами. Если бы мы этого не сделали и вместо этого создали динамические, тогда, когда игрок столкнулся с ними, он на мгновение остановился бы, и после этого все бы рухнуло. Это объясняется тем, что, если не указано иное, наземный спрайт является движущимся физическим объектом, и когда игрок ударяет сталкивается с ним, сила полученная в результате столкновения ( два тела обмениваются своими скоростями ) начинает действовать на землю или платформы, поэтому и земля также начинает падать.

Для того чтобы игрок мог безопасно прыгать по платформам, мы создадим объект Collider. Этот объект контролирует два физических объекта (которые могут включать в себя группы) и проверяет наличие коллизий или совпадений между ними. Если это произойдет, он может при необходимости вызвать ваш собственный обработчик, но для простой обработки столкновений с платформами нам это не требуется:

Объект Collider берет на себя всю обработку по столкновению переданных нами объектов:

Предыдущие посты ( по просьбе @Lionin ):

1. Введение

2. Выбор редактора

3. Hello world

4. Загрузка ресурсов

5. Создание мира

6. Как работают платформы

Всем привет!

В прошлом уроке мы добавили платформы на нашу сцену:

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

Подготовка к работе

для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все не обходимые файлы доступны по ссылке.

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

Для работы с персонажем нам понадобится переменная которая будет хранить объект с нашим персонажем, назовем ее player и добавим следующий код в функцию create:

Этим кодом мы добавляем в наш обработчик физики модель персонажа и анимацию которую мы сможем к нему применять.

Настройка параметров персонажа

Следующим кодом:

мы создаем новый спрайт под названием player, который доступен по координатам 100x450 на нашем холсте. Поскольку наш спрайт создан с помощью фабрики физических объектов ( this.physics.add ) он сразу обладает всеми свойствами динамического тела которые доступны в аркадной физике.

После того как мы создали спрайт, мы добавляем для него небольшой отскок 0.2. Таким образом когда персонаж подпрыгнет и приземлится обратно, он подпрыгнет несколько раз, как мячик. Затем мы добавляем механизм столкновения с границами игровой сцены ( что бы персонаж не мог выйти выйти за пределы нашей камеры ).

Границы, по умолчанию, находятся за пределами игровых размеров. Так как мы установили для игры 800 х 600, игрок не сможет бежать за пределы этой области. Это лишит игрока возможности убежать от краев экрана или прыгнуть через верх

Анимация персонажа

Если мы вернемся немного назад и посмотрим на функцию preload то увидим что файл dude был загружен как спрайт а не как картинка. Нам нужна возможность работать с этим изображением как с спрайтом потому что оно содержит анимацию по кадрам:

как видим изображение содержит 9 кадров, 4 кадра для анимации движения влево, 1 кадр смотрит в камеру и 4 кадра для движения вправо.

Примечание: phaser поддерживает перелистывание спрайтов для экономии кадров анимации, но в этом уроке будет old school.

Давайте добавим обработку движения персонажа влево и вправо, для анимации движения влево в функцию create добавим:

Анимация влево использует кадры 0-4 с частотой 10 кадров в секунду, параметр repeat: -1 говорит phaserjs о том что анимацию нужно зациклить ( т.е гонять эти кадры по кругу ).

Движение в право и поворот будет обрабатываться так же как и анимация движения влево.

Дополнительная информация: в Phaser 3 Animation Manager является глобальной системой. Созданные в нем анимации доступны для всех игровых объектов. Они делятся основными данными анимации, управляя своими собственными временными рамками. Это позволяет вам определить одну анимацию один раз и применить ее к тем игровым объектам, которые вам требуются. Это отличается от Phaser 2, где анимации принадлежат именно тем игровым объектам, для которых они были созданы.

Всем привет!

В ходе предыдущего урока мы добавили платформы на нашей игровой сцене:

Для этого мы добавили много кода в нашу функцию create:

давайте разберемся за что отвечает этот код:

Эта инструкция создает новую группу которая отвечает за управление статическими объектами и сохраняет ее в переменную platforms. В Аркадной физике существует два типа физических тел ( объектов ):

- динамическое - это тело, которое может двигаться с помощью таких сил, как скорость или ускорение. Он может подпрыгивать и сталкиваться с другими объектами, и это столкновение зависит от массы тела и других элементов;

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

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

Что такое группы? И зачем они нам нужны?

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

Группы способны создавать свои собственные игровые объекты с помощью таких полезных вспомогательных функций, как create. Физическая группа автоматически создаст детей с физическими возможностями.

После того как мы создали группу, ее можно использовать для создания платформ:

Как мы видели ранее, этот код создает следующую сцену:

Во время предварительной загрузки мы импортировали platform.png изображение. Это простой зеленый прямоугольник размером 400 x 32 пикселей, который будет использоваться для наших основных нужд.

В первой строке кода выше. мы добавляем нашу основную платформу ( "землю" ) размером 400 x 568 (помните, изображения располагаются в зависимости от их центра) - поскольку длинны исходного изображения недостаточно для того что бы разместить ее по всей ширине игровой сцены ( это нужно для того что бы игровой персонаж не выпал с экрана :) ), мы её масштабируем х2 с помощью функции setScale(2). Теперь он размером 800 x 64, что идеально подходит для наших нужд.

Вызов метода refreshBody() необходим для оповещения игрового мира о внесенных изменениях, это необходимо поскольку мы масштабировали статическое физическое тело.

После того как мы разместили на игровой сцене "основную" платформу, мы добавляем вспомогательные платформы на которые сможет запрыгивать наш игровой персонаж:

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

Заключение

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

Результаты предыдущего урока доступны здесь.

В прошлом уроке мы загружали изображения для нашей игры. Для загрузки изображений мы использовали метод this.image.add который под капотом создает объект для нашего изображения и добавляет его в список отображаемых объектов ( display list ) текущей сцены. В этом списке содержатся все игровые объекты. Вы можете позиционировать изображения как вам угодно Phaser будет не против.

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

Сама по себе сцена не имеет фиксированного размера и является бесконечной во всех направлениях. В Phaser есть сущность "Камера" которая отвечает за отображение определенной части сцены, мы можем управлять положением камеры и ее зумом. Мы можем создать новую камеру для отображением других объектов на сцене. Обо всем об этом мы поговорим в следующих уроках.

Подготовка к работе

Для начала нам нужно создать отдельную ветку для этой игры в нашем стартовом шаблоне ( если у вас его нет его можно скачать здесь ). Находясь в корне нашего проекта создадим новую ветку:

Добавление платформ

На данный момент наша сцена выглядит следующим образом:

давайте внесем в нее некоторое разнообразие, добавим землю и платформы. Для этого нам понадобится внести следующие изменения в функцию create:

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

для включения физики, внесите следующие изменения:

после всех изменений игровая сцена должна будет выглядеть так:

Итог

и так на нашем фоне появились платформы, но каким образом они работают? мы рассмотрим это в следующем уроке.