Unityに関連する記事です

 この手順では、ゲーム画面に拠点の耐久力の値を表すゲージと現在値を作成します。
次の手順ではスクリプトを利用して、このゲージと現在値にゲーム内の値を反映してゲージを制御するようにします。

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

<完成画像>



手順14 ー耐久力用のゲージと数字表示の作成ー
29.Canvas内に BottomUI ゲームオブジェクトと GaugeSet ゲームオブジェクト群を作成し、ゲーム画面に耐久力を表すゲージと数字を表示できるようにする



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

 ・アンカー設定
 ・親子関係の利用方法



29.Canvas内に BottomUI ゲームオブジェクトと GaugeSet ゲームオブジェクト群を作成し、ゲーム画面に耐久力を表すゲージと数字を表示できるようにする

1.設計


 この手順では、Canvas ゲームオブジェクト内に拠点の耐久力をユーザーに伝えるための情報として、耐久力の値のゲージと、数字の表示用のゲームオブジェクト群を製作していきます。
このゲームオブジェクトもゲーム画面に映る必要のあるゲームオブジェクトですので、 Canvas ゲームオブジェクトの子オブジェクトとしてゲームオブジェクトを作成していきます。

 今回用意するゲームオブジェクト分は UI と呼ばれるもので、常に固定した位置に表示して、ユーザーに情報を伝える役割を持ちます。
ここでは、耐久力のゲージと数字表示を管理するためのフォルダ役のBottomUI ゲームオブジェクト、耐久力関連の表示設定するゲームオブジェクト群を順番に作成します。

 UI については、こちらに詳細をまとめてありますので、学習しておいてください。 => 画面UI


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


 Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します
新しく空のゲームオブジェクト(Transfrom コンポーネントのみアタッチされている、役割のまだないゲームオブジェクト)が作成されますので、名前を BottomUI に変更します。
BottomUI ゲームオブジェクトは、ゲームの下部に位置するゲームオブジェクト群をまとめておくための、フォルダ役のゲームオブジェクトです。
今後、耐久力のゲージだけではなく、他にも画面の下部に固定して表示する情報が増えることを想定し、このゲームオブジェクトをフォルダ役として用意します。


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



 BottomUI ゲームオブジェクトを選択して、RectTransform コンポーネントがアタッチされているか確認します。
Canvas ゲームオブジェクトに含まれるオブジェクトは Transform コンポーネントではなく、RectTransform コンポーネントによって位置情報を管理しています
もしも通常の Transform コンポーネントがアタッチされている場合には、再度作り直してください。


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



BottomUI ゲームオブジェクト Sceneビュー画像(Sceneビューの中央にある)



 続いて、このゲームオブジェクトの設定を行います。


3.BottomUI ゲームオブジェクトのアンカーを設定する


 BottomUI ゲームオブジェクトの位置とアンカーを変更します。
RectTransform コンポーネント内にある Anchor(アンカー)をクリックして、Alt キーを押しながら、Bottom Center の位置をクリックしてください
BottomUI ゲームオブジェクトが画面の下中央の位置に移動するとともに、アンカーの位置も画面下中央に設定されます。


<手順動画 アンカーの設定(Altキーを押しながらクリックすることで、アンカーの設定とゲームオブジェクトの移動が一緒に行われる)>
動画ファイルへのリンク


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



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



 以上でこのゲームオブジェクトの設定は完了です。


4.<アンカー設定>


 Canvas用のゲームオブジェクトの位置情報は RectTransform コンポーネントによって管理されています。
RectTransform コンポーネントを持つゲームオブジェクトは、ワールド座標による座標の計算ではなく、
親となるゲームオブジェクトからみてどの位置にいるかというローカル座標(相対座標)による座標の計算を行っています

 この RectTransform コンポーネントには通常の Transform コンポーネントにはない情報がいくつかあります。
その1つがアンカーです。


アンカーのアイコン

 

 アンカーとは、親のゲームオブジェクトからみて、このゲームオブジェクトの基準地点をどの位置に設定するか、という情報です。
ローカル座標によって座標を計算していますので、親のゲームオブジェクトからみて、どこから計算を始めるかというのは重要な設定情報です。
基本的には Middle Center という設定になっており、親のゲームオブジェクトからみて中心の位置をアンカーに設定しています。


