Unityに関連する記事です

 以下の内容で順番に実装を進めていきます。

 手順4〜8ではプレイヤーの分身となるキャラの作成、キャラの行動とアニメーションの制御について実装を行います。

 この手順では、キャラを設置するための地面用のゲームオブジェクトの設置と、キャラの設置を行います。

手順4 −キャラの作成−
 6.地面を設置する
 7.プレイヤー用のキャラを設置する



新しく学習する内容


・SpriteRenderer コンポーネントの Order in Layer プロパティ



6.地面を設置する

設計


 キャラをゲーム画面に設置するにあたり、まずは地面用のゲームオブジェクトを作成しておきます。
この地面のゲームオブジェクトにコライダーを用意することで、キャラが重力の影響を受けるようになってもゲーム画面上にしっかりと留まることが出来ます。
またこの地面のゲームオブジェクトをそのままゲームのスタート地点としても利用します。

 地面、とはいっても、地面そのものの形状を持つゲームオブジェクトはありません。
そのため今回は、小さいブロックの画像のゲームオブジェクトを複数並べて配置することで地面としての役割を実装します。


フォルダ役の Ground_Start ゲームオブジェクトを作成する


 ヒエラルキー上で右クリックをしてメニューを開き、Create Empty を選択します。空のゲームオブジェクトが1つ作成されますので、名前を Ground_Start に変更します。


ヒエラルキー画像



 この Ground_Start ゲームオブジェクトは、この後に作成するブロック画像のゲームオブジェクトをまとめるフォルダとしての役割を持たせます。
(このゲームオブジェクトの子オブジェクトとして複数の地面用のブロック画像のゲームオブジェクトを配置します。)

 このような構造にすることによって管理をしやすくするとともに、親である Ground_Start ゲームオブジェクトの位置を変更すれば、
他の子オブジェクトの位置も一緒に連動して移動出来るようになりますので、位置の調整に便利です。


Ground_Start ゲームオブジェクト インスペクター画像



 Transform コンポーネントの Position 情報がすべて 0 の場合、ゲームオブジェクトはゲーム画面の中央に位置します。(画面中央に矢印があり、この位置にゲームオブジェクトがいます)


Ground_Start ゲームオブジェクト Sceneビュー画像



Ground_Start ゲームオブジェクトの子オブジェクトとして、ブロック画像のゲームオブジェクトを作成する


 Project 内の次のフォルダ内にあるプレファブの Nature_props_15 ゲームオブジェクトを選択してください。

フォルダの場所 Assets/Nature_pixel_art_assets/Prefabs/Nature_props/Nature_props_15



 選択したゲームオブジェクトを、ヒエラルキーにあるGround_Start ゲームオブジェクトの上までドラッグして、ドロップします。
これでこの Nature_props_15 ゲームオブジェクトは Ground_Start ゲームオブジェクトの子オブジェクトとして作成されます。
下記の画像のような構成になっていれば問題ありません。


ヒエラルキー画像



 ヒエラルキーで Nature_props_15 ゲームオブジェクトを選択して、Transform コンポーネントの Position 情報を変更します。
ゲーム画面の左下に位置するように配置をしてください。SceneビューとGameビューを一緒に見ながら配置しましょう。
Unityエディターのレイアウトを変更し、SceneビューとGameビューが一緒に見えるような設定しておいた方が調整はしやすくなります。

 参考用にインスペクター画像を掲載しますが、これは画面解像度の設定が 2880 * 1440 の場合の位置情報ですので、適宜調整をしてください。


SceneビューとGameビュー画像



Nature_props_15 ゲームオブジェクト インスペクター画像



 配置が終了したら、Nature_props_15 ゲームオブジェクトのインスペクターの一番下にある Add Compnent ボタンを押して、
BoxCollider2D コンポーネントを探して追加してください。


