２Ｄリアルタイムストラテジー 手順９
最終更新：
orika_ex_miyako 2021年12月30日(木) 23:49:05履歴
プレイヤーキャラの移動に合わせてカメラが追従する制御処理を実装しましたので、続いて、カメラの移動範囲の制御処理を実装します。
＜実装動画＞
動画ファイルへのリンク
以下の内容で順番に実装を進めていきます。
手順９ ーカメラの移動範囲の制御ー
新しい学習内容は、以下の通りです。
１６．カメラの移動範囲をゲーム画面内に収める制御を実装する
１．設計
Virtual Camera がプレイヤーキャラの移動に合わせて追従するようになりました。
そのためプレイヤーキャラを常にゲーム画面の中央位置に映した状態でゲームが進行するようになりました。
実際にプレイヤーキャラを移動していて、カメラの制御に問題があることに気づいたと思います。
プレイヤーキャラをゲーム画面の端まで移動した際に、プレイヤーキャラを中心にカメラが移動していることにより、
ゲーム画面内に、作りこんでいない部分が映りこんでしまっています。
Game ビュー画像(画面下部にゲームのタイルのない背景部分が見えてしまっている)
このままですとゲーム画面には映したくない部分まで映ってしまうことになりますので、
この部分を制御する処理を考えて実装します。
対応方法はいくつかありますが、今回は Cinemachine のカメラを利用していますので、こちらの可動範囲を制限する処理によって対応しようと思います。
具体的には、ゲーム画面に映したい大きさでコライダーを作成して、そのコライダーの内側に Cinemachine のカメラを閉じ込める機能を利用することにより、
プレイヤーキャラがゲーム画面の端まで移動した際には、カメラの移動がコライダーの範囲内で移動を制限し、ゲーム画面外を映さないように制御を施していきます。
＜実装動画＞
動画ファイルへのリンク
上記の動画の Sceneビュー を確認してください。白い長方形がカメラの映している範囲です。
プレイヤーキャラが画面の下まで移動するとカメラが画面外には移動せずに、プレイヤーキャラのみがカメラの範囲内で移動し、カメラはコライダーの設定した範囲内で収まっています。
そして、プレイヤーキャラが画面内に再度移動することに合わせて、またプレイヤーキャラを画面の中央に沿えてカメラの移動が始まっています。
この機能を実装します。
２．CameraConfiner ゲームオブジェクトを作成する
ヒエラルキーの空いている部分で右クリックをしてメニューを開き、Create Empty を選択して、新しいゲームオブジェクトを１つ作成します。
名前を Camera Confiner に変更します。
ヒエラルキー画像
このゲームオブジェクトにコライダーを設定し、そのコライダーの範囲内のみを Chinemachine のカメラが移動するようにしていきます。
３．新しい Layer を作成して、Camera Confiner ゲームオブジェクトに設定する
ヒエラルキーの Camera Confiner ゲームオブジェクトを選択して、インスペクター上部にある Layer を選択します。
プルダウンメニューが開きますので、一番下にある Add Layer… を選択します。インスペクターの表示が Tags & Layers に切り替わり、Layer の編集が可能になります。
Layers を選択し、Layers 8 以降に Confiner を登録してください。
Tags & Layers インスペクター画像(ここでは Layers 8 を利用していたため、Layers 9 に登録しています)
再度、Camera Confiner ゲームオブジェクトを選択して、インスペクターの Layer を選択します。
プルダウンメニューに Confiner が追加されていますので、そちらを選択します。
Camera Confiner ゲームオブジェクト インスペクター画像
続いて、この Confiner レイヤーの設定を行います。
４．Layer Collision Matrix の設定を行う
レイヤーの設定を行うことにより、特定のレイヤー間の接触判定のみを感知したり、あるいは特定のレイター間を無視したりすることが出来ます。
Unity Editor の左上のメニューより、Edit => Project Settings を選択します。
Project Settings ウインドウが開きますので、左側の項目より、Physics 2D を選択します。
右側の内容が選択した項目の内容に切り替わりますので、一番下までスクロールしてください。
Layer Collision Matrix という部分が表示されます。
Confiner のレイヤーのチェックをすべて外して、下記の画像のようにしてください。
Layer Collision Matrix
これで Confiner のレイヤーが設定されているゲームオブジェクトのコライダーは、
いずれのレイヤーのゲームオブジェクトのコライダーとも接触判定を行わない状態になりました。
以上で設定は完了です。
５．Camera Confiner ゲームオブジェクトに Polygon Collider 2D コンポーネントを追加して設定を行う
ヒエラルキーの Camera Confiner ゲームオブジェクトを選択し、インスペクターの一番下にある Add Component を選択します。
Polygon Collider 2D コンポーネントを探して追加します。
インスペクター画像
このコライダーのサイズを設定し、【Chinemachineのカメラの稼働できる範囲】として制御させます。
このコンポーネントは複数の頂点を移動して、形状を自由に変更できるタイプのコライダーになります。
初期設定では頂点の数が 5 になっていますので、こちらを設定しやすいように頂点は 4 つに設定してからサイズを変更します。
Polygon Collider 2D コンポーネントの Points を 5 => 4 に変更します。これで頂点の数が 4 つになります。
Edit Collider のボタンを押して、Sceneビュー にてタイルの大きさに合わせてサイズを設定してください。
頂点を選択してドラッグアンドドロップすることによって、頂点を自由に移動することができますので、左上、左下、右上、右下と頂点を移動してください。
大切なポイントとしては、カメラを収めたい範囲として設定を行いますので、プレイヤーキャラの実際に移動できる範囲内に頂点を配置するといいでしょう。
例えば、下記のようにプレイヤーキャラの移動範囲を四方を山のタイルが囲んでいますが、その内側に頂点を配置するようにしてください。
頂点の数字が細かくなりすぎる場合には、近い数字に丸めてください。
インスペクター画像(これは例です。自分のプロジェクトのタイルの大きさに合わせる)
Sceneビューの Polygon Collider のサイズ(赤い枠で周囲がおおわれている)
Collider の検証動画
動画ファイルへのリンク
以上で設定は完了です。最後に、このコンポーネントを制御させるための機能を追加します。
６．CM vcam1 ゲームオブジェクトに Cinemachine Confiner コンポーネントを追加して設定を行う
ヒエラルキーの CM vcam1 ゲームオブジェクトを選択し、Chinemachine Virtual Camera コンポーネント 内の Extensions の部分にある Add Extension を選択します。
プルダウンメニューが開きますので、Chinemachine Confiner2D を選択してください。新しく Chinemachine Confiner 2D コンポーネントが追加されます。
この機能を利用することで、Polygon Collider 2D コンポーネントで設定した範囲をCinemachine のカメラの稼働範囲として設定することが可能になります。
設定を１つ行います。
Bounding Shape 2D の部分に、Camera Confiner ゲームオブジェクトをドラッグアンドドロップしてアサインします。
Polygon Collider 2D コンポーネントが自動的に登録されます。
インスペクター画像
以上で設定は完了です。
７．ゲームを実行して動作を確認する
すべての設定が完了しました。どの機能がどのようにつながっているかを確認してから、ゲームを実行してください。
プレイヤーキャラを移動させてみてください。画面の端に移動した際に、Polygon Collider 2D コンポーネントのコライダーの範囲内でカメラが移動を停止するようになれば制御成功です。
＜実装動画＞
動画ファイルへのリンク
今回は Cinemachine の機能を利用することで、すべてノーコードで(スクリプトをかかずに)実装を行うことができました。
以上でこの手順は終了です。
次は 手順１０ −味方キャラの４方向分の移動アニメの作成と BlendTree による移動アニメの切り替え機能の実装− です。
＜実装動画＞
動画ファイルへのリンク
以下の内容で順番に実装を進めていきます。
手順９ ーカメラの移動範囲の制御ー
１３．カメラの移動範囲をゲーム画面内に収める制御を実装する
新しい学習内容は、以下の通りです。
・Layer Collision Matrix の設定 ・Polygon Collider 2D コンポーネント ・Chinemachine Confiner コンポーネント
１６．カメラの移動範囲をゲーム画面内に収める制御を実装する 
１．設計
Virtual Camera がプレイヤーキャラの移動に合わせて追従するようになりました。
そのためプレイヤーキャラを常にゲーム画面の中央位置に映した状態でゲームが進行するようになりました。
実際にプレイヤーキャラを移動していて、カメラの制御に問題があることに気づいたと思います。
プレイヤーキャラをゲーム画面の端まで移動した際に、プレイヤーキャラを中心にカメラが移動していることにより、
ゲーム画面内に、作りこんでいない部分が映りこんでしまっています。
Game ビュー画像(画面下部にゲームのタイルのない背景部分が見えてしまっている)
このままですとゲーム画面には映したくない部分まで映ってしまうことになりますので、
この部分を制御する処理を考えて実装します。
対応方法はいくつかありますが、今回は Cinemachine のカメラを利用していますので、こちらの可動範囲を制限する処理によって対応しようと思います。
具体的には、ゲーム画面に映したい大きさでコライダーを作成して、そのコライダーの内側に Cinemachine のカメラを閉じ込める機能を利用することにより、
プレイヤーキャラがゲーム画面の端まで移動した際には、カメラの移動がコライダーの範囲内で移動を制限し、ゲーム画面外を映さないように制御を施していきます。
＜実装動画＞
動画ファイルへのリンク
上記の動画の Sceneビュー を確認してください。白い長方形がカメラの映している範囲です。
プレイヤーキャラが画面の下まで移動するとカメラが画面外には移動せずに、プレイヤーキャラのみがカメラの範囲内で移動し、カメラはコライダーの設定した範囲内で収まっています。
そして、プレイヤーキャラが画面内に再度移動することに合わせて、またプレイヤーキャラを画面の中央に沿えてカメラの移動が始まっています。
この機能を実装します。
２．CameraConfiner ゲームオブジェクトを作成する
ヒエラルキーの空いている部分で右クリックをしてメニューを開き、Create Empty を選択して、新しいゲームオブジェクトを１つ作成します。
名前を Camera Confiner に変更します。
ヒエラルキー画像
このゲームオブジェクトにコライダーを設定し、そのコライダーの範囲内のみを Chinemachine のカメラが移動するようにしていきます。
３．新しい Layer を作成して、Camera Confiner ゲームオブジェクトに設定する
ヒエラルキーの Camera Confiner ゲームオブジェクトを選択して、インスペクター上部にある Layer を選択します。
プルダウンメニューが開きますので、一番下にある Add Layer… を選択します。インスペクターの表示が Tags & Layers に切り替わり、Layer の編集が可能になります。
Layers を選択し、Layers 8 以降に Confiner を登録してください。
Tags & Layers インスペクター画像(ここでは Layers 8 を利用していたため、Layers 9 に登録しています)
再度、Camera Confiner ゲームオブジェクトを選択して、インスペクターの Layer を選択します。
プルダウンメニューに Confiner が追加されていますので、そちらを選択します。
Camera Confiner ゲームオブジェクト インスペクター画像
続いて、この Confiner レイヤーの設定を行います。
４．Layer Collision Matrix の設定を行う
レイヤーの設定を行うことにより、特定のレイヤー間の接触判定のみを感知したり、あるいは特定のレイター間を無視したりすることが出来ます。
Unity Editor の左上のメニューより、Edit => Project Settings を選択します。
Project Settings ウインドウが開きますので、左側の項目より、Physics 2D を選択します。
右側の内容が選択した項目の内容に切り替わりますので、一番下までスクロールしてください。
Layer Collision Matrix という部分が表示されます。
Confiner のレイヤーのチェックをすべて外して、下記の画像のようにしてください。
Layer Collision Matrix
これで Confiner のレイヤーが設定されているゲームオブジェクトのコライダーは、
いずれのレイヤーのゲームオブジェクトのコライダーとも接触判定を行わない状態になりました。
以上で設定は完了です。
５．Camera Confiner ゲームオブジェクトに Polygon Collider 2D コンポーネントを追加して設定を行う
ヒエラルキーの Camera Confiner ゲームオブジェクトを選択し、インスペクターの一番下にある Add Component を選択します。
Polygon Collider 2D コンポーネントを探して追加します。
インスペクター画像
このコライダーのサイズを設定し、【Chinemachineのカメラの稼働できる範囲】として制御させます。
このコンポーネントは複数の頂点を移動して、形状を自由に変更できるタイプのコライダーになります。
初期設定では頂点の数が 5 になっていますので、こちらを設定しやすいように頂点は 4 つに設定してからサイズを変更します。
Polygon Collider 2D コンポーネントの Points を 5 => 4 に変更します。これで頂点の数が 4 つになります。
Edit Collider のボタンを押して、Sceneビュー にてタイルの大きさに合わせてサイズを設定してください。
頂点を選択してドラッグアンドドロップすることによって、頂点を自由に移動することができますので、左上、左下、右上、右下と頂点を移動してください。
大切なポイントとしては、カメラを収めたい範囲として設定を行いますので、プレイヤーキャラの実際に移動できる範囲内に頂点を配置するといいでしょう。
例えば、下記のようにプレイヤーキャラの移動範囲を四方を山のタイルが囲んでいますが、その内側に頂点を配置するようにしてください。
頂点の数字が細かくなりすぎる場合には、近い数字に丸めてください。
インスペクター画像(これは例です。自分のプロジェクトのタイルの大きさに合わせる)
Sceneビューの Polygon Collider のサイズ(赤い枠で周囲がおおわれている)
Collider の検証動画
動画ファイルへのリンク
以上で設定は完了です。最後に、このコンポーネントを制御させるための機能を追加します。
６．CM vcam1 ゲームオブジェクトに Cinemachine Confiner コンポーネントを追加して設定を行う
ヒエラルキーの CM vcam1 ゲームオブジェクトを選択し、Chinemachine Virtual Camera コンポーネント 内の Extensions の部分にある Add Extension を選択します。
プルダウンメニューが開きますので、Chinemachine Confiner2D を選択してください。新しく Chinemachine Confiner 2D コンポーネントが追加されます。
この機能を利用することで、Polygon Collider 2D コンポーネントで設定した範囲をCinemachine のカメラの稼働範囲として設定することが可能になります。
設定を１つ行います。
Bounding Shape 2D の部分に、Camera Confiner ゲームオブジェクトをドラッグアンドドロップしてアサインします。
Polygon Collider 2D コンポーネントが自動的に登録されます。
インスペクター画像
以上で設定は完了です。
７．ゲームを実行して動作を確認する
すべての設定が完了しました。どの機能がどのようにつながっているかを確認してから、ゲームを実行してください。
プレイヤーキャラを移動させてみてください。画面の端に移動した際に、Polygon Collider 2D コンポーネントのコライダーの範囲内でカメラが移動を停止するようになれば制御成功です。
＜実装動画＞
動画ファイルへのリンク
今回は Cinemachine の機能を利用することで、すべてノーコードで(スクリプトをかかずに)実装を行うことができました。
以上でこの手順は終了です。
次は 手順１０ −味方キャラの４方向分の移動アニメの作成と BlendTree による移動アニメの切り替え機能の実装− です。
コメントをかく