アンカーの設定

 

 今回、BottomUI ゲームオブジェクトに設定したアンカーは、Bottom Center の位置です。(これはプリセット情報なので、もっと詳細に自分でも設定できます。)
親オブジェクトである Canvas ゲームオブジェクトからみて、画面の中心を基準値としてではなく、画面の下中央を基準として座標の計算を行うようにしています。
 
 理由としては、ゲーム画面の比率が変化した際に、RectTransform コンポーネントを持つゲームオブジェクトは、アンカーの位置を基準に配置されるため
画面の比率が変化しても、その状態に対応して、自分の位置を設定してくれるようになるためです

 例えば今回のように下中央にアンカーを設定しておくと、どのゲーム画面でゲームを実行しても、常に画面の下中央からみて座標の計算をして、ゲームオブジェクトを配置してくれます
そうすることによって、ゲーム画面を変えたらUIの表示が見えなくなってしまった、という事態を回避出来るようにしています。


参考サイト
Unity公式ユーザーマニュアル
基本的なレイアウト
https://docs.unity3d.com/ja/2018.4/Manual/UIBasicL...
徒然エンジニアブログ様
【Unity】UIの基本(Canvas,描画順,アンカー,ピボット)を徹底解説してみる
https://turedureengineer.hatenablog.com/entry/2019...


5.BottomUI ゲームオブジェクトの子オブジェクトとして、imgBackground ゲームオブジェクトを作成して設定を行う


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


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



 imgBackground ゲームオブジェクトはゲーム画面の下部(いわゆるフッターの位置)の背景画像の表示を行うゲームオブジェクトです。
この部分から背景が変わることで、ユーザーに、ここはゲーム画面でも違う要素が集まっている部分であることを伝える役割を持ちます。


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



imgBackground ゲームオブジェクト Sceneビュー画像(画面下部中央の白い画像)



 続いて、imgBackground ゲームオブジェクトの設定を行います。3つの手順がありますので、順番に設定していきます。



 最初に、画像を設定します。

 imgBackground ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。
現在は None になっており、画像が何も設定されていない状態です。

 Source Image の右側にある丸いボタンを押すと Select Sprite ウインドウが開き、設定可能な画像を選択できます。
Background という Unity が用意している UI 用の背景画像がありますので、こちらを選択してください。

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


画像の設定




 続いて、Source Image の下にある Color で色を設定します。
黒系の色で、透明度を下げて半透明の状態にしてください。細かい数字は気にしなくて問題ありません。
SceneビューとGameビュー画像を見ながら、自分の好みの色に設定してください。

 この部分が、UI を表示している部分であることをユーザーに伝えることが目的です。
自分が遊ぶときの目線で考えて設定していきましょう。


インスペクター画像(Color には設定している色と、色の下には透明度がゲージで表示される)



Sceneビュー画像




 最後にサイズと位置を変更します。横幅は画面のサイズか、あるいは少し大きめに設定してください。
縦幅は 600 程度に設定してください。これはどちらも、自分の画面のサイズを見ながら調整を行ってください。

 配置のイメージは、ダメージ用の画像の下から画面の一番下までをカバーするような、サイズと位置に設定してください。
そのため、Sceneビューだけではなく、Gameビューも確認しながら配置することが大切になります。


imgBackground ゲームオブジェクト インスペクター画像(数字は参考程度です)



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



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


 これで拠点よりも下の部分の色が変わり、ここから情報が変わることを示唆できるようになりました。

 以上で設定は完了です。


6.BottomUI ゲームオブジェクトの子オブジェクトとして、GaugeSet ゲームオブジェクトを作成する


 BottomUI ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します
新しく空のゲームオブジェクトが作成されますので、名前を GaugeSet に変更します。
GaugeSet ゲームオブジェクトは、耐久力のゲージ表示用のゲームオブジェクト群をまとめておくための、フォルダ役のゲームオブジェクトです。


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



 このゲームオブジェクトの中に、耐久力のゲージ用のゲームオブジェクトや、耐久力の数字を表示するゲームオブジェクトを作成して配置していきます。
