おはじきゲーム 手順１２
最終更新：
orika_ex_miyako 2020年10月18日(日) 16:45:47履歴
以下の内容で順番に実装を進めていきます。
手順１２ ーゲーム画面の上下部分にUIを作成ー
新しい学習内容は、以下の通りです。
２２．Canvas内にUI部品を作成する�◆焚萍名緝瑤伐蕊瑤縫好據璽垢鰺儖奸２萍眠蕊瑤房蟲紊了朕瑤鬟▲ぅ灰鵑鰺儖佞垢襦�
設計
画面上部と下部にUI表示用のスペースを確保します。
画面下部には手球の残数をアイコン表示します。
画面上部には後程、ゲームの残り時間、スコアなどを表示します。
すでに Wall の設定によって画面の上部と下部には手球も的球も侵入しない状態になっていますので
それに合うように大きさを調整して配置を行います。
完成時のヒエラルキー画像
画面上部用のUIを作成する
１．Top_UI ゲームオブジェクトを作成する
Canvas内で右クリックをしてメニューを表示し、Create Empty を選択し、名前を Top_UI に変更します。これを画面上部用のUIを入れるフォルダとして利用します。
下記の画像のような位置になっているか確認してください。(Canvas内にない場合、RectTransformコンポーネントがない場合には再度作り直してください)
Top_UIゲームオブジェクト インスペクター画像
２．BackGround ゲームオブジェクトを作成する
ヒエラルキーの Top_UI ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択します、名前を BackGround に変更します。
BackGround ゲームオブジェクトは、画面上部の範囲を表示する役割を持ちます。Imageコンポーネント の Source Image を設定してフレーム画像を設定してもいいです。
ここでは画面上部の範囲が分かるように、Image コンポーネントの Color の色を黒にし、透明度を半分に設定しています。
BackGroundゲームオブジェクト インスペクター画像
BackGroundゲームオブジェクト Sceneビュー画像
RectTransformコンポーネントを確認し、Wall_Top ゲームオブジェクトの範囲と同じになるように大きさを調整してください。
Sceneビューを見ながら合わせていくと調整しやすいです。
Wall_Top ゲームオブジェクトは見えないため、ユーザーはこの BackGround ゲームオブジェクトの範囲をそのままゲームの壁部分だと認識します。なるべく上手く合わせてください。
Sceneビュー画像 Wall_Topと同じ範囲内に入るように設置
以上で画面上部のUIの設置は完了です。今後逐次、残り時間を表示するUIなどを追加していきます。
画面下部用のUIを作成する
画面下部用のUIを作成していきます。手順としては、上部のUIと同じですが、こちらの方が手順が多いです。
１．Bottom_UI ゲームオブジェクトを作成する
Canvas内で右クリックをしてメニューを表示し、Create Empty を選択し、名前を Bottom_UI に変更します。これを画面下部用のUIを入れるフォルダとして利用します。
下記の画像のような位置になっているか確認してください。(Canvas内にない場合、RectTransformコンポーネントがない場合には再度作り直してください)
Bottom_UIゲームオブジェクト インスペクター画像
Bottom_UIのヒエラルキーの構成
２．BackGround ゲームオブジェクトを作成する
ヒエラルキーの Bottom_UI ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択します、名前を BackGround に変更します。
BackGround ゲームオブジェクトは画面上部の際と同じで、こちらは画面下部の範囲を表示する役割を持ちます。Imageコンポーネント の Source Image を設定してフレーム画像を設定してもいいです。
画面下部の範囲が分かるように、Image コンポーネントの Color の色を黒にし、透明度を半分に設定しています。
BackGroundゲームオブジェクト インスペクター画像
Sceneビュー
画面下部も画面上部と同じように、Wall_Bottomと同じ範囲になるようにRectTransformコンポーネントを調整して大きさを合わせてください。
Sceneビュー画像 Wall_Bottomと同じ範囲内に入るように設置
３．RemainingBall_Place ゲームオブジェクトを作成する
次の【２２】の手順で残り手球の数をアイコン表示する処理を行います。そのためにはここでアイコンを表示させる場所、それからアイコンも作成しておきます。
まずはこれらを管理するためのフォルダ役のゲームオブジェクトを用意します。
Bottom_UI ゲームオブジェクトの上で右クリックをしてメニューを表示し、Create Empty を選択します。名前を RemainingBall_Place に変更します。
これは次に作成するゲームオブジェクトたちのフォルダの役割になりますので、RectTransformコンポーネントを調整して Bottom_UI 内に収まるように適宜な位置に調整してください。
RemainingBall_Placeゲームオブジェクト インスペクター画像
Sceneビュー
４．RemainingBallTran ゲームオブジェクトを作成する
先ほど作成した RemainingBall_Place ゲームオブジェクトをヒエラルキーで選択し、右クリックしてメニューを表示します。
UI => Image を選択し、名前を RemainingBallTran に変更します。
RemainingBallTranゲームオブジェクトは、残り手球のアイコンを表示する位置を設定する役割を持ちます。
Sceneビューの画像を参考に、RectTransformコンポーネントを調整して適宜な位置に配置してください。
またここでは設定していませんが、Image コンポーネントの Source Image に画像を設定し、アイコン表示の背景用のフレームを設定しても構いません。
RemainingBallTranゲームオブジェクト インスペクター画像��
RemainingBallTranゲームオブジェクトのインスペクターの一番下にある Add Component をクリックし、GridLayoutGroup を探して追加してください。
このコンポーネントの機能を利用することで、アイコンを一定の大きさ・幅でキレイに並べて設置することが出来ます。
RemainingBallTranゲームオブジェクト インスペクター画像��
＜GridLayoutGroupの設定＞
GridLayoutGroupコンポーネントはLayoutを自動的に調整するコンポーネントの１つです。
設定によって縦方向でも横方向でも並べることができるため、汎用性が広いLayoutの調整が可能です。
今回設定を行ったプロパティについて説明していきます。
１．CellSize
CellSizeは、GridLayoutGroupの子オブジェクトとして配置されたゲームオブジェクトの大きさのWidthとHeightをこの大きさに自動的に調整します。
そのため元のゲームオブジェクトの大きさは使用されなくなります。
今回は x = 100, y = 100 で設定をしていますので、子オブジェクトは自動的にこのサイズのゲームオブジェクトに調整されます。
２．Spacing
Spacing は設定したx と y の値の分だけ、隣あうゲームオブジェクトとの間にスペースを自動的に取ってくれる機能です。
この値を 0 にすればスペースのない間隔でゲームオブジェクト同士が並びます。x は横方向のスペース、y は縦方向のスペースの距離です。
今回は x = 20 に設定していますので、ゲームオブジェクト同士は横に 20 のスペースを取って自動的に並ぶようになります。
３．StartCouner
子オブジェクトを並べ始めるスタート地点です。プルダウンメニューから選択可能です。
今回は Upper Left の設定にしていますので、子オブジェクトは画面の左上から順番に並び始めるようになります。
４．Start Axis
子オブジェクトを並べる方向です。縦方向に並べる場合には Vertical、横方向に並べる場合には Horizontal を選択します。
今回は横方向に並べてそろえたいので、Horizontal を選択しています。
５．ConstraintとConstraintCount
行と列の数を指定数で制約することができる機能です。プルダウンメニューで設定できます。
今回は Flexible に設定してるため、数を制約しません。
制約しない場合、GridLayoutGroup コンポーネントを持つゲームオブジェクトの大きさ内で1列に並び続け、範囲内に収まらなくなったときは自動的に次の行へ折り返して並べます。
検証画像 並ぶ範囲
新しいコンポーネントに触れたときは、自分で設定を変えて試してみてください。
また、マニュアルや、他の記事なども参考にしてください。
残りの手球数を表示するアイコン用のゲームオブジェクトを作成する
１．RemainingBallTran ゲームオブジェクトの子オブジェクトとして Image ゲームオブジェクトを作成して名前を IconRemainingBall 変える
RemainingBallTran ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択して子オブジェクトを作成します。
名前を IconRemainingBall に変更します。
この IconRemainingBall ゲームオブジェクトを手球の残り数の表示用アイコンとして利用します。１つの手球につき、１つのアイコンが表示される設計にします。
ヒエラルキー画像
２．IconRemainingBall ゲームオブジェクトの設定を行う
RectTransformコンポーネントについては、親オブジェクトである RemainingBallTran ゲームオブジェクトにGridLayoutGroupコンポーネントがアタッチされていますので
自動的に Width と Height の値が GridLayoutGroup で設定した Cell Size の値に変更になります。今回の設定値は (100, 100)です。
そのため IconRemainingBall ゲームオブジェクトからで直接この値を変更することはできません。
ゲームオブジェクトの大きさを調整したい場合には、GridLayoutGroup コンポーネントの Cell Size の値を修正して調整します。
Image コンポーネントの Source Image に、現在 CharaBall ゲームオブジェクトで使用している画像をアサインして利用します。
手球と同じ画像であることによって、このアイコンが手球の残り数であることをユーザーに認識してもらいます。
また Raycast Target のスイッチはオフにしておきます。
IconRemainingBallゲームオブジェクト インスペクター画像
Sceneビュー
GameSceneビュー
３．IconRemainingBall ゲームオブジェクトをプレファブにする
IconRemainingBall ゲームオブジェクトをプレファブにします。次の手順が終わってから削除するので、まだ削除はしないでください。
手順動画 プレファブにする
https://gyazo.com/0eefc42156ae93b34c46b58242cc1634
４．IconRemainingBall ゲームオブジェクトを複製して並べてみる
プレファブ化した IconRemainingBall ゲームオブジェクトを削除する前に、複製してみて横（水平）方向に整列していくかを確認してみます。
ヒエラルキーにある IconRemainingBall ゲームオブジェクトを選択した状態で、キーボードの Ctrl + D ボタンを押してください。
IconRemainingBall ゲームオブジェクトの複製が作られます。この手順を繰り返して、いくつか複製を作って横方向に並んでいくかを確認しましょう。
手球の初期値は 3 ですので、少なくとも3つ、IconRemainingBall ゲームオブジェクトが並べば問題ありません。
これは GridLayoutGroup コンポーネントが正常に機能しているかを確認するためです。
手順動画 並べて表示して、整列するかを確認する
https://gyazo.com/b14047224ebf45db3fd72f65fee5c52f
５．IconRemainingBall ゲームオブジェクトを削除する
IconRemainingBall ゲームオブジェクトと、複製して作成されたゲームオブジェクトをすべて削除します。
１つずつ削除しても構いませんが、一度にまとめて削除する方法があります。
左クリックしてゲームオブジェクトを選択する際に Shift キーを押していると、選択した範囲内をまとめて選択します。
その後、Delete を選択するか、キーボードの Delete キーを押せば、まとめて削除できます。
手順動画 複製したプレファブをすべて削除する
https://gyazo.com/432c98debd11ce6b6bb36446762fbc02
以上でこの手順は終了です。
次の手順では、このプレファブを利用して手球の数の分だけ、imgRemainingBall ゲームオブジェクトを手球の残数を示すアイコンとして作成します。
手順１２ ーゲーム画面の上下部分にUIを作成ー
２２．Canvas内にUI部品を作成する�◆焚萍名緝瑤伐蕊瑤縫好據璽垢鰺儖奸２萍眠蕊瑤房蟲紊了朕瑤鬟▲ぅ灰鵑鰺儖佞垢襦�
新しい学習内容は、以下の通りです。
・GirdLayoutGroupコンポーネントの設定と使用方法
２２．Canvas内にUI部品を作成する�◆焚萍名緝瑤伐蕊瑤縫好據璽垢鰺儖奸２萍眠蕊瑤房蟲紊了朕瑤鬟▲ぅ灰鵑鰺儖佞垢襦� 
設計
画面上部と下部にUI表示用のスペースを確保します。
画面下部には手球の残数をアイコン表示します。
画面上部には後程、ゲームの残り時間、スコアなどを表示します。
すでに Wall の設定によって画面の上部と下部には手球も的球も侵入しない状態になっていますので
それに合うように大きさを調整して配置を行います。
完成時のヒエラルキー画像
画面上部用のUIを作成する
１．Top_UI ゲームオブジェクトを作成する
Canvas内で右クリックをしてメニューを表示し、Create Empty を選択し、名前を Top_UI に変更します。これを画面上部用のUIを入れるフォルダとして利用します。
下記の画像のような位置になっているか確認してください。(Canvas内にない場合、RectTransformコンポーネントがない場合には再度作り直してください)
Top_UIゲームオブジェクト インスペクター画像
２．BackGround ゲームオブジェクトを作成する
ヒエラルキーの Top_UI ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択します、名前を BackGround に変更します。
BackGround ゲームオブジェクトは、画面上部の範囲を表示する役割を持ちます。Imageコンポーネント の Source Image を設定してフレーム画像を設定してもいいです。
ここでは画面上部の範囲が分かるように、Image コンポーネントの Color の色を黒にし、透明度を半分に設定しています。
BackGroundゲームオブジェクト インスペクター画像
BackGroundゲームオブジェクト Sceneビュー画像
RectTransformコンポーネントを確認し、Wall_Top ゲームオブジェクトの範囲と同じになるように大きさを調整してください。
Sceneビューを見ながら合わせていくと調整しやすいです。
Wall_Top ゲームオブジェクトは見えないため、ユーザーはこの BackGround ゲームオブジェクトの範囲をそのままゲームの壁部分だと認識します。なるべく上手く合わせてください。
Sceneビュー画像 Wall_Topと同じ範囲内に入るように設置
以上で画面上部のUIの設置は完了です。今後逐次、残り時間を表示するUIなどを追加していきます。
画面下部用のUIを作成する
画面下部用のUIを作成していきます。手順としては、上部のUIと同じですが、こちらの方が手順が多いです。
１．Bottom_UI ゲームオブジェクトを作成する
Canvas内で右クリックをしてメニューを表示し、Create Empty を選択し、名前を Bottom_UI に変更します。これを画面下部用のUIを入れるフォルダとして利用します。
下記の画像のような位置になっているか確認してください。(Canvas内にない場合、RectTransformコンポーネントがない場合には再度作り直してください)
Bottom_UIゲームオブジェクト インスペクター画像
Bottom_UIのヒエラルキーの構成
２．BackGround ゲームオブジェクトを作成する
ヒエラルキーの Bottom_UI ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択します、名前を BackGround に変更します。
BackGround ゲームオブジェクトは画面上部の際と同じで、こちらは画面下部の範囲を表示する役割を持ちます。Imageコンポーネント の Source Image を設定してフレーム画像を設定してもいいです。
画面下部の範囲が分かるように、Image コンポーネントの Color の色を黒にし、透明度を半分に設定しています。
BackGroundゲームオブジェクト インスペクター画像
Sceneビュー
画面下部も画面上部と同じように、Wall_Bottomと同じ範囲になるようにRectTransformコンポーネントを調整して大きさを合わせてください。
Sceneビュー画像 Wall_Bottomと同じ範囲内に入るように設置
３．RemainingBall_Place ゲームオブジェクトを作成する
次の【２２】の手順で残り手球の数をアイコン表示する処理を行います。そのためにはここでアイコンを表示させる場所、それからアイコンも作成しておきます。
まずはこれらを管理するためのフォルダ役のゲームオブジェクトを用意します。
Bottom_UI ゲームオブジェクトの上で右クリックをしてメニューを表示し、Create Empty を選択します。名前を RemainingBall_Place に変更します。
これは次に作成するゲームオブジェクトたちのフォルダの役割になりますので、RectTransformコンポーネントを調整して Bottom_UI 内に収まるように適宜な位置に調整してください。
RemainingBall_Placeゲームオブジェクト インスペクター画像
Sceneビュー
４．RemainingBallTran ゲームオブジェクトを作成する
先ほど作成した RemainingBall_Place ゲームオブジェクトをヒエラルキーで選択し、右クリックしてメニューを表示します。
UI => Image を選択し、名前を RemainingBallTran に変更します。
RemainingBallTranゲームオブジェクトは、残り手球のアイコンを表示する位置を設定する役割を持ちます。
Sceneビューの画像を参考に、RectTransformコンポーネントを調整して適宜な位置に配置してください。
またここでは設定していませんが、Image コンポーネントの Source Image に画像を設定し、アイコン表示の背景用のフレームを設定しても構いません。
RemainingBallTranゲームオブジェクト インスペクター画像��
RemainingBallTranゲームオブジェクトのインスペクターの一番下にある Add Component をクリックし、GridLayoutGroup を探して追加してください。
このコンポーネントの機能を利用することで、アイコンを一定の大きさ・幅でキレイに並べて設置することが出来ます。
RemainingBallTranゲームオブジェクト インスペクター画像��
＜GridLayoutGroupの設定＞
GridLayoutGroupコンポーネントはLayoutを自動的に調整するコンポーネントの１つです。
設定によって縦方向でも横方向でも並べることができるため、汎用性が広いLayoutの調整が可能です。
今回設定を行ったプロパティについて説明していきます。
１．CellSize
CellSizeは、GridLayoutGroupの子オブジェクトとして配置されたゲームオブジェクトの大きさのWidthとHeightをこの大きさに自動的に調整します。
そのため元のゲームオブジェクトの大きさは使用されなくなります。
今回は x = 100, y = 100 で設定をしていますので、子オブジェクトは自動的にこのサイズのゲームオブジェクトに調整されます。
２．Spacing
Spacing は設定したx と y の値の分だけ、隣あうゲームオブジェクトとの間にスペースを自動的に取ってくれる機能です。
この値を 0 にすればスペースのない間隔でゲームオブジェクト同士が並びます。x は横方向のスペース、y は縦方向のスペースの距離です。
今回は x = 20 に設定していますので、ゲームオブジェクト同士は横に 20 のスペースを取って自動的に並ぶようになります。
３．StartCouner
子オブジェクトを並べ始めるスタート地点です。プルダウンメニューから選択可能です。
今回は Upper Left の設定にしていますので、子オブジェクトは画面の左上から順番に並び始めるようになります。
４．Start Axis
子オブジェクトを並べる方向です。縦方向に並べる場合には Vertical、横方向に並べる場合には Horizontal を選択します。
今回は横方向に並べてそろえたいので、Horizontal を選択しています。
５．ConstraintとConstraintCount
行と列の数を指定数で制約することができる機能です。プルダウンメニューで設定できます。
今回は Flexible に設定してるため、数を制約しません。
制約しない場合、GridLayoutGroup コンポーネントを持つゲームオブジェクトの大きさ内で1列に並び続け、範囲内に収まらなくなったときは自動的に次の行へ折り返して並べます。
検証画像 並ぶ範囲
新しいコンポーネントに触れたときは、自分で設定を変えて試してみてください。
また、マニュアルや、他の記事なども参考にしてください。
Unity公式マニュアル
Grid Layout Group
https://docs.unity3d.com/ja/2019.4/Manual/script-G...
Unityで魔物使い ゲームを作る様
Grid Layout Group
https://unity-shoshinsha.biz/archives/tag/grid-lay...
残りの手球数を表示するアイコン用のゲームオブジェクトを作成する
１．RemainingBallTran ゲームオブジェクトの子オブジェクトとして Image ゲームオブジェクトを作成して名前を IconRemainingBall 変える
RemainingBallTran ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択して子オブジェクトを作成します。
名前を IconRemainingBall に変更します。
この IconRemainingBall ゲームオブジェクトを手球の残り数の表示用アイコンとして利用します。１つの手球につき、１つのアイコンが表示される設計にします。
ヒエラルキー画像
２．IconRemainingBall ゲームオブジェクトの設定を行う
RectTransformコンポーネントについては、親オブジェクトである RemainingBallTran ゲームオブジェクトにGridLayoutGroupコンポーネントがアタッチされていますので
自動的に Width と Height の値が GridLayoutGroup で設定した Cell Size の値に変更になります。今回の設定値は (100, 100)です。
そのため IconRemainingBall ゲームオブジェクトからで直接この値を変更することはできません。
ゲームオブジェクトの大きさを調整したい場合には、GridLayoutGroup コンポーネントの Cell Size の値を修正して調整します。
Image コンポーネントの Source Image に、現在 CharaBall ゲームオブジェクトで使用している画像をアサインして利用します。
手球と同じ画像であることによって、このアイコンが手球の残り数であることをユーザーに認識してもらいます。
また Raycast Target のスイッチはオフにしておきます。
IconRemainingBallゲームオブジェクト インスペクター画像
Sceneビュー
GameSceneビュー
３．IconRemainingBall ゲームオブジェクトをプレファブにする
IconRemainingBall ゲームオブジェクトをプレファブにします。次の手順が終わってから削除するので、まだ削除はしないでください。
手順動画 プレファブにする
https://gyazo.com/0eefc42156ae93b34c46b58242cc1634
４．IconRemainingBall ゲームオブジェクトを複製して並べてみる
プレファブ化した IconRemainingBall ゲームオブジェクトを削除する前に、複製してみて横（水平）方向に整列していくかを確認してみます。
ヒエラルキーにある IconRemainingBall ゲームオブジェクトを選択した状態で、キーボードの Ctrl + D ボタンを押してください。
IconRemainingBall ゲームオブジェクトの複製が作られます。この手順を繰り返して、いくつか複製を作って横方向に並んでいくかを確認しましょう。
手球の初期値は 3 ですので、少なくとも3つ、IconRemainingBall ゲームオブジェクトが並べば問題ありません。
これは GridLayoutGroup コンポーネントが正常に機能しているかを確認するためです。
手順動画 並べて表示して、整列するかを確認する
https://gyazo.com/b14047224ebf45db3fd72f65fee5c52f
５．IconRemainingBall ゲームオブジェクトを削除する
IconRemainingBall ゲームオブジェクトと、複製して作成されたゲームオブジェクトをすべて削除します。
１つずつ削除しても構いませんが、一度にまとめて削除する方法があります。
左クリックしてゲームオブジェクトを選択する際に Shift キーを押していると、選択した範囲内をまとめて選択します。
その後、Delete を選択するか、キーボードの Delete キーを押せば、まとめて削除できます。
手順動画 複製したプレファブをすべて削除する
https://gyazo.com/432c98debd11ce6b6bb36446762fbc02
以上でこの手順は終了です。
次の手順では、このプレファブを利用して手球の数の分だけ、imgRemainingBall ゲームオブジェクトを手球の残数を示すアイコンとして作成します。
コメントをかく