ツクラーが始めるPixiJS v4入門 その3

はいどーもこんばんは。
今回はタイルセットを勉強しますよ。
使う画像は公式サイトのこれ。
https://raw.githubusercontent.com/kittykatattack/learningPixi/master/examples/images/screenshots/09.png

192*192の画像で、一つのパーツは32*32です。

タイルセットをなぜ使うのか

ご覧の通り、タイルセットは「いくつかの画像を一つのファイルにまとめたもの」です。
「じゃあ別に一つ一つ別の画像を使ってもよくない?」と思うかもしれません。
実際、別に一つ一つの画像でも問題がないと言えば問題がありません。
それではなぜタイルセットを使うかと言えば、1つは単に「同じ種類の画像は同じファイルにまとめたほうが管理しやすい」ということがあるでしょう。
ですがより重要なのは「処理効率がよく、またメモリ効率もよい」ことです。
ゲーム制作は処理効率が大事であったり、メモリを節約しなければならなかったりする場合も多々あるので、一枚一枚の画像を用意するよりは、まとめられそうな場合はこうしたタイルセットを利用するのがよいと思われます。

タイルセットを使ってみる

PixiJSはタイルセットをサポートしています。
使い方もわりと簡単。
まずは普通の画像ファイルと同じく、loaderで使用する準備を整えます。
こんな感じ。

あとはcreateTileset関数の中身を作っていくだけです。
こんな感じ。

frameで矩形を指定してどこを抜き取るかを決めています。
前回の続きに書いていっているなら、以下のような感じの状態になると思います。

タイルセットの一部が表示されているのがわかりますでしょーか。

テクスチャアトラス

frameで指定するのってわりとめんどくさいですよね。
ご安心ください。PixiJSにはもっと便利な方法が用意されています。
テクスチャアトラスというものです。

テクスチャアトラスとは、要はJSONファイルです。
Unityを使っている方だと「アトラス化」とかの用語で馴染みがあるんじゃないでしょーか。
それと一緒です多分。

これの一番のメリットは、先のframeを使う例とは違ってハードコーディングされていないことです。
JSONファイルは比較的理解が簡単ですから、グラフィッカーさんでも簡単にファイルを編集することができるでしょう。
なんならアトラス編集用のソフトを使ってもいいです(実際、Unityにはアトラス編集用のツールが組み込まれています)。

で、PixiJSはどうすりゃええんじゃということですが、Texture Packerなるソフトウェアを推奨しているようです。
以下のサイトから無料版もDLできます。
https://www.codeandweb.com/texturepacker

インストールが終了したら起動して、Data FormatにPixiJSを選んでから適当に画像を用意してください。
画像が用意できたら、Add spritesで追加していってください。
それが終わったらPublish sprite sheetで出力するのですが、無料版ではいろいろと制限があるので、たぶんエラーが出ると思いますw
Disableどうこうというボタンが出ると思うので、僕はそれを押したらうまくいきました。
あるいは元からSettingsをちゃんと変更するかですかね。

出力されたpngファイルとjsonファイルを、今まで使ってきたimagesフォルダにぶち込めばテクスチャアトラスの準備は完了です。
jsonファイルの中身を見てみれば、だいたいどんな感じで使うのか想像できるかもしれません。

PixiJSでテクスチャアトラスを読み込む

ではさっそく読み込んでみましょう。
まずはローダーでjsonファイルを読み込んどきます。

それからcreateTilesetByAtlas関数を作成し、setupの中で呼ぶようにしてください。
createTilesetByAtlas関数はこんな感じ。

id変数で受け取っているresources[“./images/atlas.json”].texturesはresources[“./images/atlas.json”].textureではないので、ここだけ気をつけてください(複数形になっている)。
あとはidを使って(TextureDictionaryです)、普通のスプライトと同じように生成できます。

よくわからん小さい画像が表示されているのがわかりますでしょーか。
これはテクスチャアトラスで表示させています。
また、今回はしていませんが、Texture Packerを使えば異なるサイズのテクスチャもきちんと分割して表示してくれます。

終わりに

アトラスは便利ですね。
Unityでもよく使います。
ですがPixiJSの場合、Texture Packerを使わなければならないのがちょっと面倒ですね……。
特に無償版だと制限がいろいろとあって使いにくいです。
となるとframeで分割する方法も視野に入れたほうがいいのかなあと思いました。
もちろん開発規模が大きければTexture Packerの有償版をさっさと購入した方がいいんでしょうが。

ほなそんな感じでまた。

フォローする