phina-aseprite-loaderを導入してみました。
- Scriptの読み込み順を間違えた
- phina.jsを最初に読み込まないとダメなのに、loaderから読み込ませてしまった。
- assetsの中にasepriteを書かないとダメ
- 素材のパスを間違えた
いろいろやらかしましたが、なんとかできました。
すごく便利です。Asepriteでアニメーションの動きを確認してからPNGとJSON両方書き出してくれるので、楽チンです。
phina-aseprite-loaderの使い方
ググればいくらでも出てきますが、Asepriteのバージョンが違ったりしてすこし戸惑ったので、一応書きます。
タグをつける
フレームを全部選択して右クリックします。
そしたらメニューが表示されますので、「New Tag」を選びタグを付けます。
Exportする
Asepriteの機能を使ってJsonとSpriteSheetを書き出してもらいます。
「File」からExport Sprite Sheet」を選択します。
すると、こんな感じの画面が表示されます。
ここで書き出すファイルの設定を行います。
Sheet TypeはPackedでもなんでもいいと思います。ただし、Open Sprite Sheetにチェックを入れないと書き出せないので注意してください。
次にSpriteの設定を行います。
ここの「Frames：」で先ほど設定したタグを選択します。
歩行グラなど複数のシーンがある場合は「All Frames」でもOKです。
タグ付けをしていれば、Jsonファイルに書き出す際に自動で分けてくれます。
次がOutputです。
「Output File」と「JSON Data」にチェックを入れます。
Meta情報は初期設定のままで大丈夫です。
あとはExportを押して書き出します。
assetsに登録する
書き出されたPngファイルとJsonファイルをゲームのディレクトリまで持って行ったら、phina.jsのassetsに登録します。
PNGファイルは普通に「image:{~}」に登録すればいいんですが、JSONファイルはasepriteのオブジェクトを作ってそこに登録します。
コードを追加する
一例ですが、こんな感じで追加します。
let bomb = Sprite('bombEffect', 48, 48).addChildTo(this);
bomb.setPosition(x, y);
let bombAnim = FrameAnimation('bombSS').attachTo(bomb);
//連続再生する場合は↓を使う
bombAnim.setNext("bomber", "bomber");
//連続再生しないなら↓だけでいい
bombAnim.gotoAndPlay("bomber");
最後にindex.htmlにphina-aseprite-loaderのプラグインを読み込ませんます。
<script src='https://cdn.jsdelivr.net/npm/phina-aseprite-loader@latest/dist/phina-aseprite-loader.min.js'>
必ずphina.jsを読み込んだ後に書いてください。phina-aseprite-loaderはphina.js前提で動いているので、先に読み込ませるとエラーで止まります。
終わり
もっと早く導入すればよかったと後悔しています。
