少し間が開きましたが、Unityのローグライクチュートリアルのシリーズ2です。
正直ブログ記事にまとめる方がチュートリアル進めるより大変です笑
前回は完成品の説明やチュートリアルの進み方の説明などをまとめましたが、今回はアニメーションを作成したり、プレハブ(なんとなくの理解ですがGameObjectのテンプレ的な)を作成します。
チュートリアル2概要
さっき軽く書きましたが、チュートリアル2は以下な感じです。
- プレイヤーと敵のプレハブ作成
- プレイヤーと敵のアニメーション作成
ここから実際にゲームを作成していきます。
プレイヤーのアニメーションとプレハブ作成
プレイヤーのプレハブを作っていきますが、まず新しくシーンを作成します。Unity上部メニュー→ File → NewScene →(Unityのバージョンによっては下の画像の2Dを選ばないとダメかもしれません)
次にGameObjectを作ります。Unity上部メニュー → GameObject → Create Empty で作成して、名前をPlayerにします。(Hierarchyウィンドウから名前変更できます)
次にPlayerの待機アニメーションをセットします。Spritesフォルダの中に画像の素材(キャラや敵や壁など)があるので待機アニメーションを複数選択します。(選ぶのは下の画像な感じ)
選んだらそのままさっき作ったPlayerのGameObject(Hierarchy)へドラッグします。するとどこに保存するか聞かれるのでPlayerIdleの名前でAnimations/Animationsフォルダへ保存します。(フォルダが無いと思うので作ってください。)下の画像みたいな構成で大丈夫です。(AnimationControllersフォルダも作って大丈夫です)
保存したら、inspectorに2つのコンポーネント(Sprite RendererとAnimator)が追加されます。あと、Animations/AnimationsフォルダにPlayerのアニメーションコントローラが作成されると思うので、Animations/AnimationControllersフォルダへ移動します。
ここまで出来たらPlayerIdleアニメーションは出来たので、次にPlayerChopアニメーションを作成します。SpritesフォルダからChopのアニメーションを選択します。
PlayerIdleの時と同じようにPlayerのGameObject(Hierarchy)へドラッグします。今回はPlayerChopの名前でAnimations/Animationsへ保存します。
一旦先にPlayerHitアニメーションも作成します。SpritesフォルダからHitのアニメーションを選択して、PlayerのGameObjectへドラッグします。PlayerHitの名前でAnimations/Animationsへ保存します。
この状態でUnityの再生ボタンを押すと待機状態のプレイヤーが再生されるかと思います。ただ再生速度が速いので少し遅く設定します。
遅く設定するにはAnimations/AnimationContollersのPlayerをダブルクリックします。すると下のような画面(画像はチュートリアル9位のやつなので若干違うはずです)になるのでPlayerIdleを選びます。
PlayerIdleを選ぶとinspectorのspeedでアニメーションの速度調整が出来ます。
次にHierarchyのPlayerのGameObjectを選んで、inspectorのTag(上の方)をPlayerへ変更します。さらにLayerをBlockingLayerに変更します。(BlockingLayerは多分衝突とかの当たり判定的な役割らしいです)あと、Sprite RendererのSorting LayerをUnitsにします。(多分描画順序だと思います)
次にBoxCollider2DとRigidbody2DをAddComponentで追加します。Rigidbody2DはBodyTypeをKinematicにします。(プレイヤーが飛んだりすることなくマス目を移動するだけなので)
BoxCollider2DのサイズをX:0.9,Y:0.9にします。(これは隣のスペースと衝突しないように1より小さいらしいです)
ここまでできたら、HierarchyのPlayerオブジェクトをAssets/Prefabsへドラッグします。(Prefabsフォルダがなかったら先に作ってください)
これでPlayerのプレハブができました。同じ感じで次に敵のプレハブを作ります。
敵のアニメーションとプレハブ作成
今度は敵のプレハブを作りますが、その前にPlayerのGameObjectをHierarchyから削除します。(プレハブからいつでも復活できるので消して大丈夫です)
ちなみにPlayerのプレハブとほとんど手順は同じです。
Playerを消したらUnity上部メニュー→GameObject→Create Emptyを選択し敵のGameObjectを作って、名前をEnemy1とします。
次にEnemy1の待機アニメーションをSpritesフォルダから複数選択してHierarchyのEnemy1へドラッグします。(Player1の時と同じ)名前はEnemy1IdleでAnimations/Animationsへ保存します。
同じように攻撃アニメーションを選択してHierarchyのEnemy1へドラッグして追加します。名前はEnemy1AttackでAnimations/Animationsへ保存します。
この状態で再生を押すと敵の待機アニメーションが表示されるかと思います。
次にPlayerと同様に、inspectorのTagをEnemy、LayerをBlockingLayer、Sprite RendererのSortingLayerをUnits、BoxCollider2DとRigidbody2DをAddComponentで追加します。Rigidbody2DはBodyTypeをKinematicにします。
ここまで出来たらHierarchyのEnemy1をAssets/Prefabsへドラッグします。
これで敵1のプレハブが出来たので、そのまま2を作成します。2は今Hierarchyに残ってるEnemy1をEnemy2へ名前を変えて作成します。
名前を変えたらSpritesフォルダから敵2の待機アニメーションを複数選択して、Hierarchyへドラッグ。Enemy2Idleの名前でAnimations/Animationsへ保存します。
敵2の攻撃アニメーションも同じ様にHierarchyへドラッグします。Enemy2Attackの名前で保存します。
次にAnimations/AnimationsのEnemy1アニメーターコントローラをAnimations/AnimatorContollersへ移動してから開きます。Enemy2の状態(Enemy2Idle、Enemy2Attack)は不要なので削除します。(下の画像のようにします)
ここでEnemy2の状態を消すのは、後でEnemy2はEnemy1の状態を上書き(アニメーターオーバーライドコントローラを作成)するように設定するからです。
アニメーターオーバーライドコントローラを作成すると同じScriptを使いながら、Enemy1と2で違うアニメーションを再生することができるらしいです。(そこまで理解していない。。。)
アニメーターオーバーライドコントローラはProjectウィンドウの左上の+から作成できます。(下の画像参照)※Animations/AnimationControllersの下にEnemy2の名前で作成します。
Enemy2の名前で作成したら、上書きするアニメーションコントローラを選びます。今回はEnemy1を上書きするのでInspectorのControllerにEnemy1のAnimationControllersをドラッグします。
次にEnemy1AttackとEnemy1IdleのアニメーションをEnemy2AttackとEnemy2Idleで上書きするようにドラッグします。(下の画像な感じになれば大丈夫です)
あとEnemy2のGameObjectを選んでInspectorのAnimatorコンポーネントのControllerをEnemy2へ変更します。(下の画像参照)
ここまで出来たら再生してみてください。Enemy2のアニメーションが再生できれば完成です。
最後にEnemy2をHierarchyからPrefabsへドラッグしてプレハブを作成します。
プレハブができたらHierarchyからEnemy2を削除して、シーンを保存します。シーンの保存はUnity上部メニュー → File → Save as Scene?(Save as なんとか。切れてて謎)を選んでScenesフォルダへMainの名前で保存します。(フォルダがなかったら作ってください)
まとめ
かなり長くなりましたが、これでプレイヤーと敵のプレハブが出来たのでチュートリアル2は終了です。
文章と画像だけだと分かりづらい所もあると思うので、わからない所は本家の動画「https://www.youtube.com/watch?v=mmyr2l9dxoU」を見ると分かりやすいかもしれません。
次のチュートリアルは床や壁などゲームボードに必要なプレハブを作成します。
コメント
Spritesフォルダの中に画像が無い人へ
Scavengers_SpriteSheetの再生ボタンのような場所(▶)を押すと画像が表示されます
ちょっと詰まってしまったので後の人のために書き残して置きます