入門書を2周3周してようやくUnityが体に馴染んできたので、練習がてら汎用性の高そうな2Dアクションゲーム向きの「静止(アイドリング)・歩く・ジャンプ(降下アニメーションあり)」ができるプレイヤーを作ってみようと思います(注:ロックバスターは打てません)。
プレイヤーの基本的な動きには和尚本でおなじみUnity2Dの超人気書籍「Unityの寺子屋(以下、和尚本2)」のサイドビューアクションのスクリプトを使用し、主にこの記事ではアニメーションでアレンジを加えてます。
なお書籍内のスクリプトは著作物なので部分的に引用するに留めます。和尚本2が手元にある前提で話を進めますのでその点ご了承ください。
完成形はこちら
先にこの記事の完成系をお見せしておきます。
スプライト(画像)変えれば色んなゲームで使えそうですよね!プレイヤーの動きのタイプ・操作感としては「ロックマン」っぽい感じ(あくまでっぽい)。
方向キー入力した瞬間から最高速度で移動速度は常に一定、空中でも地上と同じように左右に移動できるのがポイントです。
今回使用したアセット(無料)
![Sunny Land - Unity Asset Store](https://blog.qs-grct.com/wp-content/uploads/2018/10/Sunny-Land-Unity-Asset-Store.png)
ロックマンの画像をパ◎るわけにはいかないので、それっぽいアセットを使いました。
スクリプトのサンプルはありませんが、プレイヤーだけでなく敵キャラやステージのスプライトも一通り揃っているのでこのアセットだけでもそこそこゲームが作れてしまいそうです。
今回は対応しませんがはしごの登り降り等のスプライトも含まれているので、さらに細かいアニメーションを加えようと思った時も活用できますね。
準備
本題に入る前にまずは準備から。
Playerゲームオブジェクトと動作確認用の簡易なステージ(床)を用意します。
床を適当に作成
とりあえず床がないと確認しようがないので先に適当に作っておきましょう。Boxcollider2Dコンポーネントをあててblockレイヤーに所属さえさせればどんなものでも◎。もちろん和尚本のステージを使ってもOKです。
自分はアセットに含まれていたスプライトを使ってこんな感じで用意しました。
![アクションゲームの床を用意02](https://blog.qs-grct.com/wp-content/uploads/2018/10/d8da4f0d3c8f0f697c4ed7cd75337fd1.png)
Playerゲームオブジェクト作成
インポートしたSunny Landアセットのスプライトをシーンビューにドラッグ&ドロップしてプレイヤーゲームオブジェクトを作成します(和尚本読者なら説明不要ですね)。
注意点としては、今回使用したアセットは画像サイズがかなり小さいので、スプライトを選択してImport SettingsからPixels Per Unitを変更するかゲームオブジェクトのScaleを変更した方がいい感じになるかなと思います。自分はPixels Per Unitを100から「15」に変更して使用しました。
![プレイヤー用スクリプトのスプライトの設定](https://blog.qs-grct.com/wp-content/uploads/2018/10/ae87a5565ace481fa0b91aadb00d1b6e.png)
Pivotをbottomにするのも忘れずに。centerのままだと接地判定用のLineCastが地面(blockレイヤー)に届かずジャンプできません。
設定を変更したら静止状態のスプライト(player-idel-1)をシーンビューにドラッグ&ドロップしてPlayerゲームオブジェクトを作成します。名前も変えておくと良いと思います。自分は「Player」としました。
![Unity2Dでアクション - プレイヤーゲームオブジェクトの作成](https://blog.qs-grct.com/wp-content/uploads/2018/10/884a9f93676e947e3487b7d70ca5da8f.png)
和尚本スクリプトをアタッチ
Playerゲームオブジェクトを作成したらに和尚本2のサイドビューアクションのPlayerManager.csスクリプトをアタッチしましょう。
![和尚本2のPlayerManager C#スクリプトをアタッチ](https://blog.qs-grct.com/wp-content/uploads/2018/10/661bda8556bdb155f6219a9030deb600.png)
Rigidbody2D、Collerider2Dコンポーネントのアタッチも忘れずに。Rigidbody2Dの設定はお好みで。コライダーは以下のような感じで設定しました。
![Playerのコライダー設定例](https://blog.qs-grct.com/wp-content/uploads/2018/10/2c119266e9ff69f2a7723b1259d627d4-1024x600.png)
どうでもいい話ですが個人的にFreeze Rotation Z固定するの忘れがちです。
↓よくこうなる。
![Freeze Rotation Z固定を忘れ](https://blog.qs-grct.com/wp-content/uploads/2018/10/79bd489a7dff3678270779e845a58498.png)
キーボード入力で操作できて以下のようになっていればひとまずプレイヤーの準備は完了です。この状態にアニメーションを追加していきます。
![Unityアクションロックマン風_アニメーションなし状態](https://blog.qs-grct.com/wp-content/uploads/2018/10/81e9b7c374742097c7dbabd064efab4d.gif)
「静止」と「歩く」のアニメーションを作成
![アニメーションの比較](https://blog.qs-grct.com/wp-content/uploads/2018/10/2a664202e804f4c402912343c0e6180c.gif)
さて、ようやくここからが本題です。
和尚本2でもプレイヤーは歩くスプライトアニメーション(walk@Player)が適用されていますが、プレイヤーが静止しているときと歩く時でアニメーションは共通でした(静止している時も歩くアニメが実行)。
これを静止(アイドリング)状態と歩くアニメーションをそれぞれ別に用意して適用していきます。
静止(アイドリング)状態のアニメーション追加
まずは静止状態のアニメーションクリップを作成します。
Playerゲームオブジェクトを選択した状態でメニューの「Window」>「Animation」>「Animation」からアニメーションクリップ作成画面を開き「Create」で作成します。クリップ名は今回は「idle@Player」としました。
![Unity2D - アニメーションクリップ操作](https://blog.qs-grct.com/wp-content/uploads/2018/10/0341d7569efd331054ca498043f24812-1024x514.png)
あとはplayer-idel-1〜4の4枚のスプライトをクリップにドラッグ&ドロップしてアニメーションの間隔を適当に調整すればOKです。注意点としては最後のスプライトをもう一つ追加することを忘れないようにすることくらいでしょうか。
![Unity2D - アニメーションクリップでは最後のスプライトを2枚続けるのがポイント](https://blog.qs-grct.com/wp-content/uploads/2018/10/976f4deac2ab35080caf196d35544a7d.png)
こうすることで1枚目が0〜0.1秒まで、2枚目が0.1〜0.2秒まで、3枚目が0.2〜0.3秒まで、4枚目が0.3〜0.4秒まで再生されまた0秒目に戻り1枚目…という感じでアニメーションします(最後のスプライトを続けないと0.3秒になった瞬間0秒のアニメーションに戻ってしまうので4枚目が省かれたような状態になってしまいます)。
![Unty2Dアクションロックマン風_静止アイドリングアニメーション作成方法](https://blog.qs-grct.com/wp-content/uploads/2018/10/54e0d3eeb1301d7abb88aeeb15440505.gif)
↑こんな感じになっていればOKです!
同様に歩くアニメーションも作成
同様の手順で「歩く」アニメーションクリップも作成します。
同じゲームオブジェクトに新しいクリップを追加を追加したいときは左上のクリップ名(今だとidle@Player)が表示されている部分をクリックして「Create New Clip」を押します。
![アニメーションクリップ新規追加 - Unity](https://blog.qs-grct.com/wp-content/uploads/2018/10/2881ee7055797f4207dda035e41af4c9.png)
クリップ名は「walk@Player」としました。
![歩くアニメーションクリップ作成](https://blog.qs-grct.com/wp-content/uploads/2018/10/5137cc00e64f5d651327f23c2559e7fa-1024x449.png)
あとは先ほどと同じように今度はplayer-run-1〜6のスプライトを使用してクリップを作成しましょう。
![Unity2D - 歩くアニメーションクリップ作成](https://blog.qs-grct.com/wp-content/uploads/2018/10/8b3b7437fee060aa89c449d11624366b.png)
静止・歩くアニメーションをPlayerに反映
idle@Playerとwalk@Playerアニメーションクリップが作成できたら一先ずここまでのアニメーション同士の関係性・切り替え条件を設定して、作成した静止と歩くアニメーションをプレイヤーに反映していきましょう。
改めて書き出すまでもないですが今回は以下のような仕様にしていきます。
<切り替え条件を整理>
- 何も入力していないときは静止(idle@Player)アニメーションを再生
- 左右いずれかのキーが入力されているときは歩く(walk@Player)アニメーションを再生
- 左右のキーが離されたらwalk@Playerを終了。idle@Playerに戻る
アニメーターコントローラーの設定(静止・歩く)
アニメーターコントローラーを開くと以下のような状態になっているはずです(配置はちょっと変えてます)。
![アニメーターコントローラーの設定](https://blog.qs-grct.com/wp-content/uploads/2018/10/5497a46a565d89582283dc1590456568.png)
この状態だと「Entry」から「idle@Player」へのトランジションしかないので、プレイヤーは静止中も歩いてる時も変わらずidle@Playerが再生され続けます。
今回はidle@Playerとwalk@Playerを相互に行き来できるようにしたいので「idel@Player→walk@Player」「walk@Player→idle@Player」の2つのトランジションを作成します。
![トランジションの作成方法02](https://blog.qs-grct.com/wp-content/uploads/2018/10/70581ab79658ed64c4103a92b9ffd07d.png)
歩くアニメーションの開始・終了をスクリプトで切り替えるためにトランジションに当てるパラメータを作成します。今回はbool型のパラメータを使用します。名前は「isMove」としました。
![アニメーションを切り替える条件となるパラメータを作成02](https://blog.qs-grct.com/wp-content/uploads/2018/10/5aa9e497df9772a7535781c3f650ee48.png)
パラメータを作成したらトランジションの設定をしていきましょう。
idle@Playerからwalk@Playerに伸びるドランジションは以下のように設定します。Conditions(アニメーション開始条件)に「isMove=true」を追加、Has Exit Timeのチェックを外しTransision Durationsも0にします(Has Exit TimeとTransision Durationsの設定は今後の全てのトランジションで同様の設定にします)。
![idelからwalkへのトランジション設定02](https://blog.qs-grct.com/wp-content/uploads/2018/10/124ca4df7b306aafcbab1ebc00887595-1024x512.png)
続いてwalk@Playerからidle@Playerのトランジションを設定します。違う部分はConditionsの「isMove=false」だけです。
![](https://blog.qs-grct.com/wp-content/uploads/2018/10/ab6283744b033a8aa2e7a1c4997b8fae-1024x512.png)
アニメーターコントローラーの設定(静止・歩く)はひとまずこれで終わり!
スクリプト修正(静止・歩く)
アニメーションの準備が出来たらあとは任意のタイミングでisMoveがtrue、falseに切り替わるようにスクリプトを修正します(追加しているのは2行)。
・・・中略・・・
void Update () {
・・・中略・・・
if (!usingButtons)
{
float x = Input.GetAxisRaw ("Horizontal");
if (x == 0)
{
moveDirection = MOVE_DIR.STOP;
animator.SetBool("isMove", false);
}
else
{
if (x < 0)
{
moveDirection = MOVE_DIR.LEFT;
}
else
{
moveDirection = MOVE_DIR.RIGHT;
}
animator.SetBool("isMove", true);
}
}
if (Input.GetKeyDown ("space"))
{
PushJumpButton ();
}
}
・・・以下略・・・
Updateメソッド内でキーの入力状況を監視しているので、左右のキー入力がない状態ではisMoveをfalse、ある場合はisMoveをtrueにしアニメーションを切り替えるようにしています。
以下のようにジャンプしているしてないに関わらず、左右に移動してなければidle@Player、左右に移動しているときはwalk@Playerアニメーションが再生されていればOKです。
![【GIF】Unityアクション2Dサンプル(静止・歩くアニメーション追加状態)](https://blog.qs-grct.com/wp-content/uploads/2018/10/14c94b2420aebcb908b06de517684235.gif)
だいぶそれっぽくなってきました!
これでアレンジの2/3は終了。最後に仕上げとしてジャンプと降下のアニメーションを追加していきます。
「ジャンプ」と「降下」アニメーションを追加
アニメーションが切り分ける条件は後ほど整理するとして、とりあえずジャンプ中と降下中のアニメーションクリップを作成してアニメーターコントローラーの設定まで済ませましょう。
アニメーションクリップ追加(ジャンプ・降下)
アニメーションクリップの作り方は静止や歩きと同様なので詳細は割愛。
ジャンプ用のアニメーションクリップにはplayer-jump-01を使用します。クリップ名は「jump@Player」とします。
![ジャンプアニメーション - Unity2Dアクション](https://blog.qs-grct.com/wp-content/uploads/2018/10/948321a3a4a348c59c1a0039fdb0ad6a.png)
降下用にはplayer-jump-02を使用します。こちらのクリップ名は「fall@Player」とします。
![降下アニメーション - Unity2Dアクション](https://blog.qs-grct.com/wp-content/uploads/2018/10/2c699858dcd395bcf3c81d26c0b8b0f5.png)
アニメーターコントローラー修正(ジャンプ・ 降下)
jump@Playerとfall@Playerが追加されているのでトランジションを以下のように追加しましょう(ちょっと配置変えてます)。
![アニメーターコントローラーの編集 - ジャンプと降下を追加](https://blog.qs-grct.com/wp-content/uploads/2018/10/06b79d6bb29596db4ec846950a3e89bc.png)
isMoveを追加したときと同じようにisJump、isFallというbool型のパラメータを追加で用意します。これはそれぞれジャンプ中か降下中かの判定用に使用します。
![ジャンプ用、降下用のパラメータを追加作成](https://blog.qs-grct.com/wp-content/uploads/2018/10/c5e371641d0ff87e452ff5316d7d0165.png)
パラメータを用意したらこれまた先ほどと同様にトランジションの設定をしていきます。Any State→jump@Playerのトランジションは以下のようにします。条件の部分以外は先ほどと同様ですね。
![Any_StateからJumpへのトランジション設定02](https://blog.qs-grct.com/wp-content/uploads/2018/10/e10c5076c47982c326459f76337e175c-1024x512.png)
あとはConditions以外の部分は同じです。各トランジションに以下のようにConditionsを追加しましょう。
![Conditions設定状況 - Unity2D アクション用プレイヤー](https://blog.qs-grct.com/wp-content/uploads/2018/10/a068dedca2b0c1bc6ee71ded72e0a257.png)
これでアニメーションクリップとアニメーターコントローラーの設定は終了です。
「ジャンプ」「降下」アニメーションをプレイヤーに反映
最後にジャンプと降下のアニメーションを追加していきますが、その前にどういう条件でアニメーションが切り替えるのかを整理しておきます。
<切り替え条件を整理>
- ジャンプ可能な状態でジャンプボタンが押されたらジャンプ(jump@Player)アニメーションを再生
- ジャンプ中にプレイヤーのY方向の速度が0より小さくなったらジャンプアニメーションを終了。同時に降下(fall@Player)アニメーションを再生
- ジャンプ中または降下中にblockレイヤーに接したらそれぞれのアニメーションを終了しデフォルト(idle@Player)アニメーションを再生
こんな感じで良さそうです。
以上を踏まえてスクリプトを修正していきます。
スクリプト修正(ジャンプ・降下)
以下のように追記します。
・・・中略・・・
void Update () {
canJump = // ・・・以下略・・・
// ジャンプ・降下アニメーション切り替え
if (canJump && rbody.velocity.y == 0)
{
if (animator.GetBool("isJump")) animator.SetBool("isJump", false);
if (animator.GetBool("isFall")) animator.SetBool("isFall", false);
}
else if (!canJump && rbody.velocity.y < 0)
{
if (animator.GetBool("isJump")) animator.SetBool("isJump", false);
if (!animator.GetBool("isFall")) animator.SetBool("isFall", true);
}
・・・中略・・・
// ジャンプボタンを押した
public void PushJumpButton ()
{
if (canJump)
{
goJump = true;
animator.SetBool("isJump", true);
}
}
・・・以下略・・・
基本的には先ほど整理した通りなのですが、12行目の条件に「rbody.velocity.y < 0」を加えているのはジャンプ直後にLinecastがblockレイヤーに触れてジャンプアニメーションが終了してしまうのを防ぐためです。
つまりプレイヤーのY方向の速度が0以外のときはY方向の速度がマイナス(つまり落下中)のときのみisJumpをFalseにしジャンプアニメーションを終了しています。
完成!
ということで完成です!
こんな感じでちょっとしたステージを作るだけでもだいぶゲームっぽくなりますよね。
正直もう少しシンプルにできそうだなーという気もしますが、とりあえず今回はこんなかんじで。
結構汎用性もありそうなものが作れたし、いい勉強にもなりました。アニメーション周りもちょっと苦手意識あったんですがだいぶ慣れてきた気がします。
ちなみに今回はロックマンっぽいにチャレンジしましたが、マリオっぽいだとおもちゃラボさんの以下の記事がとても参考になります。難易度はこちら(マリオ)の方がグッと高くなりますが、とっても勉強になるので一度読んでみることをおすすめします。
Unityでマリオっぽいゲームを作るのに必要な5つのこと – おもちゃラボ
またそのうち+アルファ的な動作(ダッシュ、スライディング、はしごの上り下り、..etc)の追加なんかにも挑戦してみたいですね。
とりあえず今回はこんなところで!