D29 - 「来互相伤害啊！」：天时地利

互殴之前当然要先有场地才行，让我们建立 Phaser 场景吧！

建立场景

首先建立 src\components\window-app-cat-vs-dog\scenes 资料夹，集中所有场景。

接着建立 scene-example.js 场景。

src\components\window-app-cat-vs-dog\scenes\scene-example.js

import Phaser from 'phaser';

export default class extends Phaser.Scene {
  constructor() {
    super({ key: '' })
  }
  preload() {
  }
  create() {
  }
  update() {
  }
}

接着根据 D27 规划的结果新增场景 scene-welcome.js、scene-main.js、scene-over.js。

最後是新增一个特别的场景，专门用来预先载入所有素材、建立动画用的场景 scene-preload.js。

所以目前档案为：

src\components\window-app-cat-vs-dog\scenes\scene-preload.js

import Phaser from 'phaser';

export default class extends Phaser.Scene {
  constructor() {
    super({ key: 'preload' })
  }
  preload() {
  }
  create() {
  }
  update() {
  }
}

src\components\window-app-cat-vs-dog\scenes\scene-welcome.js

import Phaser from 'phaser';

export default class extends Phaser.Scene {
  constructor() {
    super({ key: 'welcome' })
  }
  preload() {
  }
  create() {
  }
  update() {
  }
}

src\components\window-app-cat-vs-dog\scenes\scene-main.js

import Phaser from 'phaser';

export default class extends Phaser.Scene {
  constructor() {
    super({ key: 'main' })
  }
  preload() {
  }
  create() {
  }
  update() {
  }
}

src\components\window-app-cat-vs-dog\scenes\scene-over.js

import Phaser from 'phaser';

export default class extends Phaser.Scene {
  constructor() {
    super({ key: 'over' })
  }
  preload() {
  }
  create() {
  }
  update() {
  }
}

载入素材

接着在 scene-preload.js 场景中载入素材并建立动画。

src\components\window-app-cat-vs-dog\scenes\scene-preload.js

import Phaser from 'phaser';

import catWork from '@/assets/cat-vs-dog/cat-work.png';
import catBeaten from '@/assets/cat-vs-dog/cat-beaten.png';
import catWeapon from '@/assets/cat-vs-dog/cat-weapon.png';
import catAttack from '@/assets/cat-vs-dog/cat-attack.png';

import dogWork from '@/assets/cat-vs-dog/dog-work.png';
import dogBeaten from '@/assets/cat-vs-dog/dog-beaten.png';
import dogWeapon from '@/assets/cat-vs-dog/dog-weapon.png';
import dogAttack from '@/assets/cat-vs-dog/dog-attack.png';

import river from '@/assets/cat-vs-dog/river.png';

export default class extends Phaser.Scene {
  constructor() {
    super({ key: 'preload' })
  }

  preload() {
    // 载入图片
    const imgs = {
      'cat-weapon': catWeapon,
      'dog-weapon': dogWeapon,
      'river': river,
    };

    Object.entries(imgs).forEach(([key, value]) => {
      this.load.image(key, value);
    });

    // 载入 spritesheet
    const catSheets = {
      'cat-work': catWork,
      'cat-beaten': catBeaten,
      'cat-attack': catAttack,
    };
    const dogSheets = {
      'dog-work': dogWork,
      'dog-beaten': dogBeaten,
      'dog-attack': dogAttack,
    };

    Object.entries(catSheets).forEach(([key, value]) => {
      this.load.spritesheet(key, value,
        { frameWidth: 300, frameHeight: 300 }
      );
    });
    Object.entries(dogSheets).forEach(([key, value]) => {
      this.load.spritesheet(key, value,
        { frameWidth: 450, frameHeight: 450 }
      );
    });
  }
  create() {
    // 建立动画
    this.anims.create({
      key: 'cat-work',
      frames: this.anims.generateFrameNumbers('cat-work', { start: 0, end: 1 }),
      frameRate: 4,
      repeat: -1,
    });
    this.anims.create({
      key: 'cat-attack',
      frames: this.anims.generateFrameNumbers('cat-attack', { start: 0, end: 0 }),
      frameRate: 4,
      repeat: 1,
    });
    this.anims.create({
      key: 'cat-beaten',
      frames: this.anims.generateFrameNumbers('cat-beaten', { start: 0, end: 0 }),
      frameRate: 4,
      repeat: 1,
    });

    this.anims.create({
      key: 'dog-work',
      frames: this.anims.generateFrameNumbers('dog-work', { start: 0, end: 1 }),
      frameRate: 4,
      repeat: -1,
    });
    this.anims.create({
      key: 'dog-attack',
      frames: this.anims.generateFrameNumbers('dog-attack', { start: 0, end: 0 }),
      frameRate: 4,
      repeat: 1,
    });
    this.anims.create({
      key: 'dog-beaten',
      frames: this.anims.generateFrameNumbers('dog-beaten', { start: 0, end: 0 }),
      frameRate: 4,
      repeat: 1,
    });

    // 前往下一个场景
    this.scene.start('welcome');
  }
}

所谓的 spritesheet 是指这种图片：

Untitled