Phaser 101

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

1. Загрузка CDN

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>

2. Добавление холста, физики и сцены

var config = {
    type: Phaser.AUTO,
    width: 1000,
    height: 830,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 1500 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

3. Использование Phaser.Canvas против Phaser.WebGl против Phaser.AUTO

Холст. Может отображать только двухмерные изображения.

WebGl: обрабатывает как двухмерные, так и трехмерные изображения. Намного быстрее, но некоторые браузеры его не поддерживают.

Phaser.Auto: Phaser проверит, поддерживает ли браузер WebGl, в противном случае переключится на Phaser.Canvas.

4. Использование Phaser's Physic of arcade v.s. ниндзя против P2.JS

Аркада: обнаруживает столкновения только прямоугольной формы (без вращения). Легче вычислить.

Ниндзя: обнаруживает сложные формы, уклоны и повороты.

P2.JS: Обнаружение столкновений всего тела. Например, качели и 3D-полигоны. Требуется гораздо больше вычислительной мощности.

5. Сцены == мир

Предварительная загрузка: загружает все медиафайлы.

Создать: создает ваши переменные и, как правило, куда вы добавляете свои свойства, прослушиватели клавиатуры и обнаружение столкновений.

Обновление: прислушивается к вашим обнаружениям столкновений и столкновений.

function preload () {
//loads the player
this.load.spritesheet('player', 'assets/player.png', { frameWidth: 42, frameHeight: 45 });
//loads the audio
this.load.audio("theme", "sounds/theme.mp3")
//loads the background
this.load.image('background', 'assets/sceneImages2/background.png');
//loads the platform
this.load.image('ground', 'assets/sceneImages2/platform.png');
}
function create () {
//play the audio
this.sound.play('theme')
//create background
this.add.image(400, 400, 'background').setScale(2)
// create platform
platforms.create(100, 788,'groundPlatform').setScale(1.8)
//create player
player = this.physics.add.sprite(100, 450, 'player');
//add collision detection
this.physics.add.collider(player, platforms);
//creating key inputs
cursors = this.input.keyboard.createCursorKeys();
//creating animation
this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('player', {frames: [0, 1, 2, 4]}),
        frameRate: 10,
    });
    this.anims.create({
        key: 'turn',
        frames: [ { key: 'dude', frame: 5 } ],
        frameRate: 1
    });
    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('player', {frames: [3, 6, 7, 8]}),
        frameRate: 10,
    });
}
function update () {
// listening for key downs
  if (cursors.left.isDown) {
    player.setVelocityX(-190);
    player.anims.play('left', true);
  } else if (cursors.right.isDown) {
    player.setVelocityX(190);
    player.anims.play('right', true);
  } else {
    player.setVelocityX(0);
    player.anims.play('turn');
  }
  if (cursors.space.isDown && player.body.touching.down) {
    player.setVelocityY(-650);
  }
}

Ta-da!