Unityに関連する記事です

 プレイヤーを中心としてカメラが追従する機能を実装できましたが、このままですと、製作されていないゲーム画面外もカメラが映してしまう状態になっています。

 今回の手順では、このカメラの移動範囲を制限し、ゲーム画面のみにカメラを収める制御する処理を実装します。


<実装動画>
動画ファイルへのリンク


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

手順13 ーカメラの移動範囲の制御ー
16.カメラの移動範囲をゲーム画面内に収める制御を実装する



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

 ・Layer Collision Matrix の設定
 ・Polygon Collider 2D コンポーネント
 ・Chinemachine Confiner コンポーネント



16.カメラの移動範囲をゲーム画面内に収める制御を実装する

1.設計


 Virtual Camera がプレイヤーキャラの移動に合わせて追従するようになりました。
そのためプレイヤーキャラを常にゲーム画面の中央位置に映した状態でゲームが進行するようになりました。

 実際にプレイヤーキャラを移動していて、カメラの制御に問題があることに気づいたと思います。

 プレイヤーキャラをゲーム画面の端まで移動した際に、プレイヤーキャラを中心にカメラが移動していることにより、
ゲーム画面内に、作りこんでいない部分が映りこんでしまっています。


Game ビュー画像(画面下部にゲームのタイルのない背景部分が見えてしまっている)



 このままですとゲーム画面には映したくない部分まで映ってしまうことになりますので、
この部分を制御する処理を考えて実装します。



 対応方法はいくつかありますが、今回は Cinemachine のカメラを利用していますので、こちらの可動範囲を制限する処理によって対応しようと思います。

 具体的には、ゲーム画面に映したい大きさでコライダーを作成して、そのコライダーの内側に Cinemachine のカメラを閉じ込める機能を利用することにより、
プレイヤーキャラがゲーム画面の端まで移動した際には、カメラの移動がコライダーの範囲内で移動を制限し、ゲーム画面外を映さないように制御を施していきます。


<実装動画>
動画ファイルへのリンク


 上記の動画の Sceneビュー を確認してください。白い長方形がカメラの映している範囲です。
プレイヤーキャラが画面の下まで移動するとカメラが画面外には移動せずに、プレイヤーキャラのみがカメラの範囲内で移動し、カメラはコライダーの設定した範囲内で収まっています
そして、プレイヤーキャラが画面内に再度移動することに合わせて、またプレイヤーキャラを画面の中央に沿えてカメラの移動が始まっています

 この機能を実装します。 


2.CameraConfiner ゲームオブジェクトを作成する


 ヒエラルキーの空いている部分で右クリックをしてメニューを開き、Create Empty を選択して、新しいゲームオブジェクトを1つ作成します。
名前を Camera Confiner に変更します。


ヒエラルキー画像



 このゲームオブジェクトにコライダーを設定し、そのコライダーの範囲内のみを Chinemachine のカメラが移動するようにしていきます。
 

3.新しい 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 レイヤーの設定を行います。


4.Layer Collision Matrix の設定を行う


 レイヤーの設定を行うことにより、特定のレイヤー間の接触判定のみを感知したり、あるいは特定のレイター間を無視したりすることが出来ます。

 Unity Editor の左上のメニューより、Edit => Project Settings を選択します。
Project Settings ウインドウが開きますので、左側の項目より、Physics 2D を選択します。
右側の内容が選択した項目の内容に切り替わりますので、一番下までスクロールしてください。
Layer Collision Matrix という部分が表示されます。

 Confiner のレイヤーのチェックをすべて外して、下記の画像のようにしてください。


Layer Collision Matrix



 これで Confiner のレイヤーが設定されているゲームオブジェクトのコライダーは、
いずれのレイヤーのゲームオブジェクトのコライダーとも接触判定を行わない状態になりました。

 以上で設定は完了です。


5.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 の検証動画
動画ファイルへのリンク


 以上で設定は完了です。最後に、このコンポーネントを制御させるための機能を追加します。


6.CM vcam1 ゲームオブジェクトに Cinemachine Confiner コンポーネントを追加して設定を行う


 ヒエラルキーの CM vcam1 ゲームオブジェクトを選択し、Chinemachine Virtual Camera コンポーネント 内の Extensions の部分にある Add Extension を選択します。
プルダウンメニューが開きますので、Chinemachine Confiner を選択してください。新しく Chinemachine Confiner コンポーネントが追加されます。

 この機能を利用することで、Polygon Collider 2D コンポーネントで設定した範囲をCinemachine のカメラの稼働範囲として設定することが可能になります。


インスペクター画像





 設定を2つ行います。
 
 Confine Mode を Confine 2D に変更します。

 Bounding Shape 2D の部分に、Camera Confiner ゲームオブジェクトをドラッグアンドドロップしてアサインします。
Polygon Collider 2D コンポーネントが自動的に登録されます。


インスペクター画像


 
 以上で設定は完了です。



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


 すべての設定が完了しました。どの機能がどのようにつながっているかを確認してから、ゲームを実行してください。

 プレイヤーキャラを移動させてみてください。画面の端に移動した際に、Polygon Collider 2D コンポーネントのコライダーの範囲内でカメラが移動を停止するようになれば制御成功です。


<実装動画>
動画ファイルへのリンク

 
 今回は Cinemachine の機能を利用することで、すべてノーコードで(スクリプトをかかずに)実装を行うことができました。



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

 次は 手順14 −NPC との会話イベントの実装− です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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