Unityに関連する記事です

 前回の続きから実装します。

 キャラと水面までの距離を計算することができるようになりましたので、
この手順ではその距離の値を常時画面に表示し、あとどの位で水面についてしまうのかをユーザーに伝えるようにします。


<完成画像>



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


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

手順14 −距離の表示処理の実装−
22.Canvas内にUI部品を作成する◆文什澆竜離表示)
23.画面に現在の距離を更新表示する



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

 ・ToStringメソッドの引数



22.Canvas内にUI部品を作成する◆文什澆竜離表示)

1.設計



<完成図>
https://gyazo.com/151ee074c84fd6f06782161a5cb3c2ec



 前回の手順で作成したスクリプトには距離の値が変数として追加されました。
こちらの情報をゲーム画面に表示して、落下に合わせて、キャラと水面までの距離がカウントダウンして徐々に近づいていく様子の表示を実装します。

 必要な情報としては距離の値の変数ですが、スコアのときとおなじで、距離の値をゲーム画面に反映するためのゲームオブジェクトも必要になります。

 スコアを表示する際にも利用したUIをここでも利用しましょう。
Canvas というコンポーネントを持つゲームオブジェクトの中に(子オブジェクトとして)
ゲームオブジェクトを設置することで、ゲーム画面の一定の位置に常に情報を表示する機能を実装出来ます。

 制御の内容としては、ゲーム画面の右下に常時距離の数字の表示を行い、落下に合わせてこの数字を更新するようにします。





 最初に距離の値の表示を行うためのゲームオブジェクトの作成を行います。
それから、距離の計算を行っているスクリプトを修正して、距離の変数の情報を、距離の値表示用のゲームオブジェクトに対して送り出す制御を実装します。


ヒエラルキー画像 完成図



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


 ヒエラルキーの構成の画像をみていただくと分かりますが、スコアの表示を作成した場合と同じ方法で順番に作成していきます。

 すでに Canvas ゲームオブジェクトがありますので、こちらをそのまま利用しましょう。

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


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



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


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



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




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


<手順動画 アンカーの設定(Altキーを押しながらクリックすることで、アンカーの設定とゲームオブジェクトの移動が一緒に行われる)>
https://gyazo.com/ec98ea5bc979c608b0331987230d6e17


Distances ゲームオブジェクト アンカー設定後のインスペクター画像



Distances ゲームオブジェクト アンカー設定後のSceneビュー画像


 以上で設定は完了です。


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


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


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



 imgBackground ゲームオブジェクトは、距離の値の表示の背景画像の役割を持ちます。


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


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




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

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

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

フォルダ画像


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



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


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



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



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


 以上で設定は完了です。つづいて、この imgBackground ゲームオブジェクトに子オブジェクトを2つ追加していきます。


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


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

 lblDistance ゲームオブジェクトは、画面上に m (距離のメートルの略語)という文字列を常に表示する、ラベルの役割を持ちます。
このゲームオブジェクトではスコアの更新は行いません。


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



 lblDistance ゲームオブジェクトを選択し、Textコンポーネント の Text プロパティ欄に、"m" と入力してください
ラベル役のゲームオブジェクトですので、この文字列を常に画面に表示します。フォントの種類やサイズは適宜に調整してください。
文字の位置は左側・中央寄せに設定しています


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



 続いて、RectTransform コンポーネントを確認します。
Sceneビューと RectTransform の Position の値を調整して、適宜な位置に設置してください。
Gameビューで実際にどのように画面に映るか確認することも必要です


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



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



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



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


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

 txtDistance ゲームオブジェクトは、画面上に距離の値を表示する役割を持ちます。
このゲームオブジェクトの Text コンポーネントの機能を利用して、画面上に現在の距離の値を表示・更新していきます。


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



 txtDistance ゲームオブジェクトを選択し、Textコンポーネント の Text プロパティ欄に 0 と入力してください
ここにはゲーム中にスクリプトを利用して、動的に距離の値が表示されます。

 フォントのサイズは点数が目立つように、lblDistance ゲームオブジェクトの Text コンポーネント より少し大きめがいいでしょう。
