Назария

Клавиатура и движение

Клавиатура в Phaser

В курсе Canvas мы сами вели множество зажатых клавиш. В Phaser это уже сделано: движок слушает клавиатуру и для каждой клавиши хранит объект с её состоянием. Остаётся спросить в update, зажата ли она.

Стрелки: createCursorKeys

create() {
  this.player = this.add.rectangle(200, 150, 30, 30, 0x4caf50);
  this.cursors = this.input.keyboard.createCursorKeys();
}

update(time, delta) {
  if (this.cursors.left.isDown) this.player.x -= 4;
  if (this.cursors.right.isDown) this.player.x += 4;
}

createCursorKeys() возвращает объект с клавишами up, down, left, right, space и shift. У каждой есть isDown (зажата сейчас) и isUp.

Любые клавиши: addKeys

this.keys = this.input.keyboard.addKeys("W,A,S,D,SPACE,SHIFT");

if (this.keys.W.isDown) { ... }
if (this.keys.SPACE.isDown) { ... }

Имена — как в Phaser.Input.Keyboard.KeyCodes: буквы A…Z, SPACE, ENTER, SHIFT, ESC, цифры ONE, TWO…

Нажатие один раз

isDown истинно все кадры, пока клавиша зажата. Для действий «по нажатию» (выстрел, пауза, прыжок без автоповтора) есть JustDown:

if (Phaser.Input.Keyboard.JustDown(this.keys.SPACE)) {
  this.shoot();          // ровно один раз на каждое нажатие
}

Или событие:

this.input.keyboard.on("keydown-P", () => this.togglePause());

Скорость и delta

update вызывается примерно 60 раз в секунду, но на разных компьютерах по-разному. Поэтому, как и в Canvas, двигаем с учётом времени кадра. delta в Phaser — в миллисекундах:

const speed = 200;                         // пикселей в секунду
const step = speed * (delta / 1000);       // пикселей за этот кадр
if (this.cursors.right.isDown) this.player.x += step;

В следующей теме физика будет делать это за нас: мы зададим скорость, а движок сам сдвинет объект.

Направление и границы

Всё как в курсе Canvas: сначала направление −1/0/1 по каждой оси, потом сдвиг, потом зажим в пределах поля. В Phaser есть готовый Phaser.Math.Clamp(значение, мин, макс):

let dx = 0;
if (this.cursors.left.isDown) dx -= 1;
if (this.cursors.right.isDown) dx += 1;
this.player.x = Phaser.Math.Clamp(this.player.x + dx * step, 15, 385);

Помни: у фигур x — центр. Для квадрата 30×30 на поле шириной 400 центр может быть от 15 до 385.

Диагональ

Если зажать вправо и вниз, объект сдвинется на step по x и на step по y — то есть на step × √2 ≈ 1.41 step по диагонали. По диагонали игрок бегает быстрее! Исправляют, уменьшая обе составляющие в √2 раз:

if (dx !== 0 && dy !== 0) {
  dx *= Math.SQRT1_2;   // 1 / √2 ≈ 0.7071
  dy *= Math.SQRT1_2;
}

Теперь длина шага по диагонали тоже равна step. В Phaser для этого есть и векторы: new Phaser.Math.Vector2(dx, dy).normalize().

Мышь и касания

this.input.on("pointerdown", (pointer) => {
  this.player.x = pointer.x;
  this.player.y = pointer.y;
});

pointer объединяет мышь и палец на телефоне — одна обработка для всех устройств.

Итог

createCursorKeys() — стрелки, пробел, shift; addKeys("W,A,S,D") — любые клавиши.
key.isDown — зажата сейчас; Phaser.Input.Keyboard.JustDown(key) — только что нажали.
Сдвиг за кадр — скорость × delta / 1000; границы — Phaser.Math.Clamp.
По диагонали умножаем dx и dy на Math.SQRT1_2, чтобы не бегать быстрее.