🔲
【Unity】機能を深堀してみる【Aseprite Importer】

2024/11/14に公開
 概要当記事は、ゲームエンジンのUnity、ピクセルアート作成に特化したグラフィックスツールのAseprite、それらをつなぐAseprite Importerを組み合わせて2D Animation構築で楽できないか？を試行錯誤した前回の記事の続きの内容です。
参考資料は少ない現状ですが、公式Documentを中心に見ていき、前回記事では取り上げきれなかった機能や実際の組み合わせ例を試行錯誤してみます。

 使用環境各種ソフトウェアは前回記事と一緒です。
aseprite Importer ver 1.1.6

 公式のサポートする機能
 基本用語確認用に画像を載せておきます。

 Aseprite feature (Aseprite上での操作が中心となる機能).ase形式と.aseprite形式（以下、Asepriteファイル）の取り込みが可能。
Asepriteで任意のピクセルアートを作成後、所定の形式で保存した後、UnityのProjectウィンドウにドラッグ＆ドロップすればOK。

カラーモードについても特別気にする必要はなく、Asepriteで編集可能な以下のすべてが問題なく取り込み可能。
RGBA
グレースケール
インデックス(gifのような形式)

表示・非表示レイヤーに対応
デフォルトでは非表示レイヤーは取り込まない設定
ただし、UnityEditor上でいつでも非表示レイヤーを再表示可能
非表示レイヤーを個別に再表示できるわけではなく、まとめて再表示する動作である点には注意


レイヤー合成モードに対応
取り込み設定、Import Modeプロパティの値がMerge framesのときは全ての合成モードに対応（詳細は後述）

レイヤーとセルの透明度対応
前述のレイヤー合成モードと組み合わせると半透明の画像を重ねた（含めた）アニメーションも取り込み可能

Linked Celsにも対応
Asepriteファイル取り込み後にセル内容が展開された画像を確認すると、AsepriteのLinked Celsと同じ仕様で１つの画像に複数のAnimation Clipから参照（リンク）されていることがわかる。

Tags
TagのプロパティにあるAnimation Directionの項目がForwardの時のみ対応
Tagに付与されるrepeating(繰り返し)設定については状況に応じて、以下のように解決される
∞のとき：ループされるAnimation Clipを生成する
1以上の何かしらの定数のとき：ループをしないAnimation Clipを生成する


Individual frame timingsに対応
タイムライン画面を操作することで各フレームに個別に設定できるアニメーション間隔のこと
フレームのプロパティにあるDurationに設定する数値(ミリ秒単位)のこと
取り込み後に生成されるAnimation Clipファイルへ忠実に反映される

Layer groups
レイヤーグループそれぞれに施された表示・非表示設定を忠実に反映する
import modeがindividual layersであるときのみLayer groupのデータがUnityに生成される(詳細は後述)


 Importer feature (UnityEditor上での操作が中心となる機能)取り込まれたAsepriteファイルは3Dモデルデータを取り込んだときのようなPrefabの形でProjectウィンドウ上に展開されます。ファイルをクリックすると、InspectorにAseprite Importerによる各種取り込み方法に関わる情報が表示され、その中身を細かく変更できる形になっています。
ここでは、各種プロパティとそこに設定できる値に触れ、Asepriteでの編集内容とUnity上でのAsepriteファイルの取り扱われ方のすり合わせを行います。

 GeneralImport Mode : .aseおよび.asepriteファイルをどのようにUnityに取り込むかの設定
Sprite Sheet : Sprite Editorで編集可能な単一の「スプライトシート」として取り込む.
Asepriteファイルの中身がフレームに分かれていて、Tag付けなどがなされていても全てのフレームの画像が1枚のスプライトに変換される。スプライトアトラスのイメージに近いか。
内部的には、裏側でアニメーションデータなどは全て保有している状態にあり、再度値をAnimated Spriteに戻してApplayすれば、元に戻る。

Animated Sprite :	デフォルト値。Asepriteファイル内部に2フレーム以上の情報が存在するとアニメーション関連のデータが自動生成される

Pixels Per Unit : Textureの取り込み設定でおなじみのプロパティのため割愛
Mesh Type : Textureの取り込み設定でおなじみのプロパティのため割愛
Generate Physics Shape : 透明ではない部分の画像形状（アウトライン）を元に物理エンジン（Sprite Renderer + Polygon Collider 2D）処理などで使える当たり判定(Physics Shape)を「まだ生成していなければ自動で生成する」オプション。ただし、このオプションにチェックをいれていなくてもPolygon Collider 2DにResetをかけると自動で生成されている様子が見て取れ、正しく動作しているか判断がつかない。

 Layer ImportInclude Hidden Layers : Asepriteファイル内にAsepriteで非表示にしていたレイヤーが含まれている場合、それも取り込み対象とする。
