Unityに関連する記事です

 前回の手順で「行き先」のゲームオブジェクトをタップした際に、ボタンのアニメ演出を実装しました。
この手順ではもう1つ TODO で残っている Debug.Log メソッドについて実装を行います。

 行き先をタップした際に、行き先を確認し、お使いを決定するか、キャンセルするかを選択するためのポップアップ(ウインドウ)を表示する機能を作成します。
 

<実装画像>



<実装動画>
動画ファイルへのリンク


手順6 −行き先確認ポップアップの作成と生成制御の実装−
10.行き先確認ポップアップの作成
11.TapPointDetail スクリプトを修正し、タップ時に行き先確認ポップアップの生成処理を追加する



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

 ・ポップアップを自分で作成する
 ・処理にコメントを記述する
 ・CanvasGroup コンポーネント
 ・Selectable.interactable 変数
 ・DOTweenの補間機能と実装例◆ DOFade メソッド、OnComplete メソッド メソッドー



10.行き先確認ポップアップの作成

1.設計


 この処理を実装するためには、行き先をタップした際の処理に加えて、その処理によって表示(生成)されるべきポップアップが必要になります。

 実際の処理の流れがイメージできたら、実装する内容のスタート地点とゴール地点が定まりますので、ゴール地点から処理の実装を考えていきます

 今回のケースであれば、まずは最初に行き先確認用のポップアップを作成します。続いて、このポップアップを制御するスクリプトを作成します。
最後に、TapPointDetail スクリプトを修正して完成となります。

 処理を実行するためには、その処理が呼び出すべきメソッドが必要になりますし、
そのメソッドが何かを生成するのであれば、その生成対象となるゲームオブジェクトが必要になります。

 これが基本的な処理の組み立て方になります。



 ゲームを進めていくうえで、要所要所にポップアップが表示されて、確認を促すケースが多くあります。
この時に利用されているポップアップを作成していくことが今回の実装目標です。

 ポップアップに必要な機能はどういったものがあるのかを考えて、必要な部品(ゲームオブジェクト)を配置して、
自分のデザインしたポップアップを作成していきましょう。

 完成したらプレファブにしておくことで、インスタンスをして表示させるようにします。


2.完成図


 こちらの例は参考です。
自分の中でゲーム内に表示させたい機能を盛り込むために必要なものを考えて作成してみてください。


ヒエラルキー画像



プレファブ編集モード



 教材ではベースとなる部分だけ作成します。


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


 Canvas ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Panel を選択します。
Canvas のサイズと同じ大きさの Image コンポーネントがアタッチされているゲームオブジェクトが作成されます。
名前を JobsConfirmPopUp に変更してください。
JobsConfirmPopUp ゲームオブジェクトは、行き先確認用のポップアップの土台であり、フォルダとしての役割を持つゲームオブジェクトです。


ヒエラルキー画像



Sceneビュー画像



Gameビュー画像



 続いて設定を行います。



 JobsConfirmPopUp ゲームオブジェクトを選択して、インスペクターの一番下にある Add Component ボタンを押し、Canvas Group コンポーネントを追加します。
設定は変更しなくて構いません。
 
 この機能を利用することにより、この JobsConfirmPopUp ゲームオブジェクトの子オブジェクト群の透明度をまとめて変更することができるようになりますので、
1つ1つのゲームオブジェクトの透明度を操作して制御しなくても済むようになります。


4.<CanvasGroup コンポーネント>


 CanvasGroup(キャンバス・グループ) コンポーネントがアタッチされているゲームオブジェクトと、その子のゲームオブジェクトがグループ化されます。
これにより、グループ全体の透明度を変更したり、グループ全体のタップを許可/非許可にすることができます。

 今回は JobsComfirmPopUp ゲームオブジェクトに CanvasGroup コンポーネントをアタッチしています。
そのためこのゲームオブジェクトと、その子オブジェクトであるすべてのゲームオブジェクトがグループ化されます。

 今回のケースのように透明度(Alpha)を操作した場合、グループ化されているため、子要素も一緒に透明になったり、元に戻ったりします。

Unity公式マニュアル
CanvasGroup
https://docs.unity3d.com/ja/2020.1/Manual/class-Ca...
TechProjin様
【Unity】Canvas Groupってこんなに便利だったのか…
https://tech.pjin.jp/blog/2017/03/20/unity_ugui_ca...


5.JobsConfirmPopUp ゲームオブジェクトの子オブジェクトとして、各ゲームオブジェクトを作成して設定する


 ゲームオブジェクトの構成を確認しながら、自分で部品となるコンポーネントを考えて、自由にポップアップを作成してください。
