「UEで２Dゲームを作りたいけどネットで調べても作り方がよくわからない！」
そんな悩みを解決する２Dスプライト画像を使ったアニメーションの作成方法を紹介していきます。
UEを触ったことがない方でも大丈夫！簡単なので一緒に作ってみましょう！
なんでUEで２Dゲームを作るの？
まずはこれです。ってなります。実際UEは３Dに強いイメージで２Dゲームを作ろうとするとオーバースペックな気がしますし、知識や経験がない方であればなおさらネットで調べるとたくさん情報が出てくるUnityのほうが作りやすいと思います。私もそう思います。
そもそも２Dゲームを作るならUnityで良くない？
ですよね。
でも違うんです。よっぽどのことがない限りは「使い慣れているUEでゲームを作りたい！」や「将来的にSteamで販売したい！」という理由などで使用するゲームエンジンを１つに絞りゲームを作りたい人もいるんです。きっと。
なので今回は手始めに２Dのスプライトアニメーションでキャラクターを動かしてみたいと思います。
安心してください、実際に作ってみてとても簡単に作ることができたので作り方さえ覚えてしまえばいつでもUEで２Dゲームを作ることができます。
実装の準備をする
プロジェクトの作成
まずはプロジェクトを作成していきましょう。
サンプルテンプレートは必要ないので何もないブランクを選択しましょう。プロジェクト名、プロジェクトの場所は自分の好きな名前、場所で問題ないです。
準備ができたら右下の作成ボタンを押しましょう
プロジェクトが作成できたら今度はレベルを作りましょう。今表示されているデフォルトのレベルだと広大なフィールドが広がっているのでもう少しコンパクトで小さめのフィールドを新しく作りましょう。
右上のファイルから新規レベルを選択
ベーシックを選択して作成
これで小さめのフィールドが作成できたと思います。作成できたら忘れずに右上の保存ボタンから保存しておきましょう。場所は好きなところで大丈夫です。私は以下の画像のようなディレクトリ構成にしています。
2Dアセットの準備
次にアニメーションしたいキャラクターなどの２Dスプライト画像を用意しましょう。
自分で既に用意している方は大丈夫ですが用意できていないという方はネットから適当に拾って来ましょう。
実際はテスト用で今後自分で描いたり、依頼して描いてもらったものを差し替えると思いますのでなんでも大丈夫です。
私はキャラクターの8方向画像を用意しました
８方向画像はこちらのサイト「Dispell.net」から使用させていただきました。
スプライトアニメーションを作成
準備したアセットをインポート
準備ができたら実際にUEの画面を操作して作っていきましょう。
まずは準備したアセットをインポートしてください。好きな場所にドラッグ＆ドロップするだけです。
スプライトを抽出
インポートができたら次にインポートした画像を右クリックしてスプライトアクション→スプライトを抽出を選択してください。
そうすると以下の画像のような先程インポートした画像が表示されていると思います。この状態からスプライトを分割して実際にアニメーションで使用する形に抽出していこうと思います。
この状態から分割の設定をしていきましょう
ひとまず設定のポイントは以下の２つです。
・スプライト抽出モード
画像にα設定がされていれば自動で分割してくれますがうまく分割されない場合はスプライト抽出モードをGridにして以下のグリッドの設定値をもとに手動で分割しましょう。
・セルの幅、高さ
手動で分割する場合はセルの幅を設定してあげましょう。
ここでの設定値は画像サイズをアニメーションの数で割ってあげた値を入れましょう。今回の画像の場合は
128（画像の幅）÷4（アニメーションの数）で計算した32をいれています。高さも同じように計算して入れましょう。
分割したスプライトをアニメーションさせる
うまく分割できたら分割したものを組み合わせてアニメーションさせていきましょう。
アニメーションさせたいものを順番にまとめて選択しましょう。選択したら右クリックしてフリップブックを選択しましょう。
フリップブックを開くと選択したスプライトが繋がってアニメーションしていると思います。
ここでの設定はひとまず右上のFrames Per Seondを値を変更してあげるとアニメーションのスピードが変更されます。
私はFrames Per Seondの値を５に設定しました
設定して保存したら同じようにIdleや移動、走りなどアニメーションごとにいい感じのアニメーションスピードで作成してみてください。
プレーヤー操作の実装
キャラクターのアセットが使える形になったら今度はキーボードなどの入力を受け付けてあげましょう。
InputActionの作成
最初に移動やジャンプなどの行動をActionとして作成していきましょう。右クリックから入力→入力アクションを選択して移動のInputActionを作成します。
わかりにくいですが、IA_MoveのValueTypeはAxis2Dを選択しています。
入力マッピングコンテキスト作成
今度は先ほど作成したアクションを任意のキーボードやコントローラーのボタンにマッピングするために入力マッピングコンテキストを作成します。
同じように右クリックから入力→入力マッピングコンテキストを選択しましょう。
Mappingsのプラスボタンを押してIA_Moveを選択、WSADキーをマッピングしました。ついでにコントローラーもマッピングしてみました。
プレイヤーブループリントの作成
入力を受け付ける準備ができたら今度はプレイヤーのブループリントを作成していきましょう。
同じように右クリックからブループリントを選択して検索欄に「paper」を入れてください。そうするとpaper characterというものが出てくるはずなのでそれを選択してください。
選択したらカプセルコンポーネントの下にスプライト、スプリングアーム、カメラを追加しました。
今度はスプライトに最初の方で作成したフリップブックのキャラクターをなんでもいいので設定しましょう。自分は自分はIdle状態がないので適当に設定しました。
設定できたらBeginPlayに画像のようにインプットとプレイヤーの移動処理を作成してください。難しいことは何もなく、そのままノードを検索すれば出てくると思います。
GameManagerの設定
最後にゲームモードクラスを作成します。ゲームモードクラスは同じように右クリックからブループリントを選択して真ん中あたりにあるゲームモードベースを選択して作成してください。
ゲームモードクラスを開いたら真ん中のデフォルトのポーンクラスを先程作成したBP_Playerに変更してください。これで実行した際にデフォルトで自分が作成したプレイヤーのブループリントが選択されます。
作成できたら試しに実行してみてください。うまく移動できていると思います。
８方向アニメーションの実装
実際にキーボードやコントローラーで移動ができるようになったら今度は上下左右の移動に対してキャラクターが移動方向を向くようにしてあげましょう。
PaperZDのアセットをインストール
まずは２Dアニメーションを簡単に作成するためのアセット「PaperZD」をインストールしていきます。これを使うと簡単に移動方向に対して適切なアニメーションを実装することができます。
安心してください、無料です！
まずはFabから「PaperZD」と検索して自分のライブラリにいれましょう。入れることができたら次はエピックゲームズランチャーのライブラリからPaperZDを自分のインストールしているエンジンにインストールしてあげましょう。見つからないときはフィルター条件のカテゴリーをすべてにしてみてください。
上手くインストールできたらプラグインからPaperZDを追加してください。その前に再起動してくださいというメッセージが出た方やプラグインから検索しても見つからない方は再起動してみてください。
アニメーションソースの作成
インストールできたらアニメーションソースを作成していきます。アニメーションソースは右クリックからPaper2Dの下にPaperZDが追加されているはずなのでそれを選択してください。
そしたらIdleやMoveのアニメーションを作成していきましょう。
左上のAdd Newから作成してIdleと名前を変更。その後にIdleをダブルクリックで選択してください。
そうすると右側に入力方向に対して最初の方で作成したフリップブックを設定するところがあるのでそこに設定してあげてください。
ひし形の上や下の部分を選択するとそれぞれフリップブックを設定する事ができます。
設定できたら同じようにMoveも作成してみましょう。
上の画像のひし形の上にあるN:4となっている部分がありますが、これを４→８に変更すると８方向の入力に対してそれぞれのフリップブックを設定する事ができます。
アニメーションシーケンスを作成
まずはBP_PlayerにPaperZDAnimationを追加してください。
そのあとにアニメーションシーケンスにアニメーションを設定していきましょう。
変数にBP_Playerを作成して以下の画像のように設定してみてください。ノード名を検索すれば出てくるはずです。
作成できたらBP_PlayerのPaperZDAnimationに設定してください。
PaperZDのところに先程作成したアニメーションシーケンスを設定してその下をスプライトにしましょう。設定できたら実行してうまく動くかどうか試してみてください。
さいごに
UE5で２Dのアニメーションの実装方法を紹介しました。これでUEで２Dゲームを作りたいと思ったときにいつでも作れるようになると思います。