Import Mode : 同じフレーム上に存在する全レイヤーを統合して取り込むのか、レイヤーをそれぞれ別のものとして取り込むのかを選択する
Merge Frame、同じフレーム上のレイヤーを全て統合して処理する。デフォルト値
Indivisual Layers、レイヤーをそれぞれ別のものとして取り込む。こちらを選択したうえで、Asepriteファイル内部にレイヤー複数用意されていた場合、それぞれのレイヤー毎に専用のプレハブが生成される。なお、レイヤーが1枚しかない場合は選択しても効果はない。次の画像はレイヤーが2層あった場合のもの。

　
Pivot Space : AsespriteファイルのPivot（配置基準点）を何を根拠に算出するかを選択する。ピクセルアートが非線対称に書かれている場合など、中心軸に影響するので注意すること。
Canvas、元々Asperiteで編集していたキャンバスサイズに従う。デフォルト。例：下図の赤枠
Local、Asepriteファイル取り込み後のUnity内部のルールに従う。具体的には、余白をカットされた後の長方形画像サイズ？という理解でよさそう。例：下図の青枠。後述のSprite Paddingの影響を受ける。


Pivot Alignment : このスプライトが実際に配置される場合に、位置揃えを前述のPivot Space(枠)のどこを基準にするかを決める。デフォルトはBottom(=Bottom Center）、(x,y)=(0.5, 0.0)の位置。トップビューのゲームではCenterなどがオススメ。以下の図は、Asepriteファイルで取り込んだデータのPivot SpaceをCanvas、Pivot AligmentをBottomにした状態で、Positionが(x,y,z)=(0,0,0)のGameObjectとして表示したもの。





赤点が原点（0，0，0）
Mosaic Padding : AsepriteファイルはUnityに取り込まれる際、その過程でデータ内部の各セルの画像を展開した1枚の画像を作成します。このMosaic Paddingはセル展開の際に、隣接するセル同士の距離をどれくらい離すかというものです。大きすぎても余白がもったいないので、デフォルト値のままで問題はないと思います。



余白が4のとき



余白が8のとき
Sprite Padding : Mosaic Paddingと関連して、セル展開時にセル内容に設けたい余白サイズです。デフォルトは0。



Paddingが4のとき

 Generate assetsAseprite Importerには、取り込んだAsepriteファイルをそのままプレハブとしてアセット化する機能、Animation関係のファイルを生成する機能があり、以下のプロパティのON/OFFを切り替えてその内容を調整できます。
Model Prefab : 取り込んだAsepriteファイルそのものを第1フレームの画像がセットされたSprite RendererコンポーネントをもつGameObjectのプレハブとしてHierarchyに配置できるようにする。デフォルトはON(true)。

Asepriteファイル内部が複数のレイヤーで構成されており、Layer Import -> Import Mode が Indivisual Layers にセットしてある場合には、Animatorコンポーネントだけをもった親GameObjectに(Groupも考慮された)レイヤー毎に別れた子GameObjectをもつ階層化されたプレハブが生成される。Asepriteでの編集作業時に使っていたレイヤー順序もOrder in Layerプロパティにその順序として綺麗に反映されます。


Sorting Group : Layer Import -> Import Mode が Indivisual Layers にセットしてある場合、生成されるプレハブの親GameObjectに「Sorting Group」コンポーネントを追加する。Model PrefabがONの時のみ編集可能。Sorting Groupコンポーネントは複雑に階層化されたプレハブやGameObject同士がゲーム画面内で重なったときの表示順序を調整するためのコンポーネントです。
Shadow Casters : 生成されるプレハブに「Shadow Caster 2D」コンポーネントを追加する。Layer Import -> Import Mode が Indivisual Layers にセットしてある場合、親GameObjectには「Composite Shadow Caster 2D」コンポーネントが、子GameObjectには「Shadow Caster 2D」コンポーネントが自動で取り付けられます。Model PrefabがONの時のみ編集可能、デフォルトはOFF(false)。次の画像は、画面右上から左下に向けて強い光を放つスポットライト2Dを設置し、Asepriteファイルのプレハブに設定されている「Shadow Caster 2D」コンポーネントの効果によって影ができている画像。

Animation Clip : Asepriteファイル内部に複数のフレームが存在する場合にAnimation Clip、Animator Controllerファイルを生成する。Animation Clipはフレームがタグ付けされている場合はその数分が、ない場合は全フレームを結合した１つのファイルを生成する。デフォルトはON(true)。
Export Animation Assets : ボタン。押下するとAnimation ClipとAnimator Controllerの2種のファイル群を任意のフォルダに再出力するためのウィンドウが表示される。Asepriteファイル下のデータは外部ツール(Aseprite)でいつ上書きされてもおかしくない状態となっていて、基本読み取り専用と考えるべきです。そのため、それらを編集したい場合はこのボタンから保存しなおし、外部の影響を受けない状態にさせましょう。

 Texture, Platform Settings, Advancedこの3種の項目は、Textureの取り込み設定とほぼ同一のものとなるため、以下の留意事項以外は割愛します。
Asepriteファイルの取り込み後、少しでもなにかしらのプロパティを編集してApplyすると、ピクセルアートを綺麗に見せる設定でおなじみのFilter Mode : Point(no filter)　および Platform Settings -> 任意のプラットフォーム(ないしはDefault) -> Compression : None　の2点のデフォルト設定が上書きされ、画像が汚くなる。
例えば、取り込み直後はCompression:Normal Qualityと記載はあるが、どうみてもCompression:Noneの様に無圧縮な綺麗な状態に見えており、何か編集してApplayしてしまうとそこで初めてCompression:Normal Qualityの状態に変わってしまっている様子。



改めて目的の値に設定しなおして、再度Applyするべし!

Platform Settings -> 任意のプラットフォーム(ないしはDefault) -> Max Size の値は取り込まれたAsepriteファイル内部にある、全セルをひとまとめにしたTextureを確認し、横幅、立幅のうち、ピクセル数のより大きい方を選択、その値以上の2のべき乗値を設定すると良い。例えば、以下の画像上では128*256で記録されていたことが判明したので256の数値を採用した。



 その他の特殊操作、特殊機能
 Animation EventAnimation EventはUnityに備わっている、Animation Clipの任意の瞬間を検出する仕組みです。任意のAnimation Clipをダブルクリックすると出現するAnimationウィンドウ上にあるAdd Eventボタンをクリックすれば、挿入可能です。
Aseprite Importerでは、特定のステップを踏むことでAseprite上でEventのタイミングを仕込むことが可能です。
まずは、AsepriteでAsepriteファイルを以下のように編集します。
Asepriteのタイムライン上から任意のセルを選択し、右クリック-> Cel Properties... をクリック。
出現した小窓の右上、×ボタンの下側にある「User Data」ボタンをクリック
追加で出現した、User Data入力枠に次のフォーマットで半角英数字を入力
event:EventName
「event:」まで固定、「EventName」の部分は任意の文字列(例：Impact)を指定する

ファイルを上書き保存
ここから、Unity側へシフト。当該Asepriteファイルを取り込んでなければ、取り込みます。プロジェクトに取り込み済のAsepriteファイルであれば、自動更新されるのでそのまま作業を続行します。
上記で編集したセルを含んだTagがついているAnimation ClipをダブルクリックしてAnimationウィンドウをひらく
指定した名称のイベント(例：Impact)が挿入されていることを確認する
続けて、発生したEventを検出する仕組みをスクリプトで用意します。
MonoBehaviourを継承した任意のC#スクリプトファイル(コンポーネント)を作成する
前述の「EventName」で指定したモノと同じ名称(例:Impact）、publicで引数なしのメソッドを作成する
EventReceiverSample.cs
using UnityEngine;

public class EventReceiverSample : MonoBehaviour
{
    public void Impact()
    {
        Debug.Log("Impact");
    }
}
上記のコンポーネントを任意のGameObjectにアタッチする
同じGameObjectにSpriteRendererコンポーネントをアタッチする
同じGameObjectにAnimatorコンポーネントをアタッチし、Controllerプロパティの参照値をAsepriteファイル内のAnimator Controllerファイルに変更（User Dataを仕込んだAnimation Clipへの参照をもっているデータであること）

 UnityEditor.U2D.AsepriteEditor拡張などに利活用できるScripting API

が提供されており、Asepriteファイルの内部情報（属性）にアクセスしたり、Asepriteファイルをプロジェクトに取り込んだ事をイベントとして検出できるようになっています。

 未実装機能以下の機能はまだ(2024/11/13, ver1.1.6時点で)未実装とのこと。どちらもAseprite関係なしにUnityEditor上で既に実現されている機能だが、もしこれらの機能をAsepriteから橋渡しで行える（自動生成される）様になるのであれば、アーティストが普段使いのグラフィックスツールで作業を99％完結できる点がとても強力ですね。早期の実装が待たれる・・・。
Slices：9-Sliceのこと。Unityでは、ボタン枠や会話枠用の背景画像をSprite Editorで分割、枠を伸縮させてもそれに合わせて画像が伸び縮みできる（ないしは繰り返しで敷き詰め表示が行える）という例のあれです。
Tilemaps：Unityにも同じ名称でほぼほぼ同じ機能のものが存在します。

 終わりに今回整理した機能に関しては、Asepriteにピクセルアートをどのように構築したか、Unity上でAseprite Importerをどのように設定したか、そしてそれらを最終的にゲームにどのような形で利活用するのかという広い範囲にまたいでいることに加え、どのプロパティでどのような取り込み結果になるか名称から予想がつかないことが多かった点で手を焼きました。なんとか整理できたかなー・・・？
全てのUnityとAsepriteユーザーに幸あれ！！