また、一番最後に、このゲームオブジェクトの位置を調整して、ゲージの位置を調整します


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



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



 以上でこのゲームオブジェクトの設定は完了です。


7.GaugeSet ゲームオブジェクトの子オブジェクトとして、Slider ゲームオブジェクトを作成する


 GaugeSet ゲームオブジェクトをヒエラルキーで選択して右クリックをしてメニューを表示します。
UI => Slider を選択します。Slider コンポーネントを持つ Slider ゲームオブジェクトが一式、GaugeSet ゲームオブジェクトの子として追加されます。


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



 Slider ゲームオブジェクトには始めから複数のゲームオブジェクトが子、孫として不随しています

 このうち、Handle Slide Area ゲームオブジェクトとその子オブジェクトである Handle ゲームオブジェクトについては
今回は不要であるため、削除して以下の画像のような状態にしてください。


ヒエラルキー画像


 それでは Slider ゲームオブジェクト、および子オブジェクトと孫オブジェクトの設定を行います。


8.Slider ゲームオブジェクトの設定を行う


 Slider ゲームオブジェクトのサイズがゲージのサイズになりますので、この手順ではサイズの変更を行います。


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



 自分の画面サイズの横幅に合わせて、ゲームオブジェクトのサイズ(Width)を変更してください。横幅よりも少し小さめにするといいでしょう。
縦幅は 200 前後(これも画面サイズによる)に設定してください。
 

Slider ゲームオブジェクト インスペクター画像(Width と Heightは参考値)




 続いて、Slider コンポーネントの設定を行います。


初期インスペクター画像



 Slider の方向は、横向き・縦向きに変更できます。また、どちらの方向を最大値とするかも変更できます。
例えば、上下に動くスライダーを作成したとして、上を最大値にするのか、下を最大値にするのかを設定できます。

 今回は横方向にスライダーのゲージを変化するようにし、ゲージの最大値を右側に設定します。
これは Slider の初期設定値になっていますので、この設定は変更なしでそのまま利用できます。
実験として、自分で設定を変更してみて、どのように変化するかを確認しておきましょう。

 また Value という値が、ゲージの現在値を現しています。初期設定では、0 - 1.0f のfloat 型で設定されています。
この部分もそのまま使いますので、設定の変更は不要です。実際に数字を動かして、画面でどのように動くかを確認しておいてください。
 
 この Value の値をスクリプトから操作することによって、ゲーム内の耐久力の値に合わせてゲージの位置を制御させます。
多くの場合 Unity ではスクリプトで操作したい場所をこのようにエディターから確認することが出来ますので、
どのような処理を実装するのかイメージを作るためにも実際に操作する場所、操作したらどうなるかを事前に自分で把握しておくことが大切です。

 Slider の機能に関しては変更がありませんので、上記の部分をしっかりと確認して、自分で動かしてみてください。

 最後に、Interractable のチェックを外してオフの状態にしておいてください。

 このチェックが入っていると、ゲーム中で自由に Slider の Value の値を操作出来てしまいます。
試しにチェックを入れたままゲームを実行し、Slider の上でドラッグアンドドロップしてみてください。ゲージが動いてしまうことが分かります。

それではゲームの情報として役に立ちませんので、この Interactable のスイッチはオフにしてください。


設定後のインスペクター画像



SceneビューとGameビュー画像



 以上でこのゲームオブジェクトの設定は完了です。


9.Background ゲームオブジェクトの設定を行う


 Slider ゲームオブジェクトの子オブジェクトである、Background ゲームオブジェクトの設定を行います。

 Image コンポーネントの Raycast Target のスイッチを外してオフの状態にしてください。

 そのほか、サイズや画像などは特に変更しなくても問題ありません。
この画像を変更すると、ゲージの外枠の画像を設定することが出来ます。そのままでもよいですし、自由に変更していただいて構いません


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



 以上でこのゲームオブジェクトの設定は完了です。


10.Fill Area ゲームオブジェクトの設定を行う


 スライダー(ゲージ)の動く範囲を設定します。

 RectTransfom コンポーネントの Left と Right の値をそれぞれ 0 に設定してください。
