Unityに関連する記事です

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

手順28 ーステージ作成ー
49.ステージを作成する −スタート地点を設定して、道中に花輪を設置するー
50.キャラの移動範囲の制限制御を追加する



 新しい学習内容は、以下の通りです。

 ・ステージ作り
 ・Mathf.Clampメソッド



49.ステージを作成する −スタート地点を設定して、道中に花輪を設置するー

1.設計


 キャラのスタート地点を決定します。その後、花輪の FlowerCircle ゲームオブジェクトのプレファブを適宜な位置に配置して、ステージを作成します。

 花輪のゲームオブジェクトは等間隔の高さに並ぶように始めはゲーム画面内に配置していきましょう。
その後、それを移動したり、他の花輪を追加して落下する際のダイブの目標地点としての役割を持たせることが出来ます。
1つの高さに2つ、あるいは近い距離に2つなど、ステージ作りは調整が大切ですので、実際に何回も遊んでみて設定を繰り返し行います。

 あっちもくぐりたいけど間に合わない、姿勢を変更すれば2つまとめてくぐれるかも、といった、
ゲーム内にユーザーが遊び方を考える部分、駆け引きやジレンマが生まれるように配置してステージを作成します。


2.キャラとカメラの位置を設定し、スタート地点を決定する


 Penguin ゲームオブジェクトの Position の Y を 100に、Main Camera ゲームオブジェクトの Position の Y を 104 に変更してください


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



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



Gameビュー画像



 この位置を仮のスタート地点とします。これ以外にも変更できますので、その場合、カメラの位置は常にキャラの位置 + 4 で設定してください。


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


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

 このゲームオブジェクトを、ゲームの落下の道中用に適宜配置する FlowerCircle ゲームオブジェクトを入れるためのフォルダとして利用し、管理を行います。


ヒエラルキー画像



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



4.FlowerCircle ゲームオブジェクトをゲーム画面に配置する


 好きな数の FlowerCircle ゲームオブジェクトのプレファブを Ways ゲームオブジェクト内に配置して自由に配置しましょう。

 まずは Position の Y 軸を 20 ずつ増やして等間隔で並べて、それから、X 軸と Z 軸は自由に移動させてください。
これを横方向から見た場合、このようなイメージで上下に並べる形です。

Position Y   オブジェクト
104            Main Camera
100            Penguin
 80            FlowerCircle
 60            FlowerCircle
 40            FlowerCircle
 20            FlowerCircle
  5            ゴール地点用のFlowerCircleたち

イメージ



ヒエラルキー画像



Sceneビュー画像 〆能蕕賄間隔に並べてみる



 上下の同じ位置に花輪があると、下の位置にある花輪には、上の花輪のゲームオブジェクトの影が映りこんで黒くなります。
回避するには、位置をずらすか、あるいは上のゲームオブジェクトの影の設定を切っておくかです。影の切り方は調べてみてください。


Sceneビュー画像◆‘韻鍵銘屬砲△襪伐爾離押璽爛ブジェクトには影が映りこんで黒くなる




 その後も花輪のゲームオブジェクトを配置しながら、ステージに工夫を凝らしましょう。
1ステージ辺り、15個〜20個位の花輪を用意して、色々なルートを通りながらゴールを目指してもらうようにします。

 ・空中にも移動する花輪を設置する(移動速度も変更する。早い方がくぐりにくいので、点数は高い)
 ・花輪の大きさを変更する。得点も変える(小さい方がくぐりにくいので、点数は高い)
 ・伏せの姿勢を利用しないとくぐれない位置に花輪を設置する(この花輪の点数は高い)
 ・高さの短い距離で複数個の花輪を設置して、一気に続けてくぐる楽しみを作る
 ・ゴール地点の花輪の点数を変える。移動しているものは点数を高くする、など


参考用 。幻鎚造戮討澆榛



参考用◆ゞ中にも移動する花輪を設定してもよい
https://gyazo.com/918a6ecac21aa71e2980e1996268d200


