Phaserで指定ディレクトリのAssetsファイルを自動で読み込む

TL; DR

• 標準ではそんな機能無い
• プラグインを作ったので使って下さい

普通の読み込み方

preload () {
  this.load.image('logo', 'img/logo.png')
  this.load.spritesheet('player', 'img/player.png', { frameWidth: 16, frameHeight: 32 })
}

アセットが数個の小規模なゲームなら、↑のように読み込んでいけばいいけど、アセットの量が多いゲームだとかなりしんどくなってきます。

ディレクトリの中に置いたファイルを勝手に読み込んで使えるようにしたいです。

標準でそれができない理由としては、Webフロントエンドからは、サーバーにあるディレクトリをスキャンできないためです。

なので、ビルド前にNode.jsなどでスキャンし、ビルド後の時点ではファイル一覧が静的にリストアップされている必要があります。

スプライトシート

{ frameWidth: 16, frameHeight: 32 }

ついでにスプライトシートをピクセルをしないと行けないのもつらいです。

縦横の枚数ではなくピクセルで指定しないといけない理由としては、描画しないと大きさを取得できないからだと思います。

WebpackPluginを作りました

phaser-assets-loader
https://github.com/laineus/phaser-assets-loader

ディレクトリと読み込むアセットの種類などを定義すると、以下のようなアセットの一覧を自動で変数として読み込めるようになります。

import assets from 'assets'
conosle.log(assets)
// -> {
  image: [
    ['title', '/img/title.png']
  ],
  spritesheet: [
    ['player', '/img/player.png'. { frameWidth: 16, frameHeight: 16, startFrame: 0, endFrame: 3 }]
  ],
  audio: [
    ['bgm', ['/audio/bgm.m4a', '/audio/bgm.ogg']]
  ]
}

Webpack監視中にファイルが増減すると、自動で再読込します。

スプライトシートについては、同一ディレクトリに縦横の枚数を指定したjsonファイルを設置すると、ピクセルに変換されます。

[
  ["player.png", 3, 4]
]

使い方はGitHubをご覧ください！