Узнайте, как создавать игры с JS и Phaser 3 за короткое время.

Ресурсы:

  1. Полный курс: https://academy.eincode.com/courses/phaser-3-the-complete-guide-build-publish-games-in-js
  2. Видео-гид: https://youtu.be/VOtZ6yNqH84
  3. Репозиторий Github: https://github.com/Jerga99/dino-chrome-clone

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

Подготовить проект

Загрузите zip-файл с:

Https://github.com/Jerga99/dino-chrome-clone/archive/2e62c20a06b126b1a6128c56a60d5603b49daccd.zip

После распаковки папки установите все зависимости:

npm install

и запускаем сервер разработки:

npm run dev

это запустит сервер разработки на localhost: 8080

Откройте браузер на localhost: 8080, и вы увидите пустой экран.

Создать игровые объекты

Теперь давайте создадим наши первые игровые объекты, которые включают нашего главного героя «Дино» и землю, по которой Дино может «бегать».

В PlaceScene.js вы можете создавать следующие игровые объекты с помощью функции create:

create() {
  const { height, width } = this.game.config;
  this.gameSpeed = 10;
  this.ground = this.add.tileSprite(0, height, width, 26,    'ground').setOrigin(0, 1)
  this.dino = this.physics.add.sprite(0, height, 'dino-  idle').setOrigin(0, 1);
}

Высота равна 340 пикселей, а ширина - 1000 пикселей, как определено в index.js.

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

Начнем с Дино

При создании игрового объекта Sprite вам необходимо указать координаты x и y.

Первая координата

x - ›0, второй

y - ›340, а также

ключ - ›dino-idle (идентификатор изображения, загруженного в PreloadScene)

setOrigin определяет, какая точка игрового объекта вставляется в указанные координаты.

вы можете видеть, что исходная точка 0,1 - это левый нижний угол, этот угол вставляется в координаты 0,340, как указано ранее.

Добавить землю

Земля, которую мы вставим как TileSprite. TileSprite - это спрайт с повторяющейся текстурой.

При создании tileSprite нам необходимо предоставить пять значений, в том числе:

x -> 0

y -> 340

ширина - ›1000 пикселей

высота - ›26 пикселей

ключ - ›земля (идентификатор изображения, загруженного в PreloadScene)

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

Эффект движущегося грунта

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

В этой функции:

update() {}

Функция обновления вызывается платформой Phaser 60 раз в секунду. Это означает, что ваша игра работает со скоростью 60 FPS (кадров в секунду). Если вам нужно определить динамическое поведение, тогда обновление - правильное место.

Добавьте это, чтобы переместить землю:

create() {
  this.gameSpeed = 10;
  // rest of the code
}
update() {
  this.ground.tilePositionX += this.gameSpeed;
}

Если gameSpeed ​​равна 10, земля будет перемещаться на 10 пикселей при каждом обновлении.

Что на самом деле выглядит так:

Пусть Дино прыгнет

Во-первых, нам нужно обработать ввод пользователя.

create() {
  // rest of the code
  this.dino = this.physics.add.sprite(0, height, 'dino-idle')
   .setCollideWorldBounds(true)
   .setGravityY(5000)
   .setOrigin(0, 1);
  this.createControll();
}
createControll() {
  this.input.keyboard.on('keydown_SPACE', () => {
    if (!this.dino.body.onFloor()) { return; }
  this.dino.setTexture('dino', 0);
  this.dino.setVelocityY(-1600);
  })
}

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

setColliderWorldBounds устанавливает, сталкивается ли это тело с границей мира. Без него игровой объект выпадал бы за пределы холста.

Теперь к контролю. Каждый раз, когда пользователь нажимает клавишу пробела, Дино будет двигаться вверх со скоростью 1600 пикселей в секунду (setVelocityY). Это преодолеет гравитацию на долю секунды и создаст эффект прыжка.

setTexture изменит изображение динозавра, когда динозавр будет прыгать.

Теперь обратите внимание на выражение «если». Чтобы не подпрыгнуть в воздухе, мы проверяем, стоит ли динозавр на полу. Это вернет истинное значение, если динозавр сталкивается с мировыми границами.

Вот как это выглядит:

Создать анимацию

Во-первых, нам нужно базовое изображение, которое мы разделим на несколько кадров:

Используемое нами изображение находится в папке assets. Мы загружаем это изображение в PreloadScene.js с помощью this.load.spritesheet.

create() {
  //rest of the code
  this.initAnims();
}
initAnims() {
  this.anims.create({
    key: 'dino-run',
    frames: this.anims.generateFrameNumbers('dino', 
      {start: 2, end: 3}),
    frameRate: 10,
    repeat: -1
  })
 }

Во-первых, нам нужно инициализировать анимацию. Поясним параметры:

  • Ключ: это идентификатор анимации изображения.
  • Кадры. Это кадры, из которых будет состоять анимация. В этом случае кадры 2, 3 (с изображения выше) из изображения assets / dino-run.png
  • FrameRate: 10, кадры (2,3) будут воспроизводиться со скоростью 10 кадров в секунду.
  • repeat: -1, анимация будет повторяться бесконечно.

Мы воспроизведем следующую анимацию в функции обновления:

update() {
 // rest of the code
if (this.dino.body.deltaAbsY() > 0) {
    this.dino.anims.stop();
    this.dino.setTexture('dino', 0);
  } else {
    this.dino.play('dino-run', true);
  }
}

Мы проверим, в каком движении сейчас находится Дино. Помните, у нас есть два состояния; один, в котором дино стоит на месте, и второй, в котором дино прыгает

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

Если это не так, мы хотим воспроизвести бегущую анимацию:

Заключение

Создание полноценной игры требует немного больше усилий, которые сложно поместить в один пост в блоге. Чтобы закончить эту игру, посмотрите мой код вместе с видео на YouTube здесь: https://youtu.be/VOtZ6yNqH84 или просмотрите полный курс по созданию игр: https://academy.eincode.com/courses/phaser- 3-полное-руководство-сборка-публикация-игры-на-js

Удачи, Филип.