Cocos Creator 3にアニメーションを取り込む

書き出しファイルを理解する

cocos_creator_packにはspritesheet.png、spritesheet.plist、AnimGenSpritePlayer.ts、animgen-manifest.json、READMEが含まれます。PLISTはCocos2d-xアトラス形式3です。TypeScriptはSprite用のサンプルプレーヤーであり、AnimationClipや完成したゲームコントローラーではありません。

アトラスをまとめて取り込む

PNGとPLISTの名前を変えず、同じAssetsフォルダーに一緒に取り込みます。SpriteAtlasに個別のSpriteFrameサブアセットが現れます。組としての取り込みはCocosのAtlas資料にもあります。

プレーヤースクリプトを取り込み、コンパイルを待ちます。Spriteノードを作り、AnimGenSpritePlayerを付け、取り込んだSpriteAtlasをatlasプロパティに指定します。

プレーヤーを設定する

スクリプトはフレーム名を数字順に並べ、最初のフレームを表示して経過時間で進めます。play()とstop()を利用できます。動作を改造した場合は自分のコンポーネントとして再試験してください。

複数の書き出しで一つのコンポーネントを使う

各ZIPのクラス名は同じAnimGenSpritePlayerです。一つのプロジェクトにアニメーションごとに同名クラスを取り込まないでください。一つのコンポーネントを再利用し、ノードごとにアトラス、FPS、ループを設定します。

スクリプトには作成元の書き出しのピボットが埋め込まれています。別のアニメーションで異なるピボットが必要なら、applyExportedPivotをオフにして各UITransformのアンカーを設定するか、再利用用のプレーヤーを意図的に改造します。

結果を確認する

マニフェストとフレーム数、FPSを照合し、小さな場面でループ境界、縮尺、アンカー、透過、描画順を見ます。何も映らなければコンパイル、アトラス設定、Sprite、サブアセットを確認します。シートが1枚で表示されるなら単体テクスチャーではなくSpriteAtlasを使ったか確認します。

欠けたフレームはPNGとPLISTが同じ書き出しか、アンカーの跳びは書き出し別のピボット設定を調べます。キャンバスとピボット、透過形式も参照してください。サンプルはCocos Creator 3.x向けで、実際のエディターと対象ビルドでの試験が必要です。