phaserでアクションRPG Day2 フィールドの作成

f:id:naosim:20181010064547p:plain

前回phaserのセットアップをしました

naosim.hatenablog.jp

今日はフィールドを表示してみます

で...いきなり壁...
コードをcodepenで書いてたけどcodepenは画像を扱えなかった...
ワークアラウンドはあるけど本質的じゃないコードが入るといやなのでjsdo.itへお引越し
今回はでほぼ体力使い切った...

画像をpreloadで読み込む

まずはフィールドのマップチップ画像を読み込みます

function preload() {
  // 背景画像の読み込み 16x16のマップチップの画像
  this.load.image('ground', 'http://jsrun.it/assets/K/e/w/N/KewNo.png');
  // thisはSceneクラス
  // https://photonstorm.github.io/phaser3-docs/Phaser.Scene.html
  
}

いきなりthisが出てきてビックリしますが、thisはSceneクラスです
Phaser 3 API Documentation - Class: Scene

Phaserのver2ではグローバル変数にgameオブジェクトをいれておいて使うのが定石ぽかったけど、ver3からはthisを使うんですねー
グローバル汚染が減ってよくなった

背景を表示する

次にGroundクラスを作ります
phaser系の記事を読むとだいたいcreateメソッドの中に直にいろいろ書いてますが、それだと辛くなってくるのでクラス化しておきます

Groundクラスを使う側の実装

function create() {
  const ground = new Ground(this);
  ground.create();
}

newしてcreateを呼んで終了
create()と同時に背景画像が表示される想定です
phaserはcreateと同時に表示する仕様がある意味特徴なのでそれに合わせます

他のフレームワーク(例えばenchantとか)だと、生成後にaddChild()すると表示されますが、phaserは一気に表示まで処理が進みます
強気だなぁと思うけど、慣れればまぁそんなもんって感じですね

Groundクラス

次にGroundクラスの実装です

class Ground {
  constructor(scene) {
      this.scene = scene;
      this.level = [
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  6,  6,  6,  6,  6,  6,  6,  6,  6,  6],
      ];
      this.layer = null
  }

  create() {
    const map = this.scene.make.tilemap({ data: this.level, tileWidth: 16, tileHeight: 16 });
    this.layer = map.createStaticLayer(0, map.addTilesetImage("ground"), 0, 0);
    // ここで背景画像が配置される
  }