Unityに関連する記事です

 この手順では複数のカメラを用意して、ボタンを押すたびにカメラが切り替わる処理を実装します。
いままでの視点である三人称視点のカメラに加えて、一人称視点カメラ自撮り視点カメラを追加します。

<完成動画>
https://gyazo.com/d66394aca356a4e9084e42a97b8c75ea


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

手順23 −一人称視点カメラと自撮り視点カメラの実装−
38.一人称視点カメラと自撮り視点カメラを作成する
39.Canvas内にUI部品を作成するァ淵メラ切り替え用のボタン)
40.スクリプトを使って、一人称視点カメラと自撮り視点カメラの切り替えを制御する



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

 ・switch 文の分岐内容に自分でコメントを書いてみる



38.一人称視点カメラと自撮り視点カメラを作成する

1.設計


 新しく作成するカメラは常にキャラと一緒に追従して動くようにするため、Penguin ゲームオブジェクトの子オブジェクトとして作成します。
子オブジェクトは親子関係を利用して、親オブジェクトと一緒に移動をするため、こうすることでスクリプトの制御を行わずに追従の制御を行うことが出来ます。


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



 2つの Camera コンポーネントを持つゲームオブジェクトを作成して、それぞれの映す範囲を設定し、一人称視点と自撮り視点を固定しておきます。

 カメラの作成が終了したら、カメラの切り替えを操作するボタンを画面に配置し、それをスクリプトから制御を行うロジックとします。

 最初にカメラを2つ追加していきます。


2.Penguin ゲームオブジェクトの子オブジェクトとして、FPSCamera ゲームオブジェクトを作成する


 Penguin ゲームオブジェクトを選択した状態で右クリックをしてメニューを開き、Camera を選択します。
Camera コンポーネントがアタッチされているゲームオブジェクトが Penguin ゲームオブジェクトの子オブジェクトとして作成されます。
名前を FPSCamera に変更してください。このゲームオブジェクトが一人称視点のカメラの役割を持ちます。


ヒエラルキー画像


 
 最初に、AudioListener コンポーネントを Remove してください

 Unity ではこのコンポーネントを利用してゲーム内の音をスピーカーに出力しています。
このコンポーネントはゲームシーンに1つだけ存在していれば動作し、すでに Main Camera ゲームオブジェクトにアタッチされているため
2つ目以降の AudioListener コンポーネントは不要になるためです。


 続けて、下記のSceneビュー画像やインスペクター画像を参考にしながら、Gameビューに移る映像が、一人称視点となるようにカメラの位置を調整してください。
ゲームを実行し、キャラが見えない状態になり、一人称視点で落下している映像になれば問題ありません。


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



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



FPSCamera ゲームオブジェクト Gameビュー画像



 カメラの位置の調整が終了したら、Camera コンポーネントの Depth の値を 0 => -2 に変更してください。
Main Camera の Depth の値が -1 であるため、Gameビューに表示されるカメラの映像が Main Camera に戻ります。
(Depth の値が大きな Camera コンポーネントの情報で Gameビューに描画されます)


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



3.Penguin ゲームオブジェクトの子オブジェクトとして、SelfishCamera ゲームオブジェクトを作成する


 同じ手順でもう1つ、カメラを作成します。

 Penguin ゲームオブジェクトを選択した状態で右クリックをしてメニューを開き、Camera を選択します。
Camera コンポーネントがアタッチされているゲームオブジェクトが Penguin ゲームオブジェクトの子オブジェクトとして作成されます。
名前を SelfishCamera に変更してください。このゲームオブジェクトが自撮り視点のカメラの役割を持ちます。


ヒエラルキー画像



 こちらも最初に、AudioListener コンポーネントを Remove してください

 下記のSceneビュー画像やインスペクター画像を参考にしながら、Gameビューに移る映像が、自撮り視点となるようにカメラの位置を調整してください。
ゲームを実行し、キャラを自撮りしながら落下している映像になれば問題ありません。


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



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



SelfishCamera ゲームオブジェクト Gameビュー画像



 カメラの位置の調整が終了したら、Camera コンポーネントの Depth の値を 0 => -2 、あるいはそれ以下に変更してください。
理由は先ほどと同じで、Gameビューの表示を Main Camera のCameraコンポーネントを参照したものに戻すためです。
(FPSCamera ゲームオブジェクトの Camera コンポーネントの Depth の値も -2 ですので、同じ値に設定した場合には、
 ヒエラルキーの並び順が下にある Cameraコンポーネントの Depth が優先されますが、MainCamera の Depth が -1 ですのでGameビューへの影響はありません。)

 Camera コンポーネントの設定は特に必要ありませんが、Clipping Planes の far の値は 100 前後まで下げても問題ありません。
Depthの値、および、この機能がどういった作用をもたらしているかは、自分で調べて学習しておきましょう。


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



 以上でカメラの追加は完了です。


39.Canvas内にUI部品を作成するァ淵メラ切り替え用のボタン)

1.設計


 ゲーム画面にボタンを配置して、ボタンを押すたびにカメラを順番に切り替えるように制御を実装していきます。
 
 通常の三人称視点カメラ → 一人称視点カメラ → 自撮り視点カメラ → 通常の三人称視点カメラ とループするように制御します

 ボタンを設置するためには、 Button コンポーネントを持つゲームオブジェクトが必要になります。
Button コンポーネントを持つゲームオブジェクトは Canvas ゲームオブジェクトの子オブジェクトではないと動作しません。

 すでに Canvas ゲームオブジェクトには Buttons ゲームオブジェクトという、ボタン管理用のフォルダ役のゲームオブジェクトがありますので、
