All content in this course uses:

ビジュアルスクリプトで画面タップを検出し、タッチ位置を取得して情報をユーザーインターフェースに表示する方法を学びます。

ユーザーのタッチを検出する

画面を 1 回タップするという動作は、最もシンプルで直感的なモバイルデバイスとのインタラクションの 1 つです。ほとんどのユーザーは、画面上で対話できると思った要素を本能的にタップしてみるでしょう。

このチュートリアルでは、以下のことを実行します。

新しいビジュアルスクリプトを作成します。

ユーザーが画面にタッチしたかどうかを検出します。

画面上でのタッチの位置を検出します。

ユーザーのタッチに関する情報を表示するユーザーインターフェースを追加します。

現在のアプリケーションは、環境内の平面を検出して表示することができます。このプロジェクトが完了すると、それらの平面のどれかをタップすればバーチャル世界へのポータルがスポーンされるようになります。そのための第一歩は、ユーザーが画面をタッチしたタイミングとその位置を検出することです。

概要

まず、以下の手順に従って新しいスクリプトグラフを作成します。

「Hierarchy」内を右クリックし、「

  新しい空のゲームオブジェクトに「Visual Scripts」という名前を付けます。

」を選択してから、Script Machine コンポーネントを追加します。

「Save Graph」ダイアログウィンドウが表示されたら、_

 フォルダー内に新しいフォルダーを作成して、「Visual Scripts」という名前を付けます。

新しいグラフに「TapToPlace」という名前を付けて、「

Script Machine コンポーネントで、グラフのテキストフィールドを以下のように更新します。

」：AR 平面上のタッチを検出してポータルオブジェクトを配置する

 スクリプトグラフを開きます。

新しいスクリプトグラフを作成する

ビジュアルスクリプトの作業を開始する前に、デバイスでアプリケーションをデバッグする準備をする必要があります。

スマートフォン用のアプリケーションを開発する場合は、デバッグに関して固有の課題が発生します。アプリケーションをデバイス上で実行していると、発生したエラーをコンソールで簡単に確認する方法がありません。

このような状況では、アプリケーションの実行中にデバイス上に直接表示されるシンプルなデバッグ用ユーザーインターフェース（UI）を実装すると役立つことがあります。これは、メッセージを出力して、アプリケーションが予想どおりに動作していることを確認できるシンプルなテキストボックスで構いません。

すぐに使用できるシンプルな UI を用意しましたが、その外観は自由にカスタマイズすることができます。

以下の手順に従って、アプリケーションにデバッグ UI を追加し、メッセージを記録します。

 プレハブをクリックして、「Hierarchy」にドラッグします。

 子ゲームオブジェクトを展開してから、

 ゲームオブジェクトを選択します。

「Inspector」で、Text コンポーネントを見つけます。

 プロパティを編集して、ゲームビューに表示されるテキストを変更してみてください。

：お使いのゲームビュープレビューウィンドウのアスペクト比と解像度によっては、表示されるフォントのサイズが上のスクリーンショットとは異なる場合があります。そのようなサイズの違いは、正常な動作です。

  アプリケーションをビルドして実行し、デバイスでデバッグ UI をプレビューします。

アプリケーションにデバッグ UI を追加する

デバッグ UI で任意のメッセージを表示する準備が整いました。次は、アプリケーションの実行中に、ビジュアルスクリプトからメッセージの内容を実際に変更できるようにする必要があります。これは変数を使用して実現できます。

以下の手順に従って、デバッグ UI のテキストを変数として設定してください。

「Script Graph」ウィンドウで、「Blackboard」に移動し、「

」フィールドに「debugText」と入力し、「

 プロパティのオブジェクトピッカー（丸）を選択し、「

デバッグメッセージ用の新しい変数を作成する

変数を設定できたので、ビジュアルスクリプトの開始時に表示されるデバッグメッセージを変更することができます。

ビデオを視聴するか、以下の手順に従って、その方法を確認しましょう。

以下の手順に従って、ビジュアルスクリプトの開始時に 

グラフエディターで、ファジーファインダーを使用して、

 ノードのフロー出力を新しいノードに結び付けます。

 変数のハンドルを左クリックして、変数をグラフエディターにドラッグし、

 入力に、カスタムメッセージを入力します。例えば、「application started」などに変更できます。

  アプリケーションをビルドして実行し、開始時の新しいデバッグメッセージをプレビューします。

 デバッグ UI にメッセージを記録する

次に、ユーザーがデバイス画面をタッチしたら検出し、デバッグ UI にメッセージを送信してタッチ検出が正しく動作していることを確認する機能を追加します。例えば、「touch detected」のようなメッセージです。