以下にサンプルとして、ヒエラルキーの構成を掲載します。
ゲームオブジェクトの命名には規則性があり、この教材では以下のようになっています。

 txt 〜 と lbl 〜 から始まるゲームオブジェクトには Text コンポーネントがアタッチされています。

 img 〜 から始めるゲームオブジェクトには Image コンポーネントがアタッチされています。

 btn 〜 で始まるゲームオブジェクトには Image コンポーネントと Button コンポーネントがアタッチされています。

 〜 Set で終わるゲームオブジェクトはフォルダ役のゲームオブジェクトです。Transform コンポーネントのみアタッチされてます。


ポップアップの構成



 どのゲームオブジェクトがどのような役割を持っているのか、どんな機能が備わっていればよいのか、
それらを考えながらゲームオブジェクトを作成し、サイズや位置を調整していきましょう。UI には画面表示の優先順位がありますので、並び順にも注意してください。

 すべてのゲームオブジェクトを同じに作成する必要はありませんが、ボタンは2つ用意してください。
これは、行き先確認を行う際に、行き先として決定するか、あるいはキャンセルするか、に利用するためのものです。


6.<製作時のポイント ーTextコンポーネント のゲームオブジェクトをプレファブにしておくー>


 今回、Textコンポーネントを持つゲームオブジェクトを1つ作成し、それをプレファブ化してあります。
ヒエラルキー画像をみていただくと、txt 〜 と lbl 〜 の名称のゲームオブジェクトがプレファブであることが分かります。

 これから何回かTextコンポーネントを持つゲームオブジェクトを追加していくことになりますが、
その際には、新しいTextコンポーネントを持つゲームオブジェクトを作成するのではなくて、このプレファブをヒエラルキーに設置して利用するようにします。



 利点としましてはフォントの変更や Text コンポーネント以外の設定の反映が容易になることが挙げられます。

 例えばフォントを変更したい場合、1つ1つの Text コンポーネントを持つゲームオブジェクトが別のゲームオブジェクトである場合には
それらを1つずつ順番に選択していって、すべての Text コンポーネントのフォント設定を設定し直さなければなりません。
ですがそれがすべて共通しているプレファブであれば、設計図であるプレファブを変更しただけで、すべての Text コンポーネントのゲームオブジェクトに対して
フォントの変更が自動的に反映されます

 また Outline コンポーネントなどの装飾系のコンポーネントの追加/削除なども、プレファブを利用していれば、設計図であるプレファブのコンポーネントの設定を行えば済みます
ゲームオブジェクトを確認して、1つずつにコンポーネントをアタッチしたりリムーブしたりという作業がなくなります。
 
 プレファブを有効に利用することによって、作業の効率化、集約化を図ることが可能です。
そして設定を行いたいゲームオブジェクトだけを選択して、調整を行えば設定を完成できます。


7.JobsComfirmPopUp スクリプトを作成する


 作成した JobsComfirmPopUp ゲームオブジェクトを制御するためのスクリプトを作成して、
各部品を操作制御できるようにします。

 まずは最初に2つのボタンを制御できるように処理を作成します。
ボタンは Canvas 内で制御されるコンポーネントであるため、スクリプトにおいて扱うためには using UnityEngine.UI の宣言が必要になります。
また、DOTween の機能も利用しますので、using DG.Tweening の宣言も一緒に行います。

 ボタンの制御をするためにはどのような変数が必要が、どのようなメソッドが必要かを考えてみてください。


JobsComfirmPopUp.cs

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


 スクリプトを作成したらセーブを行います。

 コメントはカットしてあります。自分の書いた処理が読めるかどうか、コメントを書くことに挑戦してみましょう。


8.Selectable.interactable 変数


 Button コンポーネントは、bool 型の interactable プロパティを持って(管理して)います。

 こちらのスイッチがオン(true)の場合、ボタンは有効な状態です。これを活性状態といいます。

 こちらのスイッチがオフ(false)の場合、ボタンは無効な状態です。
ボタンの色が Disabled Color で設定されている色に変わります(デフォルトは半透明な灰色)。これを非活性状態といいます。

 この情報はプロパティですので、スクリプトから操作をすることが出来ます。
今回はこちらの機能を利用してボタンを制御しつつ、視覚的にもわかるようにしています。

 実際にインスペクターで操作をしてみて、どのように変化するかを確認しておきましょう。

<ボタンを押せない状態にする処理>
  // ボタンを非活性化(半透明で押せない状態)
  btnSubmit.interactable = false;

<ボタンを押せる状態にする処理>
  // ボタンを非活性化(半透明で押せない状態)
  btnSubmit.interactable = true;

 今回はこの活性化/非活性化の切り替え処理をメソッドの引数を利用して1つの処理で運用出来るようにしています。
