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

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

Что такое тайловая карта

Тайловая карта - это метод создания игровых миров с использованием модульных строительных блоков. Используя Tiled, вы можете «раскрасить» весь игровой мир, используя листы тайлов, разбитые на заданный размер пикселей. Чтобы создать свой мир, я использовал лист ниже:

Этот лист разбит на плитки размером 16x16 пикселей, что означает, что нам нужен только один лист для создания ВСЕГО игрового слова.

Создание карты с использованием мозаики

Чтобы создать новую карту, запустите новый проект в Tiled и используйте следующие настройки:

В приведенном выше примере весь наш игровой мир будет иметь 3200 пикселей в ширину и 512 пикселей в длину. Я указал размер плитки 16x16 пикселей из нашего набора плиток. Затем вам нужно будет добавить в нашу таблицу плиток, нажав «New Tileset». Обязательно установите флажок «Вставить на карту»:

Как только наша карта листов создана и лист импортирован, мы можем «раскрасить карту».

Обратите внимание, что в моем примере небо создается в «BackgroundLayer», холмы и кусты создаются в «BackgroundDecorations Layer», а земля, платформы и трубы создаются в слое «GroundLayer». Все эти слои разделены, чтобы учесть особые условия столкновения в самой игре. Обратите внимание, что CoinLayer создается сверху как объектный слой.

После создания карты мы импортируем ее в нашу игру как объект json.

У вас есть полностью созданный игровой мир. Что теперь? Написание самого кода и, конечно же, добавление карты в игру!

Базовый шаблон Phaser 3

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

Шаг первый

Создайте игру и предварительно загрузите ресурсы. Обратите внимание, что наш актив «монета» ДОЛЖЕН быть загружен в игру как отдельный актив, даже если мы уже включили его в создание карты Tiled json.

Шаг второй

Используйте функцию create, чтобы отобразить нашу карту в игровом мире.

Шаг третий

Хотя наша карта тайлов включала местоположения монет, мы еще не отрисовали наши монеты. Мы пройдемся по объектам CoinLayer для рендеринга монет в нашей игре, добавив приведенный ниже код в функцию create.

Как только монеты созданы, обязательно добавьте столкновение с нашим «игроком». При наложении игрока на монету (столкновение) мы вызываем нашу функцию «collectCoin». Мы создадим его на следующем шаге.

Здесь мы также инициализируем текст нашего счетчика монет.

Шаг четвертый

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

Теперь ваш игрок должен иметь возможность собирать монеты, и счет должен увеличиваться автоматически!

Спасибо за прочтение!