Введение в Phaser 3: Разработка игры Breakout

Автор оригинала: Marcus Sanatan.

Вступление

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

Спецификация HTML5 представила много API для включения разработки игры в Интернете, позволяя нашим играм достичь многих пользователей на разных вычислительных устройствах. Фазер Это популярная игровая структура, которая позволяет нам быстро построить игры для Интернета.

Лучший способ овладеть разработкой игры – делать игры. Мы будем использовать Phaser для создания Breakout Клон – версия классической и вечной игры ATARI, выпущенная в 1976 году.

Этот учебник содержит некоторые очень базовые HTML и CSS. Вам нужно будет комфортно с функциями и объектами JavaScript. Он также использует светлые функции ES2015.

Игровая петля

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

1. Процессы ввод
2. Обновляет игровой мир
3. Делает изменения

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

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

Что такое фазер?

Фазер это игра HTML5. Он использует много API HTML5, таких как Canvas, WebGL, Audio, GamePad и т. Д. И добавляет некоторую полезную логику, такую как управление игройной петлей и предоставление нам с физическими двигателями.

С Phaser мы можем построить 2D игры только с HTML, CSS и JavaScript.

Правила игры Breakout

Прежде чем использовать Phaser для создания нашего клона прорыва, давайте сначала определим объем игры:

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

Настройка фазера

Phaser – это библиотека JavaScript, для разработки и воспроизведения нашей игры нам понадобится базовый HTML для загрузки JS. Создайте каталог под названием Breakout в одном из ваших рабочих областей.

Создайте следующие файлы и папки в вашем каталоге:

• index.html файл
• А Breakout.js файл
• Папка под названием ресурсы
• В пределах вашего Активы Папка, создайте Изображения папка

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

Добавьте следующий код в свой index.html файл:

Этот базовый HTML-код делает следующее:

• Удаляет браузерные марки и прокладки из HTML и тебля тела
• Добавляет Игра div элемент, который будет содержать наш клон прорыва
• Загружает фазер V3.17 через их CDN
• Загружает нашу Breakout.js Файл, который в настоящее время ничего не делает, кроме как будет содержать нашу игровую логику

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

К счастью, нет необходимости настроить Apache или Nginx Чтобы получить бегущий веб-сервер. Если вы используете Visualstudio Код, как я, тогда вы можете установить Live Server расширение. У большинства идентификаторов и текстовых редакторов есть плагин с аналогичной функциональностью.

Если у вас установлен Python версии 3, вы можете перейти на рабочее пространство через терминал и введите python3 -m http.server Отказ Есть другие инструменты CLI, которые предоставляют простые веб-серверы, выберите тот, который дает вам самое быстрое время для разработки вашей игры.

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

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

Создание нашего игрового мира

С нашими HTML и CSS настроены, давайте редактируем наши Breakout.js Файл для настройки нашего игрового мира.

Запуск фазера

Во-первых, нам нужно настроить фазер и создать наш Игра пример. Игра Экземпляр является центральным контроллером для игры Phaser, оно делает все настройки, а удар запускает для нас игровой цикл.

Давайте настроим и создадим нашу Игра пример:

// This object contains all the Phaser configurations to load our game
const config = {
  type: Phaser.AUTO,
  parent: 'game',
  width: 800,
  heigth: 640,
  scale: {
    mode: Phaser.Scale.RESIZE,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  scene: {
    preload,
    create,
    update,
  },
  physics: {
    default: 'arcade',
    arcade: {
      gravity: false
    },
  }
};

// Create the game instance
const game = new Phaser.Game(config);

Тип Собственность говорит Phaser, что рендерер использовать. Фазер может сделать нашу игру, используя HTML5’s WebGL или Холст элемент. Установив тип на Phaser.auto Мы говорим Phasser, чтобы сначала попробовать рендеринг с WebGL, и если это не удается, рендеринг используя холст.

родитель Свойство указывает на идентификатор HTML-элемента нашей игры. Мы определяем наши размеры игры в пикселях с ширина и Высота Отказ масштаб Объект делает для нас две вещи:

• Режим Сообщает Phaser Как использовать пространство нашего родительского элемента в этом случае, мы гарантируем, что игра подходит для размера родителей девочка
• Автоцентр Рассказывает Phaser, как центрировать нашу игру в наших родителей Div Если мы хотим. В этом случае мы центрируем нашу игру вертикально и горизонтально в родительском Div. Это свойство более полезно, когда игра не забирает все пространство родителей Div Это показано здесь, так как это часто задаваемый вопрос.

В фазере наша игровая логика определена в Сцены Отказ Подумайте о сценах как разных государств в нашей игре: экран названия – одна сцена, каждый уровень игры будет их собственной сценой, вырезанная сцена была бы собственной сценой и т. Д. Phaser предоставляет A Сцена Объект, но он также может работать с регулярным объектом JavaScript, содержащий Preload () , Создать () и Обновление () Функции определены.

Последняя конфигурация говорит Phaser, который использовать физический двигатель. Фазер может использовать 3 различных физических двигателя: Аркада , Влияние и Дело Отказ Arcade – это самый простой, чтобы начать работу и достаточно для наших потребностей игры.

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

Чтобы наша игра настроить работу, нам нужно добавить Preload () , Создать () и Обновление () Функции. Добавьте следующие пустые функции, чтобы после создания нашего экземпляра игры:

function preload() { }

function create() { }

function update() { }

С помощью вашего веб-сервера работает, перейдите на страницу, где работает ваша игра. Вы должны увидеть бланк экрана:

Загрузка активов

Активы в этой игре состоят из 5 изображений. В других играх вы можете создавать, ваши активы могут быть огромными. Изображения высокой четкости, аудио и видеофайлы могут занимать мегабайты пространства. Чем больше актив, тем дольше требуется нагрузка. По этой причине Phaser имеет Preload () Функция, где мы можем загрузить все активы, прежде чем мы начнем запустить игру. Это никогда не будет хорошим пользователем-опытом, который будет играть в игру, и она внезапно замедляет, потому что она пытается загрузить новые активы.

Изменить Preload () Функция к следующему, чтобы мы могли загрузить наши изображения до того, как игривый цикл выключен:

function preload() {
  this.load.image('ball', 'assets/images/ball_32_32.png');
  this.load.image('paddle', 'assets/images/paddle_128_32.png');
  this.load.image('brick1', 'assets/images/brick1_64_32.png');
  this.load.image('brick2', 'assets/images/brick2_64_32.png');
  this.load.image('brick3', 'assets/images/brick3_64_32.png');
}

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

Примечание: – Когда мы используем это в нашем Preload () , Создать () и Обновление () Функции, мы имеем в виду сцену, проводимую экземпляр игры, который был создан ранее.

С нагруженными изображениями, мы хотим размещать спрайты на экране. На вершине Breakout.js Добавьте эти переменные, которые будут содержать наши данные спрайта:

let player, ball, violetBricks, yellowBricks, redBricks, cursors;

Как только они будут определены глобально, все наши функции могут их использовать.

Добавление спрайтов

Спрайт – это любое 2D-изображение, которое является частью игровой сцены. В фазере спрайт инкапсулирует изображение вместе с его положением, скоростью, физическими свойствами и другими свойствами. Давайте начнем с создания нашего игрока SPRITE через Создать () Функция:

player = this.physics.add.sprite(
  400, // x position
  600, // y position
  'paddle', // key of image for the sprite
);

Теперь вы должны быть в состоянии увидеть весло на экране:

Первый аргумент Сприт () Метод – Х Координировать, чтобы разместить спрайт. Второй аргумент – Y Координата, а последний аргумент – ключ к изображению актива добавлен в Preload () функция.

Важно понимать, как Phaser и большинство 2D игровых структур используют координаты. Графики, которые мы узнали в школе, обычно размещают происхождение I.e. Point (0, 0) в центре. В фазере происхождение находится в левом верхнем углу экрана. Как х Увеличивается, мы по сути переходим вправо. Как y Увеличивается, мы двигаемся вниз.

Наша игра имеет ширину 800 пикселей и высота 640 пикселей, поэтому наши координаты игры будут выглядеть так:

Давайте добавим мяч, чтобы сидеть над игроком. Добавьте следующий код в Создать () Функция:

ball = this.physics.add.sprite(
  400, // x position
  565, // y position
  'ball' // key of image for the sprite
);

Как мяч выше Наш игрок, ценность координаты Y ниже чем координата игрока Y.

Добавление групп спрайтов

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

Давайте добавим первый ряд фиолетовых кирпичей через Создать () Функция:

// Add violet bricks
violetBricks = this.physics.add.group({
  key: 'brick1',
  repeat: 9,
  setXY: {
    x: 80,
    y: 140,
    stepX: 70
  }
});

Вместо this.physics.add.sprite () Мы используем this.physics.add.group () и пройти объект JavaScript. Основное свойство ссылается на ключ изображения, что все спрайты в группе спрайты будут использовать. повторять Собственность говорит Pharer сколько раз, чтобы создать спрайт. Каждая спрайт-группа создает один спрайт. С повторять Установите на 9, Phaser создаст 10 спрайтов в этой группе спрайтов. setxy Объект имеет три интересных свойства:

• х это координата X первого спрайта
• y Является ли координата Y второго спрайта
• Степкс Это длина в пикселях между повторными спрайтами на оси X.

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

// Add yellow bricks
yellowBricks = this.physics.add.group({
  key: 'brick2',
  repeat: 9,
  setXY: {
    x: 80,
    y: 90,
    stepX: 70
  }
});

// Add red bricks
redBricks = this.physics.add.group({
  key: 'brick3',
  repeat: 9,
  setXY: {
    x: 80,
    y: 40,
    stepX: 70
  }
});

Наша игра уже собирается вместе, ваш экран должен выглядеть так:

Выиграть и потерять

Это хорошее развитие игры (и программирование), чтобы сохранить конец в поле зрения. В прорыве мы можем потерять игру, если наш мяч попадет в нижнюю часть экрана. В Phaser, для шара, чтобы быть ниже экрана, то координата Y мяча больше, чем высота игрового мира. Давайте создадим функцию, которая проверяет это, добавьте нижнюю часть Breakout.js Добавьте следующее:

function isGameOver(world) {
  return ball.body.y > world.bounds.height;
}

Наша функция берет мировой объект из свойства физики сцены, который будет доступен в Обновление () функция. Он проверяет, является ли Y-координата шарикового спрайта больше, чем высота границ игры игры.

Чтобы выиграть игру, нам нужно избавиться от всех кирпичей. Спрайты в фазере все имеют активное свойство. Мы можем использовать это свойство, чтобы определить, выиграют ли мы или нет. Группы спрайтов могут подсчитать количество активных спрайтов, содержащихся в них. Если в каждом из групп кирпича нет активных спрайтов I.e. Есть 0 активных кирпичных спрайтов, затем игрок выиграл игру.

Давайте обновим Breakout.js Файл, добавив проверку внизу:

function isWon() {
  return violetBricks.countActive() + yellowBricks.countActive() + redBricks.countActive() === 0;
}

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

Теперь, когда мы определили наши выигрышные и теряющие условия, мы хотим Phaser, чтобы проверить их в начале игрового петли. Как только игрок выигрывает или проигрывает, игра должна остановиться.

Давайте обновим Обновление () Функция:

function update() {
  // Check if the ball left the scene i.e. game over
  if (isGameOver(this.physics.world)) {
    // TODO: Show "Game over" message to the player
  } else if (isWon()) {
    // TODO: Show "You won!" message to the player
  } else {
    // TODO: Logic for regular game time
  }
}

Перемещение игрока с входом клавиатуры

Движение игрока зависит от ввода клавиатуры. Чтобы иметь возможность отслеживать ввод клавиатуры. Пришло время использовать Курсор Переменная.

И внизу наших Создать () Функция:

cursors = this.input.keyboard.createCursorKeys();

Клавиши курсора в Phaser Track Использование 6 клавиш клавиатуры: вверх, вправо, вниз, слева, сдвиг и пространство Отказ

Теперь нам нужно реагировать на состояние нашего Курсор Объект для обновления позиции нашего игрока. В еще Пункт нашего Обновление () Функция Добавьте следующее:

// Put this in so that the player stays still if no key is being pressed
player.body.setVelocityX(0);

if (cursors.left.isDown) {
  player.body.setVelocityX(-350);
} else if (cursors.right.isDown) {
  player.body.setVelocityX(350);
}

Теперь мы можем переместить наш игрок влево направо!

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

Жду начать

Прежде чем добавить логику, чтобы переместить мяч, это поможет, если игра ждала пользовательского ввода, прежде чем она переместится. Это не очень хороший опыт, чтобы загрузить игру и быть немедленно принудительным началом. Игрок не будет договориться о реагировании!

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

Во-первых, нам нужна наша собственная переменная для отслеживания того, была ли началась игра или нет. На вершине Breakout.js После объявления наших игрных переменных давайте добавим:

let gameStarted = false;

Теперь в еще Пункт нашей функции обновления:

if (!gameStarted) {
  ball.setX(player.x);

  if (cursors.space.isDown) {
    gameStarted = true;
    ball.setVelocityY(-200);
  }
}

Если игра не запустилась, установите X-координату нашего мяча в центр игрока. Координаты игрового объекта основаны на их центре, поэтому х и y Свойства спрайтов относятся к центру наших спрайтов.

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

Как и раньше с перемещением игрока, мы проверяем, была ли нажата космический бар. Если это было нажато, мы переключаем gamestartarted Флаг к правда Таким образом, мяч больше не будет следовать горизонтальному положению игрока и установить y-скорость мяча до -200. Отрицательные y-скоростей отправляют объекты вверх. Для положительных скоростей большие значения перемещают объекты вниз быстрее. Для отрицательных скоростей меньшие значения перемещают объекты вверх.

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

Вы бы наблюдали несколько вещей от того, как наша игра ведет себя до сих пор:

1. Мяч оказывается за кирпичами
2. Игрок может оставить границы экрана
3. Мяч может оставить границы экрана

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

Последние два вопроса могут быть решены, добавив несколько мировых столкновений.

Обращение с столкновениями

Мировое столкновение

Все наши взаимодействия спрайта определяются в создать функция. Включение столкновения с помощью мировой сцены очень прост с Phaser, добавьте следующее в конец создать Функция:

player.setCollideWorldBounds(true);
ball.setCollideWorldBounds(true);

Это должно дать нам вывод, как это:

Хотя движение игрока в порядке, мяч кажется застрял вверху. Чтобы исправить это, нам нужно установить отказов Собственность мяч спрайт. отказов Собственность скажет Phaser, сколько скорости поддерживать после столкновения с объектом.

Добавьте это в конец вашего Создать () Функция:

ball.setBounce(1, 1);

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

Если мы этого не сделаем, мы никогда не узнаем, когда это игра. Отключить столкновение с нижней частью игрового мира, добавив эту строку в конце создать Функция:

this.physics.world.checkCollision.down = false;

Теперь мы должны иметь такую игру:

Кирпичное столкновение

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

В нашем Создать () Функция Добавьте следующие строки кода к концу:

this.physics.add.collider(ball, violetBricks, hitBrick, null, this);
this.physics.add.collider(ball, yellowBricks, hitBrick, null, this);
this.physics.add.collider(ball, redBricks, hitBrick, null, this);

Метод Collayer рассказывает систему физики Phaser для выполнения Хитбрик () Функция, когда мяч Сталкиваются с различными группами кирпичной спрайты.

Каждый раз, когда мы нажимаем космический бар, мяч стреляет вверх. Там нет x-скорости, поэтому мяч будет прямо обратно в весло. Это будет скучная игра. Поэтому, когда мы впервые попали в кирпич, мы установим случайную скорость x.

Внизу Breakout.js Определить Хитбрик ниже:

function hitBrick(ball, brick) {
  brick.disableBody(true, true);

  if (ball.body.velocity.x === 0) {
    randNum = Math.random();
    if (randNum >= 0.5) {
      ball.body.setVelocityX(150);
    } else {
      ball.body.setVelocityX(-150);
    }
  }
}

Хитбрик () Функция принимает предыдущие два аргумента, которые использовались в Collider () Способ, например мяч и VioletoRicks Отказ Отключить (истинно, правда) Звонок на кирпиче рассказывает Phaser сделать его неактивным и скрыть его с экрана. Если X-скорость шара составляет 0, то мы даем мяч скорость в зависимости от значения случайного числа.

Если маленький шарик катится к вашей ноге в медленном темпе, на столкновении он пришел бы в остановку. Модели механизма Arcade PhysiciCS Ударное столкновение имеет скорость по умолчанию. Для нашей игры мы не хотим, чтобы мяч терял скорость, когда он попадает в кирпич. Нам нужно установить Недвижимость Свойство на наших групп спрайтов до правда Отказ

Обновите определения VioletoRicks , Yellowbricks и Redbricks к следующему:

// Add violet bricks
violetBricks = this.physics.add.group({
  key: 'brick1',
  repeat: 9,
  immovable: true,
  setXY: {
    x: 80,
    y: 140,
    stepX: 70
  }
});

// Add yellow bricks
yellowBricks = this.physics.add.group({
  key: 'brick2',
  repeat: 9,
  immovable: true,
  setXY: {
    x: 80,
    y: 90,
    stepX: 70
  }
});

// Add red bricks
redBricks = this.physics.add.group({
  key: 'brick3',
  repeat: 9,
  immovable: true,
  setXY: {
    x: 80,
    y: 40,
    stepX: 70
  }
});

Наше кирпичное столкновение теперь завершено, и наша игра должна работать так:

Совет разработки – При разработке физики вашей игры вы можете включить режим отладки, чтобы увидеть граничные коробки спрайтов и как они сталкиваются друг с другом. В вашей игре config . объект, в пределах аркада Недвижимость, где мы определили Гравитация , вы можете включить отладку, добавив это к объекту:

debug: true

Столкновение игрока

Управляющие столкновения между мячом и игроком являются аналогичным усилением. Во-первых, давайте убедимся, что игрок Недвижимость Отказ В конце Создать () Функция Добавьте следующее:

player.setImmovable(true);

И тогда мы добавляем коллайдер между мячом и игроком:

this.physics.add.collider(ball, player, hitPlayer, null, this);

Когда мяч попадает в плеере, мы хотим, чтобы две вещи произошли:

• Мяч должен двигаться немного быстрее, постепенно увеличивать сложность игры
• Горизонтальное направление мяча зависит от того, какая сторона игрока он ударил – если мяч попадает в левую сторону игрока, то он должен идти налево, если он попадает в правую сторону игрока, то он должен идти вправо.

Чтобы приспособиться к этим, давайте обновим Breakout.js с HiTPlayer () Функция:

function hitPlayer(ball, player) {
  // Increase the velocity of the ball after it bounces
  ball.setVelocityY(ball.body.velocity.y - 5);

  let newXVelocity = Math.abs(ball.body.velocity.x) + 5;
  // If the ball is to the left of the player, ensure the X-velocity is negative
  if (ball.x < player.x) {
    ball.setVelocityX(-newXVelocity);
  } else {
    ball.setVelocityX(newXVelocity);
  }
}

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

Теперь наша игра имеет как игрок, так и кирпичное столкновение:

Добавление текста

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

Добавим 3 новые глобальные переменные, которые будут хранить наши текстовые данные после gamestartarted Декларация на вершине Breakout.js :

let openingText, gameOverText, playerWonText;

Открытие текста

Давайте добавим текст, когда игра загружена, чтобы сообщить игроку, чтобы нажать пробел. В Создать () Функция Добавить следующий код:

openingText = this.add.text(
  this.physics.world.bounds.width / 2,
  this.physics.world.bounds.height / 2,
  'Press SPACE to Start',
  {
    fontFamily: 'Monaco, Courier, monospace',
    fontSize: '50px',
    fill: '#fff'
  }
);

openingText.setOrigin(0.5);

Первые два аргумента текст Метод – это координаты X и Y-координат текстового поля. Мы используем ширину и высоту сцены игры, чтобы определить, где она находится – в центре. Третий аргумент – это текст для отображения. Четвертый аргумент – это объект JS, который содержит данные, связанные с шрифтом.

В отличие от спрайтов, текстовые объекты X и Y-координат относятся к их верхнему левому самому точку объекта, а не их центра. Вот почему мы используем Setorigin () Способ сделать систему координат работать как спрайты, в этом случае, в этом случае она упрощает позицию в центре.

Когда мы играем, мы больше не хотим видеть открытие текста. В Обновление () Функция, изменить Если Заявление, которое проверяет, был ли космический бар нажал к следующему:

if (cursors.space.isDown) {
  gameStarted = true;
  ball.setVelocityY(-200);
  openingText.setVisible(false);
}

Текстовые объекты не спрайты, мы не можем отключить их тела. Мы можем сделать их невидимыми, когда нам не нужно их видеть. Наша игра сейчас начинается так:

Игра окончена и игра выиграна

Как до того, как нам нужно добавить текстовые объекты в Создать () Функция и сделать их невидимыми, поэтому их не будет видно, когда игра начата:

// Create game over text
gameOverText = this.add.text(
  this.physics.world.bounds.width / 2,
  this.physics.world.bounds.height / 2,
  'Game Over',
  {
    fontFamily: 'Monaco, Courier, monospace',
    fontSize: '50px',
    fill: '#fff'
  }
);

gameOverText.setOrigin(0.5);

// Make it invisible until the player loses
gameOverText.setVisible(false);

// Create the game won text
playerWonText = this.add.text(
  this.physics.world.bounds.width / 2,
  this.physics.world.bounds.height / 2,
  'You won!',
  {
    fontFamily: 'Monaco, Courier, monospace',
    fontSize: '50px',
    fill: '#fff'
  }
);

playerWonText.setOrigin(0.5);

// Make it invisible until the player wins
playerWonText.setVisible(false);

Теперь они определены, мы должны изменить их видимость в Обновление () Функция:

// Check if the ball left the scene i.e. game over
if (isGameOver(this.physics.world)) {
  gameOverText.setVisible(true);
  ball.disableBody(true, true);
} else if (isWon()) {
  playerWonText.setVisible(true);
  ball.disableBody(true, true);
} else {
  ...
}

Мы отключаем тело шара, чтобы он перестал быть обновленным и отображаться, так как он больше не нужен.

Если мы потеряем игру, мы увидим это:

Если мы выиграем игру, мы увидим это:

Наш Clone Breakout завершен!

Заключение

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

Лучший способ улучшить свои навыки развития игры – сохранить строительные игры. Если вы хотите узнать больше о разработке игр с Phaser, а затем посмотрите на вступительный ввод официального сайта Учебное пособие Отказ

Вы можете просмотреть аннотированный исходный код для игры здесь Отказ