フォントも同様に、lblDistance と同じフォントを選択してください。文字の位置は右寄せ・中央寄せに設定しています
こちらもRaycastTarget のチェックも外してください


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



 続いて、RectTransform コンポーネントを確認します。
Sceneビューと RectTransform の Position の値を調整して、適宜な位置に設置してください。
Gameビューで実際にどのように画面に映るか確認することも必要です。下記の画像も参考してください。
txtDistance ゲームオブジェクトと文字の下の高さの位置を合わせるようにしましょう


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



txtDistance ゲームオブジェクト Sceneビュー画像(txtDistance ゲームオブジェクトと文字の下の高さの位置を合わせる)



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



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



 以上の手順で距離の表示用のゲームオブジェクト群は完成です。


ヒエラルキー画像



Gameビュー 完成画像



23.画面に現在の距離を更新表示する

1.設計


 距離の変数と、その変数を表示するコンポーネントを持つゲームオブジェクトの配置が終了しましたので、
これらの処理をスクリプトを利用して紐づけて、Text コンポーネントに距離の値が表示されるようにロジックを考えていきます。

 スコア表示と同じ手法で距離の値をゲーム画面に表示しますので、スクリプトを見ずに挑戦出来る方はまずは自分で処理を書いてみましょう。
PlayerController スクリプトに記述しているスコア表示用の処理が参考になると思います。

 1点注意すべき点があります。それは、最後に着水した後の距離の表示です。
そのまま距離の変数の値を表示してしまうと恐らくマイナス表示になりますので、この制御も一緒に行いましょう。

 着水したら 0 と表示するようにしてください

 制御の方法も何種類かあります。表示する際に制御を行うのか、あるいは距離の変数の値に対して制御を行うのか、色々と考えて実装してみましょう。


2.距離の変数を記述したスクリプトを修正する


 前回の手順で作成した距離の変数を管理しているスクリプトに処理を記述します。

 上記の注意点を考慮しながら制御処理を記述してください。


GameManager.cs(自分で作成しているスクリプトがある場合には、そのスクリプトを修正する)

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



3.<ToString()メソッドの引数>


 距離の計算は小数点付で計算されています。このときこの値をそのまま画面に表示すると、小数点が非常に多く見にくくなってしまいます。
そのような場合には、ToStringメソッドの引数を利用して表示する値を整数のみ、あるいは指定した小数点の位までにします。

txtDistance.text = distance.ToString("F2");

 ToString()メソッドの引数に "F2" が指定されています。このメソッドは引数に指定した文字列によって表示方法を変化させることができます。
今回の F2 では、小数点第2位までを表示するように指定して、int型をstring型にする処理を行っています。
F の後ろの数字が小数点の位を指定しており、F0 の場合には少数点なし、F1 の場合には小数点第1位まで表示、というように表示方法の指定が可能です。

 実際にいろいろな値にして小数点表示を試してみましょう。


4.距離の変数を持つスクリプトがアタッチされているゲームオブジェクトのアサイン情報に Text コンポーネントがアタッチされているゲームオブジェクトをアサインする


 距離の変数を持つスクリプトがアタッチされているゲームオブジェクトを確認します。
インスペクターに新しく宣言した txtDistance 変数が表示されていますので、こちらに対象となるゲームオブジェクトをドラッグアンドドロップしてアサインします。
距離の値を更新させて表示するには Text コンポーネントを利用しますので、利用する予定の Text コンポーネントがアタッチされているゲームオブジェクトをアサインしましょう。
手順については割愛します。


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

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



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


 すべての処理の実装・アサインが完了したら、ゲームを実行して距離の値が表示されて、落下に合わせて更新されていくか確認してください。
また、落下が終了したとき、表示される値がマイナスの値ではなく、0 になるように制御されているかも確認します。

<実行動画>
https://gyazo.com/151ee074c84fd6f06782161a5cb3c2ec


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

 => 次は 手順15 −キャラの姿勢変更の制御− です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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