Unityに関連する記事です

 2回の手順に分けてゲーム画面にミニマップを表示する機能の実装を行います。

<完成時の Game ビュー画像>




<新しく学習する内容>
 ・RenderTexture
 ・Mask コンポーネント
 ・RawImage コンポーネント



設計


 ミニマップを画面内の邪魔にならない位置に表示し、ゲーム画面を上空から俯瞰して見えるようにする機能を実装します。
 
 今回の手順では必要なゲームオブジェクトの作成を行い、次の手順でスクリプトを作成して、ミニマップの制御を行うようにします。

 こちらのサイトを参考にしております。
https://qiita.com/CdecPGL/items/ce0b5c16caecd624d2...
https://unity.moon-bear.com/unitychan-coin/minimap...



新しい Layer の作成


 カメラに映るゲームオブジェクトの種類を Layer によって制御できるように、新しい Layer を作成します。

 Ground と GroundDetector の2つを作成してください。

 地面用のゲームオブジェクトの Layerには Ground を設定し、
他にミニマップに表示したいゲームオブジェクトの Layer には GroundDetector を設定します。


Tags And Layers インスペクター画像



RenderTexture の作成


 RenderTexture は、リアルタイムに描画を行うタイプのテクスチャです。
今回の場合であれば、カメラの画像をリアルタイムに投影させるテクスチャとして利用しています。

 任意のフォルダ内で Create => RenderTexture を選択することで新しい RenderTexture を作成できます。
名前は MinimapRenderTexture のように、わかりやすい名称にしておいてください。

 特に設定を変更する必要はありません。
インスペクターで設定可能な項目の詳細については、Unity のマニュアルなどを参考にしてください。





参考サイト
Unity 公式マニュアル
レンダーテクスチャ
https://docs.unity3d.com/ja/current/Manual/class-R...
はなちるのマイノート 様
【Unity】3分で分かるRenderTextureを使ってRawImageにカメラの映像を写す手順
https://www.hanachiru-blog.com/entry/2020/12/03/12...


MinimapCamera の作成


 ミニマップ用のカメラを新しく作成します。

 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Camera を選択します。
新しい Camera ゲームオブジェクトが作成されますので、名前を MinimapCamera に変更します。

 各項目の設定を順番に行います。


 Clear Flags の設定を Solid Color に変更します。
Background の項目が追加されて、背景色を選択できるようになりますが、初期設定の黒のままで問題ありません。

 Culling Mask の設定を行い、Ground と GroundDetector の2つの Layer のみを選択します。
こうすることにより、指定した Layer のゲームオブジェクト群のみを描画するカメラになります。

 Projection Type の設定を Orthographic に設定します。3D空間を平行投射して描画するカメラになります。

 Size の値は 10 〜 15 前後にします。この値によって、カメラの描画範囲が変化します。

 Clipping Planes の設定のうち、Far の値を 30 前後に下げます。これはカメラが映す距離の最大値です。
遠くまで描画を行う必要がないため、数値を下げて、必要な範囲だけを描画するようにし、カメラによる描画負荷を下げます。

 Target Texture の部分に、先ほど作成した MinimapRenderTexture をドラッグアンドドロップしてアサインしてください。
これで、MinimapCamera が描画した内容が、MinimapRenderTexture にも描画させるようになります。


 それ以外の部分は初期設定のままで問題ありません。





Culling Mask の内容



参考サイト
XR-HU3 様
【Unity】カメラの基本設定を理解しよう!|Camera入門
https://xr-hub.com/archives/5914


ミニマップのフレーム用の画像とマスク用の画像をインポートする


 下記のサイト内から、ミニマップ用の2つの画像をダウンロードして Unity へインポートしておきます。
専用のフォルダを作成しておくと管理しやすいです。

https://unity.moon-bear.com/unitychan-coin/minimap...


 インポートした画像の Texture Type を Default から Sprite(2D and UI) に変更しておいてください。


CanvasWithMinimap の作成


 新しい Canvas を作成します。
名前を CanvasWithMinimap に変更します。

 ここでは Canvas コンポーネントの Render Mode の設定が Screen Space - Overlay になっていますので、
通常の UI のように、常に前面にミニマップを表示させる設定ですが、World Space に変更して、ゲーム空間に配置しても構いません。

 Canvas Scaler コンポーネントの UI Scale Mode などの設定を行い、ゲーム画面と同じサイズに変更しておいてください。











Image の作成


 CanvasWithMinimap ゲームオブジェクトの子オブジェクトとして、新しい Image を作成します。
名称は任意に設定してください。

 こちらは、ミニマップを表示させるフレーム用の画像を設定します。
Image コンポーネントの Source Image に、先ほどインポートした画像の内の、フレーム用の画像をドラッグアンドドロップしてアサインしてください。








Mask の作成


 Image ゲームオブジェクトの子オブジェクトとして、もう1つ Image を作成します。
こちらの名称は Mask に変更してください。

 フレーム用の画像が丸い形状をしていますので、形状内のみ描画を行い、外側を表示しないようにするための、
マスクの設定を行うためのゲームオブジェクトです。

 インスペクターの一番下にある Add Component ボタンを押下して、Mask コンポーネントを追加してください。
Show Mask Graphic にチェックが入っている場合には、チェックを外しておいてください。
 
 Image コンポーネントの Source Image にはマスク用の画像を設定します。
先ほどインポートした画像の内の、マスク用の画像をドラッグアンドドロップしてアサインしてください。








参考サイト
Unity 公式マニュアル
Mask
https://docs.unity3d.com/ja/current/Manual/script-...
[Kan のメモ帳] 様
SpriteやImageでMaskを使って画像を任意の形に切り抜いて表示する 【Unity】【uGUI】
https://kan-kikuchi.hatenablog.com/entry/Mask
渋谷ほととぎす通信 様
【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要
https://shibuya24.info/entry/ugui_rect2dmask


RawImage_Minimap


 Texture の画像を表示させるためのコンポーネントとして RawImage コンポーネントが用意されています。
通常の Iamge コンポーネントは Sprite 形式の画像のみを UI として設定することができますが、
RawImage コンポーネントでは、UI 表示させるために、Sprite 形式以外の画像も設定することが可能です。
そのため、RenderTexture も設定することが出来ます。

 Mask ゲームオブジェクトの子オブジェクトとして、UI => RawImage を選択して、新しく RawImage ゲームオブジェクトを作成します。
名前は RawImage_Minimap に変更してください。

 RawImage コンポーネントの Texture の部分に、MinimapRenderTexture をドラッグアンドドロップしてアサインしてください。
これにより、MinimapRenderTexture に表示されているカメラが映している画面の内容を、RawImage コンポーネントが UI として表示するようになります。








参考サイト

Unity 公式マニュアル
Raw Image
https://docs.unity3d.com/ja/2018.4/Manual/script-R...



 以上で完成です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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