このような設計にしておくことで、false 用、true 用といった処理を分けて記述する必要がなくなるためです。
引数の活用方法を覚えると設計が楽になるだけではなく、メソッドを作るのが面白くなります。

    /// <summary>
    /// すべてのボタンの活性化/非活性化の制御
    /// </summary>
    /// <param name="isSwitch"></param>
  private void SwitchButtons(bool isSwitch) {
        btnSubmit.interactable = isSwitch;
        btnCancel.interactable = isSwitch;
    }

 この情報もインスペクター上で確認を行うことで出来ます。正常に制御が行われているかを確認しておいてください。

 今回のケースでは引数として届いた bool 型の情報を利用して、各ボタンの活性化/非活性化を切り替えています。
固定値にしていないことで、引数の情報を利用できるようにしていますので、こういったメソッドの構成、引数の使い方なども1つの方法として覚えておいてください。
処理を記述する際には引き出しが多いほど、より柔軟な処理を組み立てていくことが可能になるためです。


参考サイト
Unity公式スクリプティングAPI
Selectable.interactable
https://docs.unity3d.com/2019.1/Documentation/Scri...
すくまりのメモ帳 様
【Unity】Buttonをinteractableで無効化したり、動的にイベントを追加する方法
https://squmarigames.com/2018/12/10/unity-beginner...


9.DOTweenの補間機能と実装例◆ DOFade メソッド、OnComplete メソッド メソッドー


 新しく実装している DOTween の機能について説明します。
1.DOFade (float endAplha, float duration)


 DOTween の機能の中には、特定のコンポーネントでのみ実行することが可能になっているメソッドがあります。
今回実装している DOFade メソッドもその1つです。

 これは CanvasGroup コンポーネントや、AudioSource コンポーネントなどの一部のコンポーネントでのみ実装が可能な機能です。

  canvasGroup.DOFade(1.0f, 0.3f)
      .SetEase(Ease.Linear)
      .OnComplete(() => {
           SwitchButtons(true);
      });

 処理の記述内容としては第1引数に対象となる値、第2引数に、その対象の値になるまでにかける時間と、書式は基本的に同じです。
どちらも float 型での指定になります。
このとき、第1引数に設定できる情報が、CanvasGroup コンポーネントの場合には、Alpha の値に限定されます。
 
 そのため DOFade メソッドを利用すると、CanvasGroup コンポーネントの Alpha の値を第2引数で指定した時間をかけて
徐々に減少させたり、加算したりという処理が可能になります。

 ゲーム画面上ではどのようになるかというと、徐々にゲームオブジェクトが見えるようになったり、徐々に見えなくなっていくという処理が実装できます。
また、AudioSource コンポーネントに利用した場合には、徐々に音量が小さくなってく、徐々に大きくなっていく、という処理が実装出来ます。

 例えば、真っ黒なゲームオブジェクトにこの処理を利用すれば、真っ黒な画面が徐々に消えてゲーム画面が見えてくる、
いわゆる暗転の処理が実装出来るようになります。非常に便利な処理ですので活用してください。

 今回の場合には SetEase メソッドもありますので、その場合、アルファの数字の変更量が一定値(等速)になります。


2.OnComplete (() => { } )

 OnComplete メソッドも SetEase メソッドと同じように、メインとなる他の DOTween メソッドに付随する処理です。

 この処理はコールバック処理になっており、一緒に処理しているメインのメソッドの処理の終了を待ちます
その処理が終了してから、この OnComplete メソッドの中に記述した処理を実行してくれます。

 今回は2か所で実装しており、いずれも CanvasGroup コンポーネントの DOFade メソッドによって Alpha の値が最終値に変更された後に、
この OnCompleteメソッドの処理が実行されるようになっています。

  canvasGroup.DOFade(0f, 0.3f)
      .SetEase(Ease.Linear)
      .OnComplete(() => {
          // TODO ボタン操作の結果を反映する

          Destroy(gameObject);
      });

 今回の実装としては、DOFade メソッドの処理が完了したタイミングで、OnComplete メソッド内に記述された処理が実行されます。
上記の場合であれば、ゲームオブジェクトを破壊する処理が実行されます。

 なおこの処理は1行でも書くことは出来ますが、読みにくく長くなってしまうため、可読性を高めるためにも複数行に渡って処理を書いています。
プログラムは最後に ; (セミコロン)を記述することで始めて1つの処理として認識しますので、複数行で記述してあっても、セミコロンの位置で処理の段落を判断されます。
こういった配慮もスクリプトを記述する際には必要ですので、可読性の高い処理を書けるように心がけてください。


