Asepriteでゲームスプライトを作成する方法

---

UnityやUnreal Engineに素材を販売する

現代の生活において、パソコンやスマホは欠かせないアイテムです。

特に、ゲームやVR、アプリ開発への関心が高まっており、UnityやUnreal Engineは、世界中で多くのユーザーに利用されている開発環境です。

ゲームやアプリの内容や機能はもちろん重要ですが、視覚的な効果や見やすさも求められます。

そのため、開発を効率化するために、グラフィック素材を「アセット」として使用することが一般的です。

実際にゲームやアプリを開発できなくても、素材を作成してアセットとして公開し、世界中のユーザーに販売することが可能です。

---

主なアセットの種類（アセットとは）

UnityやUnreal Engineで活用されるアセットには、以下のような種類があります。

• 3Dグラフィック
• 2Dグラフィック
• オーディオ
• ツール
• エフェクト
• テンプレート
• AI
• アドオン
• エッセンシャル
• WEB3

Asepriteは、主に2Dグラフィックとアニメーションを制作するためのソフトウェアで、以下のようなアセットを作成できます。

• 2Dグラフィック（アニメーションを含む）
• 2Dエフェクト（アニメーションを含む）

---

2Dキャラクターのアニメーション

ファミコン版の「ドラゴンクエスト」のような2Dキャラクターの歩行アニメーションを想像してみてください。Asepriteで作成したアニメーションは、GIFやスプライトデータとして出力可能で、UnityやUnreal Engineでオブジェクトにアニメーションやタイミングを設定できます。

さらに、床や壁、建物、家具、森や山などの地形を表現するためのグラフィックも作成できます。また、アイコンやカーソル、UI（メニュー画面やスコア表など）のデザインも行えます。アニメーションが不要な場合は、PNG形式で出力することも可能です。

---

HD-2Dの人気

HD-2Dは、3D空間に2Dキャラクターを表示するスタイルで、最近注目されています。たとえば、「オクトパストラベラー」や「ドラゴンクエストIII」などがこのスタイルを採用しています。このスタイルは、キャラクターのデフォルメやアニメに馴染みのある日本のユーザーに特に人気があります。

---

Asepriteでエフェクトを作る

Asepriteを使用すると、ダメージ、炎、爆発、電気、凍結などのエフェクトを2Dで表現できます。これらのエフェクトは、ゲームやアプリの操作感や没入感を高める重要な要素です。

UnityやUnreal Engineに備わっている立体的なパーティクルやエフェクトと組み合わせることができ、エフェクトを2Dに絞ることで処理負荷を軽減することも可能です。

Asepriteでスプライトデータを作成する方法

前置きが長くなってしまいましたが、ここからAsepriteを使ってアニメーションをスプライトシートにエクスポートする方法の解説です。

アニメーション作成の基本部分にも触れていますが、すでにAsepriteを使ってアニメーションを作成している場合は、一気にスクロールして頂いても構いません。

1.Asepriteの新規作成と画像サイズの調整

まずAsepriteを起動します。今回は簡単なサンプルとして、歩行アニメーションを作成します。

画像サイズは横64×縦64ピクセルに設定しました。

画像サイズは必要に応じて大きくすることもできます。

2.アニメーションの骨組みを作成する

まずはアニメーション全体のバランスをみるため、棒人間のようなシンプルな形状を描きます。
あらかじめ位置やポーズを下書きとして作成し、あとで細かい部分を加筆修正すると効率的です。

レイヤー１上の「１」と表示されている部分を右クリックし「新規フレーム」を選択すると、新しくフレームを追加することができます。

このサンプルでは、１フレーム目に棒人間が横向きで立っている状態です。

３.フレームを追加する

上の図は２フレーム目の画像を、消しゴムとペンツールを使って修正したものです。

棒人間の左右の足を開いたように書き直し、画像全体の高さを少しだけ下げて重心が下がっているような表現を加えてみました。

この状態でアニメーションを実行するとこのような感じです。
（GIF画像としてエクスポートしたものです）

１フレームと３フレーム目が同じで、まだ動きになめらかさはありません。

中間のフレームを追加する

もう少しアニメーションを滑らかにするために、各フレームの間に新しくフレームを追加します。

１フレーム目と３フレーム目の間（新しく作成した２フレーム目）の足の開き具合を半分くらいの目安で書き直します。

先ほどのアニメーションよりも、動きが滑らかになりました。
アニメーションの動きや長さが気に入るまで、修正します。

下絵に沿って画像を修正する

下絵を元に画像を修正していきます。フレームを跨いで同じ画像を使用したい場合は、範囲指定とコピーを使うと簡単です。このサンプルではアニメーションのループに５フレーム目が不要になったので削除し、手の動きも追加しています。

ここまでの作成したアニメーションをGIF画像としてエクスポートすると、上の図のようになります。

アニメーションのバリエーションを増やす

UnityやUnreal Engineでゲームを作る場合、歩行アニメーションだけでなく、ジャンプや梯子を上る動作、攻撃やガッツポーズ、待機状態（立っているだけの状態）など、様々なアニメーションが必要になることもあります。

Asepriteでは、レイヤーを分けることで複数のアニメーションを一括でエクスポートすることもできます。

スプライトシートにエクスポートする

先ほど作成した歩行アニメーションをスプライトシートにエクスポートします。

Asepriteのメニューから「ファイル」→「エクスポート」→「スプライトシートのエクスポート」を選択します。

作成したアニメーション（４フレーム分）がひとつの画像（スプライトシート）にまとめられました。

アニメーションのバリエーションが複数ある場合は、２段以上の画像が出力されます。

スプライトシートのメリット

パフォーマンス向上:

スプライトシートを使用すると、複数のスプライトを一つの画像ファイルにまとめられ、ゲームエンジンが画像を読み込む回数を減らすことができます。これにより、メモリ使用量が減り、パフォーマンスが向上します。

描画の最適化:

スプライトシートを利用することで、描画処理が効率化され、フレームレートが安定します。特に、モバイルデバイスや低スペックのハードウェアでは、描画の最適化が重要です。

管理の簡素化:

アニメーションに必要な全てのフレームを一つのファイルにまとめることで、管理が容易になります。個別のファイルを扱うよりも、アセットの整理が簡単になります。

迅速なアニメーション再生:

スプライトシートを使うことで、アニメーションをフレーム単位で簡単に再生できるため、動きの調整やプレビューが迅速に行えます。

テクスチャバッファの効率的使用:

スプライトシートを使用することで、テクスチャバッファ内のスペースを有効に活用できます。複数のスプライトが一つのテクスチャに収まるため、GPUに負担をかけずに多くのグラフィックを表示できます。