【技術記事】Unityで2Dキャラクターの移動を実装する
ごあいさつ
どうも、3Dアクションエロゲを開発中のゆみねこです。
今回は作業の進捗とは全く関係のない、技術記事になります。
Ci-enで読みたい人がどれだけいるのか未知数ですが、どのみちどこで書こうが技術記事ってウケが悪いので、あまり気にせず書いていこうと思います。
2Dゲーム制作で参考にしたい方、ゲーム開発の裏側が知りたい方はぜひどうぞ！
好評ならシリーズ化するかもしれません。
最初に
今回のやり方は、数多くある方法のうちの１つに過ぎず、唯一の正解ではありません。
実用的な範囲で、なるべくUnityの機能を使ってラクして実装することを１つの目標にしているので、プログラミングの話はほとんど出てきません。
追記
Ci-enの画面がバグって１回下書きがぶっ飛んでいるので、だいぶモチベが落ちた状態での執筆となります。
内容が雑だったらごめんなさい。（自動保存ぐらい付けとけよ）
アセットの準備と登録
キャラクターを歩かせるには、対応した画像アセットが必要です。
今回はツクールMVに同梱されている歩行グラフィックを使っていきます（利用規約が緩和され、Unityでも使用OKになりました。ありがたや）
UnityのProjectビューに突っ込みます。
このままでは全キャラが結合していて使えないので、画像を切り分けていきます。
切り分ける前に、先に画像の設定を変更します。
ドット絵なので滑らかにするフィルタを切ったり、いろいろ変えていきます。
横12・縦8の96枚に分割します。
他にも、ピクセルサイズを指定したり画像を識別しておまかせで分割することもできます。
ついでに、PivotをBottomにして画像の中心点を足元に移動させます。
そうしたほうが何かと都合がいいからです。
分割されました。
これはあくまでUnity上で認識されているだけで、実際に分割された画像ファイルは作成されていないので容量の節約になります。
気にせずどんどん活用していきましょう。
アニメーションの作成……の準備
分割した画像を切り替えるアニメーション作成……の下準備をします。
アニメーションをさせるならほぼ必須の工程であり、解説記事も多いので省略気味に行きます。
Playerオブジェクトの作成
空のGameObjectを作成し、Playerと名付けます。
子要素に同様の空GameObjectを作成し、名前をPlayer Renderとします。
アニメーションなどの描画処理は、Player Renderに追加していきます。
Playerの実体とアニメーションを分けることで、例えば透明化（画像だけオフ）にしたり、画像ではジャンプしているが座標は変えたくない、といった処理が簡単に実装できます。
Player Renderオブジェクトに、AnimatorとSprite Rendererをアタッチします。
それぞれアニメーションの再生機能と、画像の表示機能です。
上下左右の4方向のAnimation Clipファイルと、そのアニメーションの切替を制御するAnimator Controllerファイルを作成します。
作成したら、先ほどのPlayer RenderオブジェクトにAnimation Controllerをアタッチしておきます。
この時点では、ファイルを作っただけでまだ中身は空っぽです。
アニメーションの編集は後に行います。
ついでに、上下左右のAnimation Clip全てのループを有効にします。
歩行する限りループしてほしいですからね。
Animator Controllerを編集します。
ステートマシンと呼ばれる機能で管理されており、画像のように矢印で切り替えを視覚的に制御できるスグレモノです。
直接ここにアニメーションを放り込んで制御してもいいですが、今回はブレンドツリーを活用していきます。
パラメータに応じて自動でアニメーションを切り替えてくれる超便利な機能です。
まず、ブレンドツリーのためのパラメータであるXとYをFloat型で作成します
（Blendは、ブレンドツリー作成時に勝手に作成されます）
ブレンドツリーの編集画面にて、上下左右のアニメーションを登録します。
例えばXが0、Yが1なら、Walk Up（上方向）のアニメーションが再生されます。
スティック入力などの中途半端な値でも、いい感じに近いアニメーションを選んでくれます。マジ便利。
さて、これで下準備は完了です。
いよいよアニメーションを作成していきます。
アニメーションの作成
いろいろ方法はありますが、今回はSprite LibraryとSprite Resolverを使った方法を解説します。
割と最近Unityに追加された機能で、とにかくシンプルで便利です。
Sprite Libraryの作成
まず先に、Sprite Libraryを作成します。
読んで字のごとく、複数の画像をまとめてカテゴリや名前で管理する機能です。
4方向分を登録します。
分かりにくいですが、登録したら必ずラベル名を汎用的なものに変更しましょう（デフォルトだと画像ファイル名が割り当てられています）
なぜかというと、キャラの画像をSprite Libraryひとつで切り替える際に、カテゴリ名とラベル名が一致している必要があるからです。
このように、Sprite Libraryの名前を統一しておくと、画像の切り替えがとても簡単になります。
逆に言うと、キャラクターの数だけSprite Libraryを作る必要があります。
その分、これから作るアニメーションは流用できるので、この辺は割り切りましょう。
単純作業なので、やろうと思えばEditor拡張やバッチファイルで自動生成できると思います。
今回は本題から逸れるのでやりませんが。
Sprite ResolverとSprite Libraryのアタッチ
先ほどのPlayer Renderオブジェクトに、Sprite ResolverとSprite Libraryをアタッチします。
これで、Player Renderオブジェクトに画像の管理および切り替え機能が追加されました。
Animation Clipの編集
Player Renderオブジェクトを選択した状態で、Animationウィンドウを開きアニメーションを編集していきます。
Animationウィンドウの左上で、アニメーションを切り替えられます。
まずは上方向から作っていきます。
赤丸を押して記録状態にして……。
アニメーション開始直後のカテゴリとラベルを選択します。
片足を前に出しているものが好ましいです。
すると、対応する位置にキーが打たれます。
ずれていたら、マウスでドラッグして0に移動させましょう、
この調子で、キーを打ち込んでいきます。
1/4 の位置に 両足を揃えた画像
2/4 の位置に もう片足を出した画像
3/4 の位置に 再び両足を揃えた画像
4/4 の位置（終了位置）に、開始時と同じ足を出した画像
Animationウィンドウの再生ボタンを押してプレビューしてみましょう。
正しく動いていることを確認します。
Sprite Resolverを見ると、アニメーションによって切り替わっていることが確認できます。
Sprite Resolverのカテゴリとラベル名を、Animationで切り替えているわけです。
秒数ベースで書いてしまいましたが、フレームレートで数えたほうがやりやすい場合は右上を右クリックすれば、表示方法を変更できます。
フレームレート準拠になりました（上部の数値が変わっています）。
60フレームで動作するアニメーションということですね。
Samplesの値を変えれば、フレームレートを変えることもできます。
そんな感じで、4方向分を作っていきましょう。
この作業は一度だけでOKです。
新しいキャラを作る場合にも、アニメーションを作り直す必要はありません。
移動処理
Rigidbody2DとColliderのアタッチ
座標移動の処理を実装します。
これもいろいろやり方がありますが、今回は物理演算を使います。
地味に重力の無効化やZ軸回転の無効化もしているので、忘れずに設定しましょう。
じゃないと悲惨なことになります。
当たり判定も設定しています。見づらいですが黄緑の円です。
ここは好みで大きさを変えてください。
円形にすると、キャラ同士がぶつかった際や曲がり角でインコースを攻めた際にスムーズに滑って回避してくれます。
移動処理のコーディング
移動処理のコーディングをします（唐突）
画像が縦長になるので切っちゃいましたが、全ソースコードが読みたい方のためにフォロー限定（無料）で載せておきます。
そんなに難しいことはしていません。
キー入力を受け取って、その値に応じてアニメーションや移動量の更新をしているだけです。
スクリプトのアタッチ
Playerオブジェクトに、先ほどのスクリプトをアタッチして、テストプレイを実行します。
結果発表～～～！！！
WASD、または方向キーで正常に動いていることを確認します。
お疲れ様でした。
フォロワー以上限定無料
記事の全文が読めます。
無料
無料プラン(月額0円)以上に加入している場合のみ、この記事にコメント投稿・閲覧ができます
※バックナンバー購入は対象外です。
プラン一覧