10.JobsComfirmPopUp ゲームオブジェクトに JobsComfirmPopUp スクリプトをアタッチし、設定を行う


 ヒエラルキー上にある JobsComfirmPopUp ゲームオブジェクトに、作成した JobsComfirmPopUp スクリプトをドラッグアンドドロップしてアタッチします。
アタッチしたら必ずゲームオブジェクトのインスペクターを確認して、スクリプトがアタッチされていることを確認します。

 インスペクター上に、SerializeField 属性で宣言している変数が3つ表示されていますので、
適宜なゲームオブジェクトをドラッグアンドドロップしてアサインしてください。

 その変数がどのような変数で、どのようなコンポーネントを操作できるか設定してありますので、
それを考えてアサインを行いましょう。


インスペクター画像



11.JobsComfirmPopUp ゲームオブジェクトをプレファブにする


 Project 内で右クリックをしてメニューを開き、Create => Folder を選択します。
新しいフォルダが作成されますので、名前を Prefabs に変更します。

 ヒエラルキーにある JobsComfirmPopUp ゲームオブジェクトを Prefabs フォルダにドラッグアンドドロップします。ゲームオブジェクトがプレファブになります。
プレファブにしたら、ヒエラルキーにある JobsComfirmPopUp ゲームオブジェクトは削除してください。

 以上でポップアップの完成です。

 どのような機能を持つゲームオブジェクトを作成するのか、そのゲームオブジェクトをどうやって制御するのか、
この部分までが1つの作成サイクルです。

 また、JobsComfirmPopUp ゲームオブジェクトのインスペクターから、CanvasGroup の Alpha(透明度)の値を操作してみてください。
Alpha を操作した場合、オブジェクトがグループ化されているため、親の JobsComfirmPopUp ゲームオブジェクトと一緒に、子要素も一緒に透明になったり、元に戻ったりします
どの操作をすることでどの部分に対して制御が動いているか、つながりをしっかりと把握しておきましょう


11.TapPointDetail スクリプトを修正し、タップ時に行き先確認ポップアップの生成処理を追加する

1.設計


 行き先ボタンのゲームオブジェクトをタップした際に、先ほど作成した行き先確認ポップアップが生成されるように制御を行います。
この処理を制御するために必要な変数と処理を考えてみましょう。

 ポップアップを表示する処理を記述する場所については、すでに TODO 機能で記述してありますので、その部分に処理を追記しましょう。


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


 TOTO として記述してある部分の Debug.Log メソッドをコメントアウトして、行き先確認ポップアップの生成の処理を実装します。
このように事前に実装したい処理をコメントとして TODO 機能を利用して残しておくと処理も書きやすく、TODO の部分はそのまま残しておければ、それがコメントとしての役割を持ちます。

 新しく追加する変数と処理については、ゲームオブジェクトを生成するために必要な情報を考えながら処理を実装していくことが大切です。


TapPointDetail.cs


 スクリプトを修正したらセーブします。Visual Studio のセーブ機能は Ctrl + Shift + S キーです。


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


 ヒエラルキーにある btnTapPoint ゲームオブジェクトを選択し、インスペクターを確認します。

 新しく TapPointDetail スクリプトに追加した変数がインスペクター上に表示されますので、
こちらに適宜なゲームオブジェクトをドラッグアンドドロップしてアサインを行います。

 canvasTras 変数は、行き先確認用のポップアップの生成位置の指定用の変数です。
先ほど JobsComfirmPopUp ゲームオブジェクトを作成していた場所を思い出してください。
その位置に生成するためにはどのゲームオブジェクトを登録すればいいかを考えます。

 jobsComfirmPopUpPrefab 変数にはプレファブにした JobsComfirmPopUp ゲームオブジェクトを
Prefabs フォルダからドラッグアンドドロップしてアサインします。


インスペクター画像



 以上で設定は完了です。


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


 すべての実装が終了したらセーブを行い、どのような処理を実装し、どのように動けば正常なのかを把握してから、ゲームを実行します。
ゲーム画面にある btnTapPoint ゲームオブジェクトをマウスの左クリックします。
行き先確認用のポップアップが表示されれば、ポップアップの制御は成功です。

 つづいて、ポップアップ内のボタンの確認を行います。
どちらのボタンでもいいのでクリックします。ポップアップが閉じると同時に
Console ビューに Debug.Log メソッドに指定した文字列が表示されれば制御成功です。

 両方のボタンを試して、Debug.Log メソッドの文字列が変化することを確認してください。


<実行動画>
動画ファイルへのリンク



 以上でこの手順は終了です。
 
 次は 手順7 −行き先にお使いの情報を登録する− です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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