【Unity 2D Tips】 Aseprite Importerを使ってみる

1. Home
2. Unity Tips

もくじ

• はじめに
• 2D Aseprite Importer packageのセットアップ
• Aseprite形式ファイルのインポートとテスト
• まとめ

はじめに

本記事では「Aseprite Importer」というツールを紹介します。「Aseprite Importer」は「 Aseprite」のファイル(.ase、.aseprite)をUnityにインポートし、読み込んだAsepriteファイル内のスプライトとフレームのデータを元にカスタムされたSpriteタイプのPrefabアセットを生成してくれます。

以下のYouTubeビデオでも「Aseprite Importer」に関する情報や使用方法が参照できます。

Aseprite Comes to Unity!

UnityにインポートするAsepriteのサンプルファイルは先ほどのYouTubeビデオで紹介されていた「 Animated Pixel Adventurer」を使用します。

あらかじめ上記サイトから「original files.zip」をダウンロードして解凍しておきます。( 1.1)

解凍したフォルダ内にある「adventurer.aseprite」をAsepriteで開きます。idle、crouch、runなどのフレームアニメーションがいくつか設定されているのがわかります。( 1.2)

2D Aseprite Importer packageのセットアップ

Unity Hubを起動して、2D URPの新規プロジェクトを作成します。今回使用したUnityバージョンは2022.2.11f1となります。( 1.3)

Aseprite Importerは現在、まだ開発バージョンのため、パッケージ一覧にリストアップがされません。名前を手動で入力してインストールします。

新規プロジェクトを作成しUnity Editorのウィンドウが表示されたら、WindowメニューよりPackage Managerを表示させます。Package Managerウィンドウの左上にある「＋」アイコンをクリックし、「Add package by name」を選択します。( 1.4)

インプットフォームに「com.unity.2d.aseprite」と入力し「Add」ボタンをクリックします。( 1.5)

2D Aseprite Importerがインポートされます。インポートが完了しましたら、右側詳細欄の「 Documentation」リンクをクリックするとAseprite Importerパッケージに関するUnity Manualが確認できます。( 1.6)

Aseprite形式ファイルのインポートとテスト

Aseprite Importerをセットアップできたら、最初に解凍したAseprite形式の「adventurer.aseprite」をUnityのProjectウィンドウにドラッグ＆ドロップでインポートします。インポートするとAseprite Importerが自動的にファイルをPrefab化したアセットに変換してくれます。( 1.7)

ファイルをインポートすると警告メッセージが出ます。内容はメモリリークに関するもののようですが、念のため、保存してからUnityのプロジェクトを再起動させます。まだ正式リリース版ではないので注意して使用しましょう。( 1.8)

インポートしたアセットを選択して、Inspectorウィンドウを見ると通常の2Dイメージをインポートした場合のSpriteと同様のパラメータがあることがわかります。他にもAsepriteからインポートするためのパラメータ設定値がありそうですが、ここではInspectorウィンドウでPixel Per Unitを「32」に変更のみしておきます。( 1.9)

ProjectウィンドウからインポートしたAsepriteのアセットをSceneもしくはHierarchyウィンドウへドラッグ&ドロップして、Game Object化します。Animatorがあらかじめセットされていることがわかります。( 1.10)

私の分かる範囲ですが、Aseprite Importerを使ってAsepriteの画像ファイルをインポートするとAsepriteのフレームに従ってSprite Sheetの生成とスライスが行われ、AnimatorとAnimation clipが自動生成されるようです。また、AsepriteのTagによってグループ化していたアニメーションループはそれぞれUnityでも複数のAnimation clipに変換されAnimatorに登録されていました。( 1.11、1.12)

下記のビデオはUnityのAnimationウィンドウで組み込まれたアニメーションをいくつか試している様子です。選択メニューがビデオでは表示されていませんが、idle、attack1、die、jumpの順にAnimation clipを選択した表示結果になります。( 1.13)

1.13 Test Animations

Sprite Editorを開いてみたところです。Asepriteの各フレームをSprite Sheetにまとめて1つの画像に変換した上でスライスし、各Spriteイメージに変換されているようです。( 1.14)

1.14 Sprite Editor

まとめ

通常、AsepriteからSprite sheet形式でエクスポートしたPNGファイルをUnityにSpriteとしてインポートしパラメータをドット絵に合わせ、Sprite EditorでSliceして、それを各アニメション毎に複数のSpriteにグルーピングした上で、それぞれをAnimation clipとして作成して、さらにAnimatorに登録するという一連の手順がこのツールを使えば簡略化・短縮化されて処理されるというとても便利なツールになっていると思います。( 1.15)

1.15 Aseprite Importer Function Sketch

一部まだサポートされていない機能もあるようですが、Aseprite Importer 1.0.0-pre.2バージョンでほぼ必要な機能は満たされていると思います。上でも　述べたようにとても便利なツールだと思いますので、Asepriteで作成したピクセルアートを使用しUnityでゲームを制作する場合には、Aseprite Importerがおすすめです。

アニメーションのフレームレートに関してはまだ正確にはUnityのAnimation clipに反映はされていないようですのでUnity上で多少調整は必要かもしれません。