Phaser.js: всё об играх и разработке

Инструкция: создание вашей первой игры Phaser

Эта статья была написана Элвином Уррадом и Ричардом Дэви

Свежо обновлена для Phaser 2.0!

Введение

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

Что такое Phaser?

Phaser — это HTML5 игровой фреймворк, который помогает разработчикам быстро создавать кросс-браузерные игры. Он отлично подходит для мобильных браузеров и поддерживает Canvas/WebGL.

Требования

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

Базовая структура игры

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {}
function create() {}
function update() {}

Загрузка ассетов

function preload() {
  game.load.image('sky', 'assets/sky.png');
  game.load.image('ground', 'assets/platform.png');
  game.load.image('star', 'assets/star.png');
  game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}

Создание сцены

var platforms;

function create() {
  game.physics.startSystem(Phaser.Physics.ARCADE);
  game.add.sprite(0, 0, 'sky');

  platforms = game.add.group();
  platforms.enableBody = true;

  var ground = platforms.create(0, game.world.height - 64, 'ground');
  ground.scale.setTo(2, 2);
  ground.body.immovable = true;

  var ledge = platforms.create(400, 400, 'ground');
  ledge.body.immovable = true;

  ledge = platforms.create(-150, 250, 'ground');
  ledge.body.immovable = true;
}

Добавление игрока

player = game.add.sprite(32, game.world.height - 150, 'dude');
game.physics.arcade.enable(player);

player.body.bounce.y = 0.2;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;

player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);

Столкновения и управление

function update() {
  game.physics.arcade.collide(player, platforms);

  player.body.velocity.x = 0;

  if (cursors.left.isDown) {
    player.body.velocity.x = -150;
    player.animations.play('left');
  } else if (cursors.right.isDown) {
    player.body.velocity.x = 150;
    player.animations.play('right');
  } else {
    player.animations.stop();
    player.frame = 4;
  }

  if (cursors.up.isDown && player.body.touching.down) {
    player.body.velocity.y = -350;
  }
}

Звезды и очки

stars = game.add.group();
stars.enableBody = true;

for (var i = 0; i < 12; i++) {
  var star = stars.create(i * 70, 0, 'star');
  star.body.gravity.y = 6;
  star.body.bounce.y = 0.7 + Math.random() * 0.2;
}

game.physics.arcade.collide(stars, platforms);
game.physics.arcade.overlap(player, stars, collectStar, null, this);

var score = 0;
var scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

function collectStar(player, star) {
  star.kill();
  score += 10;
  scoreText.text = 'Score: ' + score;
}

Заключение

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