キノコが何か作るブログ

ゲーム・ドット絵・アプリなどを作ります

MENU

phina.jsでAsepriteのJSONを使ってみる

phina-aseprite-loaderを導入してみました。

pentamania.hatenablog.com

 

  • Scriptの読み込み順を間違えた
  • phina.jsを最初に読み込まないとダメなのに、loaderから読み込ませてしまった。
  • assetsの中にasepriteを書かないとダメ
  • 素材のパスを間違えた

いろいろやらかしましたが、なんとかできました。

f:id:mizukinoko:20201201221159g:plain

すごく便利です。Asepriteでアニメーションの動きを確認してからPNGとJSON両方書き出してくれるので、楽チンです。

phina-aseprite-loaderの使い方

ググればいくらでも出てきますが、Asepriteのバージョンが違ったりしてすこし戸惑ったので、一応書きます。

タグをつける

フレームを全部選択して右クリックします。

そしたらメニューが表示されますので、「New Tag」を選びタグを付けます。

f:id:mizukinoko:20201201221653p:plain

Exportする

Asepriteの機能を使ってJsonとSpriteSheetを書き出してもらいます。

「File」からExport Sprite Sheet」を選択します。

f:id:mizukinoko:20201201221918p:plain

すると、こんな感じの画面が表示されます。

f:id:mizukinoko:20201201222046p:plain

ここで書き出すファイルの設定を行います。

Sheet TypeはPackedでもなんでもいいと思います。ただし、Open Sprite Sheetにチェックを入れないと書き出せないので注意してください。

次にSpriteの設定を行います。

f:id:mizukinoko:20201201222313p:plain

ここの「Frames:」で先ほど設定したタグを選択します。

歩行グラなど複数のシーンがある場合は「All Frames」でもOKです。

タグ付けをしていれば、Jsonファイルに書き出す際に自動で分けてくれます。

次がOutputです。

f:id:mizukinoko:20201201222809p:plain

「Output File」と「JSON Data」にチェックを入れます。

Meta情報は初期設定のままで大丈夫です。

あとはExportを押して書き出します。

assetsに登録する

書き出されたPngファイルとJsonファイルをゲームのディレクトリまで持って行ったら、phina.jsのassetsに登録します。

PNGファイルは普通に「image:{~}」に登録すればいいんですが、JSONファイルはasepriteのオブジェクトを作ってそこに登録します。

f:id:mizukinoko:20201201223238p:plain

コードを追加する

一例ですが、こんな感じで追加します。

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前提で動いているので、先に読み込ませるとエラーで止まります。

終わり

もっと早く導入すればよかったと後悔しています。

プライバシーポリシー