【Unity】初心者向け!2Dゲーム制作入門/上下左右キー移動・衝突

Unityで上下左右キーを使ってキャラクターを動かす方法を解説した記事のアイキャッチ画像です。障害物との衝突も確認できます。
Unity
この記事は約7分で読めます。

おはようございます!

1月21日 火曜日。薄曇りの晴れ🌞
予想気温12/7℃。1週間くらい寒くない日が続くみたいです。

さて、今日も早速お勉強してまいります。

今日の教材はこちら、

[PR]

 

スポンサーリンク

・配置した画像に「On Key Press Move Sprite」を追加

Unityエディタのインスペクターウィンドウで、キャラクターオブジェクトに「On Key Press Move Sprite」スクリプトを追加している様子を示しています。
移動スクリプトのアタッチ

 

・「Play」ボタンで実行

Unityで作成した2Dゲームのデモ画面です。上下左右キーを押すと、キャラクターが対応する方向に移動します。
キー操作でキャラクターを移動

 

おおー!!

左に移動するときはちゃんと左向くね!

すげー

あれか、反転処理か

反転術式

 

<「上下左右キーを押したら、オブジェクトが移動する(On Key Press Move Sprite)」スクリプト(抜粋)>

・Update関数の箇所

Unityのスクリプトを抜粋した画像です。「Update関数」や「移動量」といった言葉で、キャラクターの移動処理を解説しています。
移動スクリプト解説

 

 ・Input.GetAxisRaw(“Horizontal”):水平方向キーが押されたかどうか

 Input.GetAxisRaw(“Vertical”):垂直方向キーが押されたかどうか

 ⇒いずれも「1」or「0」or「-1」の値が毎フレーム返ってくる。
 ※「0」であれば動いていない。

 

・FixedUpdate関数の箇所

Unityのスクリプトを抜粋した画像です。FixedUpdate関数内で、オブジェクトの移動処理が記述されています。「毎フレーム実行される」や「移動量 × フレーム間秒」といった言葉で、処理の内容が解説されています。
移動スクリプト解説(FixedUpdate関数)

 

 ・Time.deltaTime:前回のUpdate関数から今回のUpdate関数までの経過時間(秒)

 

関数実行内容
Start()最初に1回だけ実行
Update()ゲーム中ずっと実行
FixedUpdate()一定時間ごとにずっと実行
OnCollisionEnter2D()オブジェクトが衝突したときに実行
OnMouseDown()マウスでタッチしたときに実行
LateUpdate()いろいろな描画が終わったあとに実行

 

[PR]

 

 

リジッドボディ2D(Rigidbody 2D):オブジェクトを物理的に動かす機能

 例えば👇

  ・オブジェクトと衝突したら衝突を検知
  ・衝突相手が壁オブジェクトならそれ以上進めない
  ・押せるオブジェクトなら押しながら進む

 など

 

コライダー2D(Collider 2D):オブジェクトの衝突枠(絵のどこが衝突するかの境界線)

 ⇒衝突枠が他の画像の衝突枠と触れることで衝突が発生する。

 

・「Rigidbody 2D」「Box Collider 2D」を追加して動かしてみる

Unityで作成した2Dゲームのデモ画面です。岩のオブジェクトにRigidbody2DとBoxCollider2Dコンポーネントを追加し、重力によって落下する様子を示しています。
重力による落下

 

・Rigidbody 2Dの「重力スケール(Gravity Scale)」を「0」にして動かしてみる

Unityエディタのインスペクターウィンドウで、Rigidbody2DコンポーネントのGravity Scaleを0に設定している様子を示しています。これにより、オブジェクトに重力が働かなくなります。
重力オフ設定
Unityで作成した2Dゲームのデモ画面です。プレイヤーキャラクターが、重力の影響を受けないオブジェクトに衝突してもすり抜けてしまう様子を示しています。
衝突判定なし

 

岩は落下しなくなったけど通過してしまう。。

なぜか?

キャラクターの方には「衝突枠」をつけてないから。

つけてないよ

 

・キャラクターに「Rigidbody 2D」「Capsule Collider 2D」をアタッチし、キャラクターのRigidbody 2Dの「重力スケール(Gravity Scale)」を「0」に設定

Unityエディタのインスペクターウィンドウで、キャラクターにRigidbody2DとCapsuleCollider2Dコンポーネントを追加し、Gravity Scaleを0に設定している様子を示しています。
キャラクターのコライダー設定

 

・「Play」ボタンで実行

Unityで作成した2Dゲームのデモ画面です。プレイヤーキャラクターがオブジェクトを押し出す際、オブジェクトが意図せず回転してしまう問題が発生しています。
衝突判定の不具合

なんじゃこりゃ

 

<問題点>

 ・岩の端っこを押すと一緒に曲がってしまう
  →岩の端だけに力が加わると、物理的な回転の動きが発生するため
  ⇒回転しない設定を追加する必要がある

 

[PR]

 

 

・「Key Press Move Sprite」を「On Key Press Move」に差し替えて動かしてみる

Unityで作成した2Dゲームのデモ画面です。スクリプトを変更した結果、オブジェクトが意図せず滑ってしまい、衝突判定が正しく機能していない様子を示しています。
スクリプト変更による意図しない動き

 

スーっと滑っていきました。。

これは重力スケールが0(無重力)なので、止まる要素がないため。

 

・岩の画像の「Rigidbody 2D」の「線形減衰(Linear Damping)」「角度減衰(Anglar Damping)」をそれぞれ「10」にして動かしてみる

Unityエディタのインスペクターウィンドウで、Rigidbody2DコンポーネントのLinear DampingとAngular Dampingを調整している様子を示しています。これらの値を調整することで、オブジェクトの動きを自然にすることができます。
動きを自然にする設定
Unityで作成した2Dゲームのデモ画面です。Rigidbody2DのLinear DampingとAngular Dampingを調整することで、オブジェクトの動きが徐々に遅くなり、最終的には停止する様子を示しています。
減衰効果

 

<「上下左右キーを押したら、リジッドボディで移動する(On Key Press Move)」スクリプト(抜粋)>

・Start関数の箇所

Unityのスクリプトを抜粋した画像です。Start関数内で、Rigidbody2Dコンポーネントを取得し、変数に格納している様子を示しています。
スクリプトのStart関数

 

・FixedUpdate関数の箇所

void FixedUpdate()
{
  rbody.linearVelocity = new Vector2(vx, vy);  // 移動する
  GetComponent().flipX = leftFlag;
}

 ⇒linearVelocityプロパティにVector2型の値を設定することで、オブジェクトの線形速度を直接設定できる。

 

・描画モード「タイル」

Unityエディタのインスペクターウィンドウで、スプライトの描画モードを「タイル」に設定している様子を示しています。これにより、スプライトを繰り返し表示して背景を作成できます。
スプライトのタイル表示設定

 

引いた壁に「Box Collider 2D」をアタッチ。アタッチされた「Box Collider 2D」は元の画像の大きさのままのため、「自動タイリング」にチェックを入れる。

・「Box Collider 2D」の大きさ(元の画像のまま)

Unityエディタのインスペクターウィンドウで、Box Collider 2Dのサイズがオブジェクトの画像サイズと一致するように設定されている様子を示しています。
コライダーサイズの設定

 

・「自動タイリング(Auto Tiling)」チェックオン

Unityエディタのインスペクターウィンドウで、Box Collider 2Dの自動タイリングが有効になっている様子を示しています。これにより、スプライトに合わせてコライダーが自動的に生成されます。
自動タイリング設定

これで「Box Collider 2D」が引き伸ばした壁と同じ大きさに自動調整された。

Ctrl+Dで壁を複製。四方に壁を設置。

 

「Play」ボタンで実行

Unityで作成した2Dゲームのデモ画面です。キャラクターが壁に衝突し、すり抜けることなく止まる様子を示しています。
壁との衝突判定

 

ゲームっぽくなってきた!

いいねー

 

[PR]

 

 

おばけオブジェクトを配置。
「Rigidbody 2D」「Box Collider 2D」「Forever Chase」をアタッチ。
「Forever Chase」の「Target Object」にキャラクターを設定。

 

「Play」ボタンで実行

Unityで作成した2Dゲームのデモ画面です。敵キャラクターがプレイヤーを常に追いかける様子を示しています。
おばけの追跡デモ

 

・装飾してみる

 背景を追加。
 青いレンガを埋める。
 Transformの「Z」の値を「10」にする。
 背景の青いレンガの色を少し暗くする。
 おばけを半透明にする。

 

「Play」ボタンで実行

Unityで作成した2Dゲームのデモ画面です。背景をレンガで装飾し、キャラクターを半透明にすることで、ゲームの雰囲気を高めています。敵キャラクターがプレイヤーを追いかける様子を示しています。
ゲームらしい雰囲気

 

<「ずっと、追いかける(Forever Chase)」スクリプト(抜粋)>

・変数設定箇所

Unityのスクリプトエディタの画面です。「Forever Chase」スクリプトの変数設定部分を示しています。「目標オブジェクト」や「スピード初期設定」などの変数が定義されています。
追跡スクリプトの変数設定

 

・Start関数の箇所

Unityのスクリプトエディタの画面です。「Forever Chase」スクリプトのStart関数内で、敵キャラクターの初期化処理が行われています。Rigidbody2Dコンポーネントの取得や変数の初期化などが行われています。
追跡スクリプトのStart関数

 

・追いかける処理の箇所

Unityのスクリプトエディタの画面です。「Forever Chase」スクリプトの移動処理部分を示しています。目標オブジェクトの方向を計算し、その方向に移動する処理が記述されています。
目標物への移動

 

 targetObject.transform.position:追跡対象のオブジェクトの位置を取得

 transform.position:自身のオブジェクトの位置を取得

  ⇒2つの位置の差を計算し、目標方向のベクトルを求める

 .normalized:ベクトルの長さを1に正規化。れにより、方向ベクトルが得られる。

 

[PR]

 

 

 

CHAPTER5.5と5.6が残っているんですけど、今日はここまででm(_ _)m

 

学ぶ時間よりWordPressを編集するほうが時間かかっているというジレンマ。。。

特に画像の作成が😭

作るだけならいいんですけどね~、SEO的に画像に対して色々設定しないといけないのがツラい。

 

がんばるます、、、

ひへ~

 

体力回復に努めるためこれにて終了です。

 

おつかれさまでした~(-ω-)/

 

 

 

[PR]

 

PAGE TOP
タイトルとURLをコピーしました