Что нам понадобится?

Для начала нам нужно установить какой-либо текстовый редактор в котором мы будем писать наш код. Если не знаете какой выбрать можете посмотреть мой собственный топ.

Я же сегодня буду использовать NotePad++ поскольку данный редактор удобный и не нагружает систему. Далее нам понадобиться движок для создания платформера. Сегодня будем использовать Phaser 3. Скачиваем min.js поскольку он лучше оптимизирован и занимает меньше места.

Начало

Итак, теперь создадим папку нашего проекта и создадим файл index.html там и будет размещена наша игра. После чего в нашу папку перемещаем скачанный файл phaser.min.js.

Теперь открываем файл index.html в нашем текстовом редакторе -> создаем стандартную разметку HTML -> присоединяем файл phaser.min.js. Потом создаем блок с id 'game'. Также в конце не забудем подключить скрипт game.js с типом module, который мы и создаем в папке с проектом. В нем мы будем писать весь код нашей игры.

Открываем файл game.js и пишем в нем config нашей игры.

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

Теперь создадим нашу первую сцену. Для этого чуть выше нашего конфига создадим класс, который назовем mainScene и он наследуется от класса Phaser.Scene.В конструкторе класса пишем функцию super и записываем в ней название нашего класса. Далее создаем 3 функции preload, create, update. Не забудем также добавить нашу сцену в список scene в конфиге.

Теперь разберём что делает каждая функция в нашей сцене. В конструкторе (constructor) мы будем создавать все нужные для нашего проекта переменные. В функции preload мы будем загружать графику и подобное. В функции create мы будем создавать объекты на нашей сцене. Функция update выполняется 30 раз в секунду.

Создание графики

Теперь сделаем из нашей черной сцены красоту. Для этого в нашем проекте создаем папку assets и в нее загружаем всю графику.

Чтобы наша графика отобразилась на сцене, нам нужно сначала загрузить ее на нашу сцену в функции preload используя load.image. Первым аргументом указываем название текстуры, а вторым путь к ней.

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

Далее создадим землю. Так как на нее в будущем будет падать игрок, это значит что мы будем с ней взаимодействовать. Поэтому мы должны добавить статическую группу, на которую не будет применяться физика, но которая будет сталкиваться с другими объектами. Итак, в функции constructor создаем переменную this.ground и в функции create добавляем в нее статическую группу. А далее уже создаем саму землю. Аргументы точно такие же как и у фона.

Точно также добавим и платформы.

Если вы все сделали правильно то на сцене вы увидите всю свою графику. Вы также могли заметить синюю обводку вокруг элементов. Если вы помните в конфиге нашей игры мы указывали debug = true, если его отключить данные синие обводки исчезнут. Не забудьте отключить debug режим когда доделаете игру

Создание игрока

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

Теперь загрузим нашего игрока за сцену. Для этого в методе preload загрузим наш атлас, но теперь будем использовать load.spritesheet. Первые два аргумента вам уже знакомы, а в последнем мы уже загружаем именно самого персонажа из атласа. Это понадобится вам в будущем, когда вы будете делать анимации. Далее в методе create загружаем игрока используя уже не статическую группу, а спрайт, чтобы к игроку применялась физика(перед этим также создаем переменную в конструкторе). Потом пишу функцию setCollideWorldBounds чтобы наш игрок не мог выйти за сцену.

Далее в конце метода create напишем несколько строчек для распознавания столкновений игрока с другими объектами, чтобы наш игрок не проваливался сквозь все объекты. Для этого используем метод collider где указываем какие объекты должны между собой сталкиваться.

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

Управление

Сделать чтобы мы могли двигать игроком невероятно просто, для этого в конструкторе создаем переменную this.cursor и в методе create создаем управление.

Теперь в функции update будем проверять какая кнопка нажата(в нашем случае это будут стрелочки) и в зависимости от этого будем менять координату игрока используя функцию velocityX. Если же кнопка не нажата будем делать velocity нашего игрока 0 чтобы он не двигался бесконечно. Для прыжка будем просто менять velocityY (не забудем дописать проверку, чтобы мы могли прыгать только тогда, когда мы стоим).

Конец

Что же, поздравляю вас! Вы смогли сделать небольшой платформер используя язык программирования JavaScript! Спасибо за просмотр этой статьи!