この Buttons ゲームオブジェクトの子オブジェクトとして、新しい Button ゲームオブジェクトを追加します。

 設置が完了したら、Button コンポーネントを制御するプラグロムを CameraController スクリプトに追加して Button コンポーネントとカメラを制御します。


ヒエラルキー画像 完成図



2.Buttons ゲームオブジェクトの子オブジェクトとして、btnChangeCamera ゲームオブジェクトを作成して設定を行う


 Buttons ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Button を選択します。
Button コンポーネントがアタッチされたゲームオブジェクトが新しく作成されますので、名前を btnChangeCamera に変更します。

btnChangeCamera ゲームオブジェクト ヒエラルキー画像



 btnChangeCamera ゲームオブジェクトはボタンの制御とボタンの背景画像の設定を行うゲームオブジェクトです。


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



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




 最初に btnChangeCamera ゲームオブジェクトの子オブジェクトにある Text ゲームオブジェクトは今回使用しませんので、これを削除します


 続いて、btnChangeCamera ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。

 背景用の画像ですが、インポートしたアセットから選択してもよいですし、画像をダウンロードしてきてインポートして利用しても、どちらでも構いません。
こちらの画像がゲーム画面に適用されます。

 今回はこちらのパスにある画像を利用しています。
Assets/JKT_Art/UI/Arrow/box_6.png

フォルダ画像




 画像を設定したら、大きさを調整します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、適宜なサイズに調整してください。(同じである必要はありません)


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



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



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



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



btnChangeCamera ゲームオブジェクト Gameビュー画像



 以上で設定は完了です。Button コンポーネントには変更はありません

 つづいてボタン用のアイコン画像用のゲームオブジェクトを btnChangeCamera ゲームオブジェクトの子オブジェクトとして作成します。


3.btnChangeCamera ゲームオブジェクトの子オブジェクトとして、imgCamera ゲームオブジェクトを作成する


 btnChangeCamera ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Image コンポーネントがアタッチされたゲームオブジェクトが新しく作成されますので、名前を imgCamera に変更します。


imgCamera ゲームオブジェクト ヒエラルキー画像



 imgCamera ゲームオブジェクトはボタンのアイコン画像の設定を行うゲームオブジェクトです。


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



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




 最初に画像を設定します。
imgCamera ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。

 アイコン用の画像ですが、インポートしたアセットから選択してもよいですし、画像をダウンロードしてきてインポートして利用しても、どちらでも構いません。
こちらの画像がゲーム画面に適用されます。

 今回はこちらのパスにある画像を利用しています。
Assets/Standard Assets/CrossPlatformInput/Sprites/ButtonCameraCycleUpSprite.png

フォルダ画像



 画像の設定が終了したら、Raycast Target のスイッチを外してオフにしておいてください



 画像を設定したら、大きさを調整します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、適宜なサイズに調整してください。(同じである必要はありません)


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



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



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



imgCamera ゲームオブジェクト Gameビュー画像



 以上でボタンの完成です。最後にスクリプトを修正して、ボタンとカメラとをスクリプトから操作制御できるようにします。


40.スクリプトを使って、一人称視点カメラと自撮り視点カメラの切り替えを制御する

1.設計


 カメラの制御には現在、CameraController スクリプトを利用しています。
カメラの切り替えもカメラに関連する処理ですので、こちらのスクリプトに記述を追加し、
カメラの制御はすべて CameraController スクリプトで管理できるようにしておきます。

 カメラの変更はボタンを押すたびに切り替わるように制御したいため、
スクリプトからは、カメラの操作、およびボタンの操作を行えるようにする必要があります。

 ロジックとしては、スクリプトにカメラの変更処理を行うメソッドを用意しておき、それをボタンを押すたびに呼び出します。 
メソッド内では現在のカメラの通し番号から、次のカメラの設定を行うように制御します。


2.CameraController スクリプトを修正する


 カメラとボタンを操作するために必要な型と変数をそれぞれ宣言しておきます。
いずれも SerializeField属性で宣言しておくことで、インスペクターからアサインを行えるようにします。

 ボタンの OnClick イベントには ChangeCamera メソッドを登録し、ボタンを押すたびにこのメソッドを呼び出し
カメラを順番に切り替えていく制御を行います。自撮りカメラの時にボタンを押したら、最初の三人称視点カメラに戻る制御をしています。
このメソッドにはコメント文を省略してありますので、処理を読んで自分でコメントを書いてみてください。


CameraController.cs

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





 スクリプトの修正が完了したので、MainCamera ゲームオブジェクトのインスペクターから CameraController スクリプトを確認します。
新しく宣言した変数のアサイン情報が3つ、表示されていれば問題ありません。


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



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


 アサインに必要な型(コンポーネント)が、どのゲームオブジェクトにアタッチされているかを確認して、アサインを行ってください。
手順は省略します。


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



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


 すべての手順が完了しましたので、ゲームを実行して、カメラのボタンを押してみてください。
押すたびにカメラが切り替われば制御成功です。追加したカメラは、キャラの子オブジェクトですので、
キャラの移動に合わせてちゃんと追従しています。
 姿勢の変更も可能ですが、当然、カメラも同じように変更されます。


<実行動画>
https://gyazo.com/29f55df429aec7665615534e6f0323b6


<検証動画 一人称視点で姿勢を変えると、ちゃんとカメラも目線に合わせて動く>
https://gyazo.com/07839449102a2f6b5b94e8f893d3bc5d


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

 => 次は 手順24 ーゲームクリア処理の実装ー です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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