Unityに関連する記事です

 以下の内容で実装していきます。

32.自動再生機能を追加する



実装する概要


 ゲーム中のオプションの設定として、メッセージの自動再生機能と既読メッセージのスキップ機能を順番に追加します。
いずれもボタンを用意し、そちらをタップしてオンにすることで機能を実行します。もう一度タップするとオフになり、機能を停止します。

 これらの機能を実行中には実行中であるこをと示すために各ボタンの色を変更し、機能が実行中か、停止中かを判別できる機能も実装しています。
この辺りの演出については、表示するテキストの内容を変更しても表現してもよいと思いますので、自分で考えたものを実装してみてください。

 この手順では自動再生機能を実装し、その機能を利用して次の手順で既読スキップ機能を追加します。


実装動画 自動再生機能(Autoと書いてあるボタンを押すと色が変わり、画面をクリックしなくても次のメッセージに進む)
https://gyazo.com/eb26c53a617b6ba14145211a76b35d63


事前準備


 事前準備としまして、自動再生用のボタンと既読スキップ用のボタンをGameシーンに用意します。

 用意の仕方ですが、専用のオプションポップアップを作成してその中に各ボタンを配置してもよいですし、
Gameシーンに常駐して見えるように、既存のメッセージウインドウの空いている部分に配置してもよいです。
ゲームの仕様と世界観を損なわないデザインにしてください。
 なおオプション設定用のポップアップを利用する場合には、画面内に自動再生と既読スキップが実行中の場合には
その状態がわかる表示を追加した方がユーザーに対して親切な設計になります。


 今回は、Canvas内のMessageWindowゲームオブジェクトの子オブジェクトとして作成し、常時メッセージウインドウの右上に表示するように配置しました。
そしてボタンの色を変える事で実行中/停止中をユーザーに伝えるようにしています。


Gameシーン 配置後の画像



動画 実行時のボタンと停止時(押したときにボタンの色が変わりオン状態、もう一度押すと色が戻りオフ状態。自動再生していないので、クリックを促すアイコンも表示される)
https://gyazo.com/5feb1fb5c39bb7d2f1dbb636e38becb4


配置参考


 MessageWindowゲームオブジェクトの子オブジェクトとして、btnSkip ゲームオブジェクトと btnAutoPlay ゲームオブジェクトを作成しています。
どちらも UI => Button で作成したゲームオブジェクトです。

Gameシーン ヒエラルキー画像画像



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



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



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



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



 各ボタンのデザインについて、ここでは初期設定の画像のまま利用していますが、これについては適宜な画像に差し替えて利用してください。

 また子オブジェクトであるTextゲームオブジェクトもそのまま利用していますが、フォントなどを他の部分と統一する場合には、これは削除して、作成済のTextPrefabを利用してください。
その上でフォントや文字の大きさ、文字装飾などは適宜変更してください。ここでは画像は割愛します。


設計


 自動再生機能は、この機能が実行されている間は画面をタップしなくてもメッセージが自動的に分岐まで順番に再生される機能です。

 次のような設計を行います。

 ・ゲーム中で自動再生ボタンを押す
 ・自動再生機能がオンになり、ボタンの色が変わる
 ・画面をタップしなくても、メッセージが自動的に等速で読み進められる
 ・分岐まで行くと終了する。ただし、自動再生自体は終了しない。
 ・自動再生が実行中の間にもう一度自動再生ボタンを押すとオフ状態になり、ボタンの色が元の色に戻る


実装手順


 以下の手順で実装を行います。

 1.TextMessageViewewスクリプトを修正して、自動再生機能にかかわる処理を追加する
 2.ゲームを実行して動作を確認する

 なお、メッセージウインドウ上ではなく、オプション機能をまとめたポップアップに自動再生ボタンを設置する場合には、
新しくポップアップ用のスクリプトを作成し、その中でTextMessageViewerスクリプトを取得し、自動再生処理用のメソッドを呼び出す処理を記述して対応してください。


新しく学習する内容


・EventSystem.current 変数
・EventSystem.currentSelectedGameObject 変数


1.TextMessageViewewスクリプトを修正して、自動再生機能にかかわる処理を追加する


 最初にusing UnityEngine.EventSystems を追加します。これはEventSystemという入力関連の機能をスクリプトで利用するためです。

 新しく設置したボタン用の変数を1つ追加して、後程アサインします。また自動再生の状態を管理できるように、bool型の変数を1つ追加します。
trueのときは自動再生がオン、falseのときは自動再生がオフとして利用します。

 自動再生ボタン用のOnClickAutoPlayメソッドを追加して、スクリプトからOnClickイベントにこのOnClickAutoPlayメソッドを登録します。
こうすることでUnityのButtonコンポーネントで設定するのと同じ処理がスクリプトから実装出来ます。

 Startメソッド、Updateメソッド、DisplayMessageメソッド、NextTouchメソッドの4つのメソッドを修正して、自動再生機能の処理を追加して実装します。
どの処理がどのような役割を持っていて、どうしてその処理をその場所に書くことによって自動再生処理が動くのかを考えながら実装してください。


TextMessageViewer.cs

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



TextMessageViewerゲームオブジェクトを設定する


 スクリプトの修正が終了したので、TextMessageViewerゲームオブジェクトを選択してインスペクターを確認します。
新しく追加した btnAutoPlay 変数が表示されていますので、こちらに同名のゲームオブジェクトをヒエラルキーからドラッグアンドドロップします。
これでButtonコンポーネントとスクリプトとの紐づけが出来ましたので、自動再生ボタンを押した際に、スクリプトから登録した OnClickAutoPlayメソッドを実行することが出来るようになりました。


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



<EventSystem.current.currentSelectedGameObject 変数>


 この変数は EventSystemクラスの持つ変数です。利用するためには、using で UnityEngine.EventSystems を宣言する必要があります。
利用している場所はUpdateメソッド内に2か所あります。

if (Input.GetMouseButtonDown(0) && wordCount == messages[messagesIndex].Length) {

  // ボタンがクリックされていたら、画面クリックは無効にする
    if (EventSystem.current.currentSelectedGameObject != null) {
      return;
    }

 今回実装している処理では EventSystem クラスの持つ、current 変数にアクセスし、現在のイベントシステムを取得しています。
その後、currentSelectedGameObject 変数の値が null でない場合 − つまり、現在入力の判定が行われているアクティブな状態のゲームオブジェクトが存在する場合には、
この先の処理を行わない、という処理です。

 これはボタンを押した際にマウスクリックによる誤反応を防ぐための制御です。

 メッセージを送る機能は、画面のどの部分をタップしても機能します。それはGetMouseButtonDownメソッドという機能を利用しているためです。
ですが、この機能は自動再生ボタンを押した際にも処理が行われてしまいます。そうすると、画面タップとボタンのタップとが同時に動いてしまって、
その結果、正常に自動再生ボタンを押す処理が動作しません。そのため、このcurrentSelectedGameObject 変数の値を確認し、値が null でないとき = 自動再生ボタンが押されていない状態で
画面をタップしたときにだけ、メッセージを送る処理を動作するように制御を加えています。


参考サイト Unity公式
EventSystem
https://docs.unity3d.com/ja/2018.4/ScriptReference...
currentSelectedGameObject
https://docs.unity3d.com/ja/2018.4/ScriptReference...


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


 ゲームを実行して動作を確認してみましょう。まずは自動再生ボタンが反応するか、押すことが出来た場合に、ボタンの色が変わって
メッセージが画面をタップしなくても自動的に送られるようになるか、また画面タップによる不具合はないかを確認します。

 問題なく動作すれば分岐が表示されるまで自動的にメッセージが再生されます。分岐がないシナリオデータであれば、次のシナリオデータに移り、
そこでもまたメッセージが自動的に送られて分岐まで進みます。
 
 自動再生中にもう一度自動再生ボタンを押した場合には処理が停止し、画面をタップするまでメッセージが表示されたままの通常の状態なり、ボタンの色も元に戻ります。


実装動画
https://gyazo.com/eb26c53a617b6ba14145211a76b35d63


 以上でこの手順は終了です。次はこの自動再生機能を利用して、既読スキップ機能を実装していきます。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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