Платформа и управление

Это из 16 уроков руководства разработки игры с помощью Phaser. Исходный код этого урока вы можете найти здесь: Gamedev-Phaser-Content-Kit/demos/lesson07.html.

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

Рисуем платформу

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

Создаем платформу

Сначала, добавим переменную paddle, сразу после переменной ball:

var paddle;

После этого, в функции preload, загрузим изображение paddle при помощи ещё одного вызова функции load.image():

function preload() {
    // ...
    game.load.image('ball', 'img/ball.png');
    game.load.image('paddle', 'img/paddle.png');
}

Добавляем графику для платформы

Чуть не забыли, на этом этапе нам надо скачать изображение платформы с Github в папку /img.

Рисуем платформу с физикой

Далее, мы инициализируем спрайт нашей платформы при помощи функции add.sprite() — добавьте следующую строку кода в самый конец функции create():

paddle = game.add.sprite(game.world.width*0.5, game.world.height-5, 'paddle');

Мы можем использовать world.width и world.height для позиционирования платформы в том месте, где мы хотим: game.world.width*0.5 расположит платформу прямо по середине экрана. В данном случае, нам повезло, что наш игровой мир совпадает с <canvas>, однако, в других играх мир может быть гараздо больше экрана. 

Как вы могли заметить, перезагрузив, на данном этапе, страницу index.html, платформа находится не совсем по середине экрана. Почему? Всё дело в том, что, по умолчанию, точка, из которой начинается позиционирование объекта (якорь), находится в левом верхнем углу. Но мы можем это изменить и переместить якорь в середину платформы по ширине и в самый низ повысоте, чтобы проще было позиционировать платформу, относительно нижней грани экрана. Добавьте следующую строку кода:

paddle.anchor.set(0.5,1);

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

game.physics.enable(paddle, Phaser.Physics.ARCADE);

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

function update() {
    game.physics.arcade.collide(ball, paddle);
}

В качестве аргументов, мы передаём два объекта, между которыми проверяются коллизии — в нашем случае, мячик и платформа. Вроде, сработало, но не совсем так, как мы ожидали — когда мячик сталкивается с платформой, последняя падает за пределы экрана! А мы, всего лишь, хотим, чтобы мячик отскакивал от платформы, а платформа, при этом, оставалась на месте. Мы можем использовать свойство immovable, для того, чтобы платформа не двигалась, когда мячик бьётся об неё. Для этого добавьте следующую строку кода в конец функции create():

paddle.body.immovable = true;

Вот! Теперь всё работает, как надо.

Управляем платформой

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

function update() {
    game.physics.arcade.collide(ball, paddle);
    paddle.x = game.input.x;
}

Теперь, каждый кадр координата x платформы будет соответствовать координате x курсора. Однако, при старте игры, положение нашей платформы не по центру экрана, из-за того, что положение курсора не определено. Чтобы это исправить, давайте добавим платформе координату x по умолчанию, на случаей, если положение курсора не определено. Обновите предыдущую строку кода:

paddle.x = game.input.x || game.world.width*0.5;

Если вы этого ещё не сделали, то обновите страницу index.html и попробуйте то, что у нас получилось!

Расположение мячика

Теперь давайте разместим мячик на платформе. Так же, как и платформу, расположим мячик по середине экрана по горизонтали, с небольшим отступом от нижней грани экрана по вертикали. Для этого переместим якорь мячика в его середину. Найдите строку ball = game.add.sprite( ... ) и заметите её на следующие две:

ball = game.add.sprite(game.world.width*0.5, game.world.height-25, 'ball');
ball.anchor.set(0.5);

Скорость оставим такую же, но изменим направление по оси y, изменив второй параметр со 150 на -150, и теперь мяч будет двигаться вверх. Найдите строку ball.body.velocity.set( ... ) и измените её, как показано ниже:

ball.body.velocity.set(150, -150);

Теперь мячик появляется по середине платформы и двигается вверх.

Сравните свой код

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

Следующий шаг

Мы можем управлять платформой и сделали так, чтобы мячик отскакивал от неё. Но какой от этого толк, если мячик отскакивает и от нижней грани экрана? В следующей главе мы добавим логику проигрыша и экран "Game over".