⏹️

【Unity】2D Animation構築で楽したい【Aseprite Importer】

2024/10/09に公開

Unity

asset

Aseprite

tech

 概要当記事は、ゲームエンジンのUnity、ピクセルアート作成に特化したグラフィックスツールのAseprite、それらをつなぐAseprite Importerを組み合わせて2D Animation構築で楽できないか？を試行錯誤した体験を整理した記事です。

 使用環境Unity 2022.3.16f1
Windows11 home
JetBrains Rider 2024.2.5
Aseprite v1.3.9.1-x64

 Asepriteとは？非常に多機能なピクセルアートツールです。
https://youtu.be/4emFL4aV9WM
海外ではかなり有名なツールで、日本でも愛用者が多数いるそうです。2024年10月現在、Steamではセール抜きで2050円ほど、paypalを経由して約$20ほどでも購入が可能です。

 Aseprite Importerとは？Aseprite Importerとは、Aseprite上で編集されたグラフィックスデータを保存する際に選択でき、Aseprite独自のファイル形式である.aseもしくは.aseprite型のファイルをそのままUnityに取り込むことを可能にしたUnityのAssetです。
Asepriteで描いていたピクセルアートの編集内容、設定内容の一部を引き継いだ上で、Unity上でなんと自動でAnimation関連データを作成してくれます。神か？

 導入
 Unity側での準備
 Aseprite ImporterのインストールUnityEditor上部メニューから Window > Package Manager　を選択。出現したPackage Managerウィンドウの左上にある＋ボタンを押下、「Add package by name...」を選択し、「com.unity.2d.aseprite」と入力し、最後にAddボタンをクリックしましょう。簡単！
以後、.aseもしくは.asesprite拡張子のデータをProjectフォルダに配置すると、3Dモデルデータのように配下に複数のデータを有するフォルダ、段ボール箱のようなアイコンとして取り込まれ、表示されます。

 Aseprite側での準備さてAseprite Importerをインストールすると、.aseもしくは.asepriteファイルを取り込めるようになると記述しましたが、どんなグラフィックデータがどんな形でUnityに取り込まれるのでしょう？

 Frameを持たないピクセルアートデータ複数のレイヤーから構成されるフレームを持たないシンプルなピクセルアートデータは、Unityで兼ねてから取り扱われていた画像形式の取り込みとほぼ同じ形に扱われます。なお、それぞれのレイヤーをAseprite側で事前に合成しておく必要もなく、最終保存段階での有効な(visibleな)レイヤーを全て重ねた1枚絵の状態で取り込まれます。このようなスタイルで取り込みを行う場合は、取り込み後にInspectorに表示されるImport Modeプロパティの値をデフォルトの「Animated Sprite」から「Sprite Sheet」に変更することをお勧めします。
シンプルなピクセルアートデータに対してAseprite Importerを利用するメリットとしては、取り込んだ瞬間からピクセルスタイルで利用可能であるという点です。従来の画像ファイル(pngなど)の形でグラフィックデータを取り込んだ際は、決まってCompressionやらFilter Modeやらのプロパティでピクセルがしっかり強調されるように微調整を行わなくてはならないワケなのですが、Aseprite Importerであればこの作業をカット可能です。

 Frameを持つアニメーションピクセルアートデータお勧めの方法としては次の図で示すように、Asepriteで編集中のピクセルアートデータに対して関係の深いアニメーションフレームをまとめてTag付けを行なうことです。
この状態でUnityに取り込むと、Tag名別に自動でAnimation Clipファイルが生成され、さらにそれらを全て盛り込んだAnimator Conrtollerファイルも生成されます。

 取り込み後の調整Aseprite Importer導入後、UnityEditorのProjectウィンドウで.asepriteファイルをクリックすると、Inspectorに様々な調整を可能とする各種プロパティが表示されます。当記事でAseprite Importerの全要素を取り上げることは難しいため詳細は割愛しますが、例えば取り込まれたピクセルアートデータは最小限の長方形にまで透明な背景がトリミングされてしまう特徴があったりします。そこに問題が発生するようであれば、以下のプロパティを調整してみてもよいかもしれません。

 Pivot Alignment取り込まれたピクセルアートデータを描画する際の基準点を決めるプロパティです。デフォルトでは、2Dの人気ジャンルである横スクロールアクションゲームなどを意識してかBottomになっていますが、トップビューのGameなどではCenterにするなどの方が望ましいでしょう。

 Platform Setting > Compressionpngやjpegなどで用意された画像をピクセルアートデータとして使いたい場合のお馴染みのプロパティですが、.ase及び.asepriteで取り込んだピクセルアートデータを一度でもInspectorで

編集して「Apply」ボタンをクリックするとこの情報が絵に反映され、見た目が崩れることがあるようです。「None」に設定し直すことを推奨します。

 機能や特徴(一部抜粋)
 Unity側からAseprite起動Projectウィンドウ内の.ase及び.asepriteファイルに対してAsperiteのアプリケーションが紐付けされます。このため、Projectウィンドウ内の.ase及び.asepriteファイルをダブルクリックすることで、対象のファイルを早急に編集することが可能です。

 リアルタイム更新また、前述の状態でProjectウィンドウ内の.ase及び.asepriteファイルをAsepriteで編集し、上書き保存を行うと、編集内容がすぐさま取り込まれ、Unityに反映されます。ただし、この部分には若干の注意が必要で、編集対象が「Frameを持つアニメーションピクセルアートデータ」の場合、Animation ClipとAnimator Controllerの内容が再生成され、上書きされます。特にAnimator ControllerはTransitionなど後から追加した情報も全てなかったまっさらの状態に戻されるため、Animator Controllerファイルについては、利用しないことを推奨します。

 サポートされていない機能現時点で、Asepriteで作成した以下の情報についてはまだAseprite Importerでサポートされていません。近い将来対応されると嬉しいですね。
スライス
タイルマップ

 終わりにまだまだ完全に開放されるほど楽できるわけではないですが、Animation Clipファイルを簡単に生成できることがわかっただけでも収穫でした。積極的に使って作業時間の短縮を目指そうと思います。

 余談この記事は、Aseprite Importerが2023年の後半に公式でちゃっかりサポートされ出したことに今の今まで全く気づかず、今年の前半に地味な作業をしてしまっていたことを激しく後悔した衝動を元に書かれています。Unity+Asepriteユーザーに幸あれ・・・。