この値が 0 にすることで、スライダーのゲージを一番左端からスタートさせる(Value が 0 のとき)ことが出来ます。


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



 以上でこのゲームオブジェクトの設定は完了です。


11.Fill ゲームオブジェクトの設定を行う


 実際にゲージとして動く部分のゲームオブジェクトです。
画像を設定すると、その画像をゲージとして利用することが出来ます。

 最初に RectTransfom コンポーネントの Width の値を 0 に変更してください。
理由は Fill Area ゲームオブジェクトとおなじで、ゲージの位置を左端からスタートするためです。

 今回は画像の変更はせずに、色のみ青い色に変更しています。画像、色ともに、自由に設定してください。

 色の設定後は Image コンポーネントの Raycast Target のチェックを外してオフの状態にしてください。


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



 以上で Slider ゲームオブジェクト関連の設定は完了です。
最後に、耐久力の数字を表示するためのゲームオブジェクトを作成します。


12.GaugeSet ゲームオブジェクトの子オブジェクトとして、txtDurability ゲームオブジェクトを作成して、設定を行う


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

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



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


 
 続いて設定を行います。サイズの変更と、文字の大きさなどを調節しましょう。



 サイズですが、横幅(Width)については、Slider ゲームオブジェクトのサイズを参考して設定します。同じ大きさで問題ありません。
縦幅については 150 前後とし、ゲージのサイズよりも小さめに設定します。

 Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックを入れてオンの状態にしてください。


インスペクター画像




 次に Text コンポーネントの設定を行います。

 Text プロパティ欄100 / 100 と半角で入力してください。
この値はスクリプトより変更しますので、どのように表示されるのか、文字のサイズなどの設定用に使うためのものです。

 フォントは自由に設定してください。Unity のフォントでもよいですし、無料のフォントをダウンロードしてインポートして利用してもいいです。
インポートする際には、Fonts フォルダを用意して、その中にドラッグアンドドロップしてインポートするようにしてください。
解凍されていないファイルはインポートできませんので、解凍してからインポートします。

 数字だけを扱うフォントもありますので、色々なフォントを探して、自分の好みで設定してください。

 文字のサイズ100 前後に設定してください。これはフォントの種類によって前後します。
スライダーのゲージの中に収まる位の大きさに設定してあれば問題ありません。

 文字の位置中央寄せ・中央位置にて設定します。

 文字の色Color で設定できます。初期設定の黒字のままでもよいです。
今回の例では、黒の縁取りを Outline コンポーネントで装飾し、文字の色は白に設定しています。
この辺りの設定も自由に変更してみてください。

 設定が多く大変ですが、それだけ多くの情報を変更し、自由に設定が可能になっています。
操作を繰り返すことで覚えることが早く的確になります。


 最後に Raycast Target のチェックを外してオフの状態にしてください。


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



Sceneビュー画像



 サイズなどのチェックが終了したら、Text プロパティ欄に入力した 100 / 100 の文字列を削除してください。
以上で設定は完了です。


13.GaugeSet ゲームオブジェクトの位置を変更する(親子関係を利用する)


 すべてのゲームオブジェクトを作成しましたので、親オブジェクトである GaugeSet ゲームオブジェクトを上方向に移動して適宜な位置に調節します。
子オブジェクトは親オブジェクトに合わせて移動しますので、このような構造にしておくことで、1つずつの位置を変更する手間が省けます。
 
 目標地点は、拠点のダメージエリア画像の下です。画面のサイズにもよりますが、Position Y が 370 〜 400 位になるようにすると拠点の画像の下辺りにくると思います。
その上で、必要に応じて、子オブジェクトの位置を微調整してください。


インスペクター画像(参考値)



Sceneビュー画像



Gameビュー画像 Value 0



Gameビュー画像◆Value 操作時


 以上で完成です。


14.動作を確認する


 Slider ゲームオブジェクトの Value の値を操作してみましょう。
Sceneビューと Gameビューでゲージが動いていれば成功です。


<検証動画 Slider の Value の値を操作して動作を確認する>
動画ファイルへのリンク


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

 次は 手順15 ー耐久力用のゲージと数字表示のスクリプトによる制御処理の実装ー です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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