参考用 つづけてくぐると楽しい(少しずつ位置をずらしても面白い)
https://gyazo.com/c760d7aa93f9cabfa2bec6e8aff09e7f


4.ゲームを実行して動作を確認する


 ゲームを遊んでみましょう。何回も遊んでみながら、どうすれば面白くなるのかを考えてみてください。
それを追加要素として実装のための設計を考えてみましょう


 以上でこの手順は完成です。


50.キャラの移動範囲の制限制御を追加する

1.設計


 キャラが落下している最中に、ステージ外に出てしまって着水できそうにない場合に備えて
キャラの移動できる範囲を水面内に収まるように制限を付けておきます

 ステージの外側に見えないゲームオブジェクトを4枚おいて、外壁のようにする方法もありますが
その場合、コライダー同士の接触状況によってはコライダーを突き破ってステージ外に出てしまう恐れがあります。
また、ステージの大きさを変えるたびに壁の大きさも変えなければなりませんので、今回のゲームには適していません。

 ゲーム内に処理を実装する方法はいくつかあり、その中で最適と思われるものを実装するように考えてみましょう。

 今回は、PlayerController スクリプトからキャラの移動範囲を制限するようにします。
事前に移動できる範囲を上下左右に設定しておいて、その範囲外への移動については制限をかけて移動できないように制御します。

 制限するための設定値ですが、実数をそのままスクリプトに記述してもよいのですが、
ステージの大きさが変わるたびにスクリプトを変更しないとならなくなりますので、ステージ内に範囲を設定するためのゲームオブジェクトを配置し、
そのゲームオブジェクトの位置情報を参照して、移動する範囲を制限するようにします。
 
 これであれば、このゲームオブジェクトを移動するだけで、スクリプトは変更せずに、移動範囲の制限量を変更できます。
 
 最初にゲームオブジェクトを2つ配置して、移動範囲の制限を決定し、それからスクリプトを修正します。


2.移動できる範囲を制限するためのゲームオブジェクトを配置する


 移動範囲を制限するために、空のゲームオブジェクトを2つ作成します。

 まず1つ目は、水面の左下に配置するために作成します。

 ヒエラルキーの何もない場所で右クリックをしてメニューを表示し、Create Empty を選択します。
新しい空のゲームオブジェクトが作成されますので、名前を LimitLeftBottom に変更します。

 
ヒエラルキー画像



 このゲームオブジェクトは、水面からみて左下に配置し、キャラの移動範囲のうち、左端と下端(手前側)の値を制限させる役割を持ちます。
位置情報を利用するだけですので、Transform コンポーネント以外のコンポーネントは不要です。

 自分のステージの水面を見ながら、左端と下端として適当な位置にこのゲームオブジェクトを配置してください。
利用するのは X軸(左端)と Z軸(下端)だけですので、Y軸はどの高さでも問題ありませんが、水面近くで作業した方がやりやすいでしょう。


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



LimitLeftBottom ゲームオブジェクト Sceneビュー画像(参考。自分の水面の状態に合わせる)




 続いても同じように、空のゲームオブジェクトを作成して、今度は右上に配置するようにします。

 ヒエラルキーの何もない場所で右クリックをしてメニューを表示し、Create Empty を選択します。
新しい空のゲームオブジェクトが作成されますので、名前を LimitRightTop に変更します。


ヒエラルキー画像



 このゲームオブジェクトは、水面からみて右上に配置し、キャラの移動範囲のうち、右端と上端(奥側)の値を制限させる役割を持ちます。
位置情報を利用するだけですので、Transform コンポーネント以外のコンポーネントは不要です。

 自分のステージの水面を見ながら、右端と上端として適当な位置にこのゲームオブジェクトを配置してください。
こちらも利用するのは X軸(左端)と Z軸(下端)だけですので、Y軸はどの高さでも問題ありません。


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



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



 以上で移動範囲を制限するためのゲームオブジェクトの設置は完了です。
この情報を利用できるように PlayerController スクリプトを修正して、移動範囲の制御を行います。


