AfterEffectsでアニメーションを連番画像で書き出し、Unityで使用するやり方を解説していきます。
複数画像をアトラス化し、連番アニメーションとして使用することで手軽にリッチなアニメーションを表現することができます。
メリットとしては
・簡単に高品質なアニメーションを制作できること
デメリットとしては
・大量の画像を使用するので容量が増える
デメリットの容量が増えてしまうため、作っていくときはできる限り画像を圧縮し、連番の枚数を削って対応することで節約することを意識します。
以前も連番系の書き出しに関してエフェクトの作り方として記事を書きましたが、今回はアトラス化するときのツールをTexture Packerにし、Unityでの再生もanimation controllerで対応したものを解説していきます。
連番画像の作成_AfterEffect書き出し
アトラス画像のサイズはおおよそ3つ「512×512、1024×1024、2048×2048」になり、その中に画像を入れていくため、枚数、サイズを調整して入れていくことになります。
今回はAfterEffectsで作成した画像を128×128で縦に8枚、横に8枚敷き詰めて1024×1024のアトラス画像を作成します。
128枚の連番画像を使用するので、60fで127f(2.07秒)のアニメーションを作ります。
アニメーションを書き出しするのに「Command/Ctrl + /」でレンダーキューにコンポジションを追加します。
出力モジュールをカスタムで詳細の設定ダイアログを出します。
形式：PNGシーケンス
チャンネル：透過画像が必要な場合はRGB + アルファに変更
サイズ変更：128×128
最後にOKで設定完了です。
出力先を選択し、レンダリングボタンを押してPNGの書き出しを行います。
全部で128枚の画像が書き出されます。
アトラス化_TexturePacker
連番画像の書き出し後は一枚の画像にアトラス化を行います。
Photoshopでもできますが、ここではTexturePackerを使用します。
▼TexturePackerサイト
https://www.codeandweb.com/texturepacker
TexturePackerのサイトからツールのダウンロードを行います。
左側に「Download TexturePacker」があるので、ダウンロードします。
インストールをし、起動をします。
起動時にPro版を購入するかフリー版にするかありますが、フリー版(Use Free Version)でここでは進めます。
起動したら、作成したテクスチャーを64枚選択し、「Empty…」へドラッグ&ドロップします。
右の項目にあるSettingsを2箇所変更します。
TextureのTexture fileで保存先の選択とファイル名を記載
LayoutのMax sizeを1024×1024に変更
終わったら上にあるPublish Sprite sheetを押すと書き出しが行われます。
残りの画像でアトラス画像をもう一枚作るので、同じように2枚目を作ります。
Unityでアニメーションさせる
作成した2枚の画像をUnityのPrjectの任意のフォルダへドラッグ&ドロップします。
次に一枚の画像を複数枚に分割するために、2D Spriteをインストールします。
メニューバーのWindow→Package Managerを開き、左上からUnity Registryを選択します。
次に右上の検索窓に2Dと入力すると2D Spriteが出るので、選択し、Installを押します。
これで画像の分割をする機能が追加されました。
場合によってはUnityを再起動しないと拡張機能が反映されない場合があるので、次の工程でうまくいかない人は再起動させてみてください。
Projectのアトラス画像を選択し、Inspectorの設定を行います。
Texture Type：Sprite(2D and UI)
Sprite Mode：Multiple
設定後にApplyをし、中央右のSprite Editorから画像を分割する設定画面を開きます。
Sprite Editorの左上にあるSliceをクリックし、以下の設定をします。
Type：Grid By Cell Size
Pixel Size：128×128
設定ができたらSliceを押し、右上にあるApplyで繁栄をさせます。
これで、一枚の画像が分割されて64枚のSpriteが作成されました。
同じように2枚目のアトラス画像もSprite Editorで分割を行います。
2枚とも分割ができたら、Projectの2枚のアトラス画像を展開し、128枚のSpriteを選択します。
選択したSpriteをHierarchyへドラッグ&ドロップし、アニメーションを作成します。
ドラッグ&ドロップをすると、自動で連番アニメーションに対応したcontrollerが作られるので、任意の場所へ保存をします。
animationcontrollerの保存をすると、連番アニメーションのキーが打たれたアニメーションが作成されましたので、これで完成となります。