Nature_props_15 ゲームオブジェクト インスペクター画像



 追加した BoxCollider2D コンポーネントの中にある Edit Collider ボタンを押すとコライダーの形状・大きさを変更できますので
Sceneビューで画像の大きさと合うように、コライダーの形状と大きさを変更してください。

 このコライダーの大きさがブロックの画像よりも小さかったり、大きかったりしてブロックの画像の形状と一致しないと
見た目とコライダーの判定とがちぐはぐになってしまうため、ゲーム的に不自然な挙動になります。


Sceneビュー コライダー設定画像



 以上でブロックの設定は終了です。最後にこのブロックを複数並べることで1つの地面に見えるようにします。
 

Nature_props_15 ゲームオブジェクトを複製する


 ヒエラルキーにある Nature_props_15 ゲームオブジェクト を選択し、右クリックしてメニューを開き、Duplicate を選択します。
Nature_props_15(1) ゲームオブジェクトが、Nature_props_15 ゲームオブジェクトの複製として作成されます。

 複製されたゲームオブジェクトは、複数元のゲームオブジェクトと同じ位置にありますので、右側に移動して、ブロックを並ばせましょう。 


Nature_props_15(1) ゲームオブジェクト インスペクター画像



 複製しているので、BoxCollider2D コンポーネントを追加したり、大きさを調整する必要はありません。確認だけしておきましょう。
そのため、SpriteRendererとBoxCollider2Dについてのインスペクター画像は割愛しています。


 この手順を繰り返して、ブロックを4つ並べます。
Nature_props_15 ゲームオブジェクトを元にして、Nature_props_15(2) ゲームオブジェクトとNature_props_15(3) ゲームオブジェクトを複製して作成し、
それぞれの位置を変更してください。


Nature_props_15(2) ゲームオブジェクト インスペクター画像



Nature_props_15(3) ゲームオブジェクト インスペクター画像



4つ並んだ際のSceneビューとGameビュー画像



完成した際のヒエラルキー画像



 以上で地面用のゲームオブジェクトの作成は終了です。


<SpriteRenderer コンポーネントの Order in Layer プロパティ>


 今回新しく作成した Nature_props_15 ゲームオブジェクト群ですが、いずれも SpriteRenderer コンポーネントがアタッチされています。
このコンポーネントによって2Dゲームではゲーム画面に画像を描画していますが、画像と画像とが重なりあった場合、描画は優先順位に応じて行われます。

 その設定値が Order in Layer の値です。Nature_props_15 ゲームオブジェクトの値を見てみてください。初期値である 0 に設定されているはずです。


Nature_props_15 ゲームオブジェクト群の SpriteRenderer



 手順3で作成した背景用のゲームオブジェクトですが、SpriteRenderer コンポーネントの Order in Layer の値を -1 に設定していました。


back ゲームオブジェクトの SpriteRenderer



 Order in Layer の値は低いほど後面に描画され、高いほど前面に描画されるように、優先順位を付けています。
そして画像同士が重なっている場合には、この値によってどちらの画像が画面の前面にくるようになるかを決定しています。

 試しに、これらの値をそれぞれ動かしてみてください。値によって描画の優先順位が変わるのが分かります。

 今後、2Dゲームにおいて、ゲームオブジェクトを画面に配置しても描画されない場合には、
この SpriteRenderer コンポーネントの Order in Layer の値を確認するよう覚えておいてください。


7.プレイヤー用のキャラを設置する

設計


 インポートしたアセットを使ってキャラをヒエラルキーに設置します。

 ゲームですので「動き」が感じられないとプレイヤーは楽しくありません。逆に「動き」がしっかりとしていれば、操作をするだけでも楽しい気持ちになります。
アクションゲームの基本的な部分となりますので、キャラが行動を行うたびに「動き」をつけるようにします。これはアニメーションの形で実装出来ます。

 キャラが移動する場合には「歩く・走る」、ジャンプした場合には「ジャンプする、落下する」といった行動に合わせたアニメーションを同期再生させることによって