3.PlayerController スクリプトを修正する


 宣言フィールドには、先ほど作成したゲームオブジェクトの位置情報を参照できるように
SerializeField属性で Transform 型の変数を2つ用意します。すでにお気づきかと思いますが、変数名とオブジェクト名とを大体合わせてあるのは
アサイン時にどのゲームオブジェクトをアサインするべきか、わかりやすくし、また万が一間違えていた場合に気づきやすくするためです。
これもスクリプトの可読性に関わる部分ですので、変数名にもわかりやすく、推察しやすい名前を付けるように心がけてください。


 Update メソッドに、新しく作成する LimitMoveArea メソッドの呼び出すを追加します。
Update メソッド内に記述された処理は毎フレーム呼び出される処理になりますので、メソッドも同様に、毎フレーム呼び出されることになります。

 LimitMoveArea メソッド内において、現在のキャラのX軸とZ軸を確認し、先ほど設定した上下左右の移動範囲の中に収まっているかを
Mathf.Clamp メソッドを利用して判定を行います。もしも、いずれかの方向で移動の範囲外になっている場合には、その範囲内になるように位置を調整した上で
現在のキャラの位置を更新し、制限した範囲内でのみ移動を行うように制御を行っています。


PlayerController.cs

 <= クリックすると開きます



 スクリプトの修正が完成したら、Penguin ゲームオブジェクトのインスペクターから PlayerController スクリプトを確認します。
SerializeField属性で宣言している変数が2つ追加されて表示されていれば問題ありません。


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



4.<Mathf.Clampメソッド>


 Mathf.Clampメソッドの機能ですが「制御したい指定値を、指定した範囲内の最小値、最大値に収めてくれる」処理になります。

使用例としましては、
制御したい指定値 = Mathf.Clamp(制御したい指定値, 最小値, 最大値);


 今回の場合であれば、以下のようにキャラの現在位置の制御を行っています。

 // 現在のXの位置が移動範囲内に収まっているか確認し、超えていた場合には下限(左端)か上限(右端)に合わせる
  float limitX = Mathf.Clamp(transform.position.x, limitLeftBottom.position.x, limitRightTop.position.x);

  // 現在のZの位置が移動範囲内に収まっているか確認し、超えていた場合には下限(手前側)か上限(奥側)に合わせる
  float limitZ = Mathf.Clamp(transform.position.z, limitLeftBottom.position.z, limitRightTop.position.z);

 つまり、transform.position.z の値であれば、最小値が limitLeftBottom.position.z 以下になった場合には limitLeftBottom.position.z の値に、
最大値が limitRightTop.position.z 以上になった場合には limitRightTop.position.z の値に制限をしてくれます。


 なおMathf.Clampメソッドにはオーバーロードがあり、引数の型は、float型とint型でそれぞれ利用が出来るようになっています。
今回は float 型を利用しています。
Unity公式スクリプトリファレンス
Mathf - Clamp
https://docs.unity3d.com/jp/540/ScriptReference/Ma...


5.Penguin ゲームオブジェクトの PlayerController スクリプトのアサイン情報に、必要なコンポーネントがアタッチされているゲームオブジェクトをドラッグアンドドロップして登録する


 ヒエラルキーにある、対象のゲームオブジェクトをドラッグアンドドロップしてアサインしましょう。


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



6.ゲームを実行して動作を確認する


 Penguin ゲームオブジェクトを移動させて、画面の上下左右にずっと移動させてみます。
Position の X と Z を確認して、値が制限されている値以内に収まっていれば制御成功です。

 ゲーム画面とキャラの Position を確認してみてください
 

<実行動画 左と上を確認>
https://gyazo.com/a3486625f5c6f8acbe4daf676b664679


<実行動画 下と右を確認>
https://gyazo.com/1c6050a8d46ee49c104a620194397b0a


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

 => 次は 手順29 ースマホでの制御ー です。

 次は基礎編の最後になります。スマホで遊べるようにジョイスティックを追加します。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

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

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

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

private



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

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