アプリケーションでタッチを検出するには、

 イベントを使用する必要があります。

 イベントは常に（アプリケーションが更新されるたびに）実行されるので、ユーザーがいつでも画面にタッチする可能性がある今回の状況に最適です。

ビデオを視聴するか、以下の指示に従って、タッチを検出し、デバッグ UI にそのイベントを記録しましょう。

 イベントノードのフロー出力を新しいノードに結び付けます。

 は、同時に発生した画面タッチの数を表します。タッチが検出されないとき、Index の値は 0 に設定されます。1 つのタッチが検出されると、Index の値は 1 に設定されます。2 つ目のタッチが同時に発生すると、Index の値は 2 に増え、それ以上の場合も同様です。

 イベントノードシーケンスから、

 ノードを選択して複製します。

 ノードのフロー出力を、複製した 

 ノードのフロー入力に結び付けます。

 値のメッセージを「touch detected」などに変更します。

  アプリケーションをビルドして実行し、新しい機能をプレビューします。画面をタッチすると、デバッグ UI に「

タッチを検出する

タッチが発生したかどうかを確認するだけでなく、そのタッチが画面上のどこで発生したかも特定する必要があります。タッチの X 座標と Y 座標を使用して、ユーザーが水平または垂直の平面に正しくタッチしたかどうかを特定できます。

タッチした位置を特定するプロセス

 ノードを使用してタッチした位置を取得します。このノードは 

 を出力します。これには検出されたタッチの X 座標と Y 座標が含まれています。

これらの座標をデバッグ UI のテキストに出力してみましょう。ただし、

 ノードのテキストに Vector2 を指定することはできません。入力には文字列値が必要になります。

 ノードの String 入力を使用して 

 ノードの Vector2 の座標を表示するには、最初にこれらの Vector2 の座標を互換性のある String 形式に変換する必要があります。それは、データをテキストとして使用できる String 形式に変換する 

 ノードを使用して実行できます。

タッチした位置座標を表示する

ビデオを視聴するか、以下の指示に従って、タッチした位置を取得し、その座標をデバッグ UI に表示しましょう。

 ノードを追加し、On Update シーケンスの 

  アプリケーションをビルドして実行し、新しい機能をプレビューします。画面をタッチすると、タッチした位置の X 座標と Y 座標がデバッグ UI に表示されるはずです。

タッチした位置を取得する

さらなるスキルの向上や、新しいコンセプトの模索、現プロジェクトについての改善などを考えているのであれば、以下の任意のアクティビティもぜひ見るようにしてみてください。各アクティビティは「簡単」、「中程度」、「困難」のいずれかとして識別されるため、どの程度の難易度かがわかります。

これらのアクティビティは完全に任意であるため、興味がなければこのステップをスキップしてもかまいません。

ただ、今回の学習体験を最大限に生かすためにも、このアクティビティのうち少なくとも 1 つは試してみることをお勧めします。頑張ってください！

簡単：役立つ開始メッセージを表示する

このチュートリアルでは、「application started」というテキストをデバッグ UI に表示して、UI が正しく動作していることを確認しました。AR 体験の開始時にテキストを表示するのは、非常に有益なことがよくあります。その機会にアプリケーションと対話する方法をユーザーに伝えることができるためです。このアプリケーションの場合、「move the camera around slowly to detect a vertical/horizontal surface（カメラをゆっくり動かして垂直/水平な面を検出します）」などとユーザーに伝えることができます。このようなより役立つメッセージをアプリケーションの開始時に実装してみてください。

困難：タッチビジュアライザーを作成する

このチュートリアルに含まれているビデオデモでは、小さな白い円がタッチした位置についていくことに気づかれたのではないでしょうか。

この小さい円は、デバッグに役立つことがあります。これによって指が画面と接触した正確なタイミングと位置を確認できるためです。

以下のガイダンスを使用するとこの課題の完了に役立ちます。

円の形をしたスクリーンスペースの UI 画像をビジュアライザー用に使用します。

「TouchVisualizer」という名前の新しい Script Machine を作成して、その機能を制御します。このような追加の機能は、メインスクリプトとは別に管理すると便利です。

 ノードを使用して、UI の円を有効にし、位置を設定します。

他にもトライしてほしいこと

このチュートリアルでは、タッチイベントを検出して、その座標をカスタムのデバッグ UI に記録しました。その後、その座標を使用して、ビジュアルスクリプトが期待どおりに動作していることを確認しました。次のチュートリアルでは、ユーザーが有効な水平または垂直の平面にタッチしたかどうかを検出します。

Unity Version 2021.3