キャラに「動き」をつけることが出来ます。

 まずは最初に歩くアニメーションのキャラを作成し、ヒエラルキーに設置します。


ヒエラルキーにキャラを設置する


 画像のフォルダ内にある Yuko_Run_1 から Yuko_Run_8 までの8ファイルをまとめて選択します。まとめて選択する方法は Ctrl キーを押しながら左クリックです。
なお、他にもキャラがいますので、別のキャラを利用して頂いても構いません。その場合にも、そのキャラの走る画像をまとめて選択するようにしてください。
 

ファイルの場所 Assets/UnityChan/2DUnitychan/Sprites/Yuko/Yuko_Run_1 から Yuko_Run_8 までの8ファイル



選択時のインスペクター画像



 選択したファイルをそのままヒエラルキーにドラッグアンドドロップします。
Create New Animation というウインドウが開きます。


Create New Animation ウインドウ



 Create New Animationウインドウは、作成複数の画像ファイルをヒエラルキーにドラッグアンドドロップすると
8枚の画像を使ったアニメーションを再生する、アニメーションクリップを自動的に作成してくれます。
(8枚の画像をパラパラ漫画のようにつなぎ合わせて1つのアニメにしています。)

 ファイル名を Yuko_Run.anim に変更して保存を選択してください。

 ヒエラルキーに Yuko_Run_1 ゲームオブジェクトが作成されます。(複数の画像の場合、先頭のファイル名を持つゲームオブジェクトになります)

 そのままゲームを実行してみてください。キャラがアニメーションを繰り返すはずです。(まだ重力などの影響は受けていないので、キャラの位置はどこでも構いません。)


検証動画
https://gyazo.com/430f0ae72fcf1404e1da67b04f34a3d1


Yuko_Run_1 ゲームオブジェクトの設定を行う


 Yuko_Run_1 ゲームオブジェクトのインスペクターを確認しましょう。


Yuko_Run_1 ゲームオブジェクト インスペクター画像 



 Transform コンポーネントの Position 情報を画像のように設定し、地面用のゲームオブジェクトの上に来るように調整をしてください。


SceneビューとGameビュー画像



 続いて、SpriteRenderer コンポーネントの Order in Layer の値を 0 => 5 に変更してください。
キャラがゲーム画面から消えてしまってはゲームになりませんので、描画の優先順位は高く設定しておきます。


 Animator コンポーネントを確認してください。複数の画像ファイルをヒエラルキーにドラッグアンドドロップした際にはこのコンポーネントが自動的にアタッチされます。
(今までの back ゲームオブジェクトのように、1つの画像ファイルをドラッグアンドドロップした場合にはアタッチされません。)

 ゲームを実行すると、このコンポーネントによって、先ほど作成した Yuko_Run_1.anim というアニメーションクリップが再生されます。


 最後に新しいコンポーネントを2つ追加します。
インスペクターの一番下にある Add Compnent ボタンを押して、Rigidbody2D コンポーネントと CapsuleCollider2D コンポーネントを追加してください。


 どちらのコンポーネントも下記の画像のように設定をしてください。

 Rigidbody2D の Constraints の FreezeRotation の Z について、チェックをいれてください


Rigidbody2D インスペクター画像



 コライダーの形状については、Sceneビューを確認しながら調節してください。
地面にめり込んだり、地面から離れすぎて空中に浮いてしまったりしないように気をつけてください。

CapsuleCollider2D インスペクター画像



参考画像 Sceneビューでのコライダーの形状



 これでキャラの完成です。インスペクターには合計で5つのコンポーネントがアタッチされていれば問題ありません。
最後にゲームオブジェクトの名前を変えておきます。 Yoko_Player に名前を変更してください。


Yuko_Player ゲームオブジェクト インスペクター画像



 以上でこの手順は終了です。

 次は 手順5 −キャラの移動と待機の実装− です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます