次の方法で共有

事前構築済みのユーザー インターフェイス コントロールを使用する

  • [アーティクル]

概要

Control Samples パッケージには、プロジェクトにインポートできる、Mesh ツールキットを使用して構築された事前構築済みのユーザー インターフェイス コントロールが用意されています。 これらは、Mesh 101 および Mesh 201 チュートリアルで幅広く使用しています。

Mesh 101 チュートリアルのいくつかのコントロール サンプルのスクリーン ショット。

コントロール サンプルはまだ開発中であるため、これらを "サンプル" と呼ぶことで、進化中であり、時間が経てば変更される可能性があることを示します。 コントロール サンプルの詳細については、このページの下の方にある「コントロール サンプルの詳細」セクションで説明しますが、ここではチュートリアルで使用方法を簡単に説明します。

BackplateBase

バックプレートは、あらゆる情報テキスト表示に役立つサポート オブジェクトであるため、BackplateBase プレハブは非常に多くの場所で使用されます。

Mesh 101 チュートリアルにおける多数の BackplateBase プレハブのインスタンスのスクリーン ショット。

例: Mesh 101 チュートリアルでは、BackplateBase は、最初のステーション 3.1: Video Playback の情報テキスト表示である ChapterLabel の子オブジェクトになっています。

Mesh 101 チュートリアルでの BackplateBase インスタンスのスクリーン ショット。

ButtonBase

Mesh 101 チュートリアルでは、ButtonBase プレハブを使用して、3.1: Video Playback ステーションのビデオ画面の [Play] ボタンを作成します。 なお、プレハブの名前はここでは "PlayVideoButton" に変更されています。

Mesh 101 チュートリアルでの ButtonBase インスタンスのスクリーン ショット。

Earth

Mesh 201 チュートリアルでは、ステーション 4: Load a URL from a 3D asset に Earth プレハブを使用します。

Mesh 101 チュートリアルでの Earth プレハブ インスタンスのスクリーン ショット。

InformationButton

Mesh 101 チュートリアルでは、3.2: Info Dialog Trigger ステーションに InformationButton プレハブを使用します。 なお、プレハブの名前はここでは "Information_Button" とわずかに変更されています。

Mesh 101 チュートリアルでの InformationButton インスタンスのスクリーン ショット。

作業の開始

Control Samples パッケージは、GitHub から Mesh サンプルをダウンロードすると含まれています。

エクスプローラーでの Control Samples パッケージのスクリーン ショット。

Control Samples パッケージをプロジェクトに追加するには:

  1. Unity プロジェクトのメニュー バーで、[Window]、[Package Manager] の順に選択します。
  2. [+] ドロップダウンをクリックし、[Add package from disk] を選択します。

[Add package from disk] メニュー項目が強調表示されている Package Manager メニューのスクリーン ショット。

  1. [Select package on disk] ウィンドウで、com.microsoft.mesh.toolkit.control.samples という名前のフォルダーに移動し、package.json ファイルをダブルクリックします。

エクスプローラーでの package.json ファイルのスクリーン ショット。

  1. Control Samples パッケージは、"ローカル" とタグ付けされてパッケージ マネージャーに表示されます。

Package Manager での Control Samples パッケージのスクリーン ショット。

そして、このパッケージは Project - Packages フォルダーにあります。

Packages フォルダー内の Control Samples パッケージのスクリーン ショット。

コントロール サンプルの詳細

Control Sample プレハブは、Runtime フォルダーのサブフォルダーにあります。

Runtime - ButtonBase

  • BackplateBase: このプレハブを使用すると、バックプレート上のすべてのコントロールが角が丸く表面が玉虫色になって配置されます。

シーンでの BackplateBase プレハブのスクリーン ショット。

  • ButtonBase: すべてのボタン バリアントのベース プレハブ。 ボタンがアニメーション化されたり、押されたときにオーディオ フィードバックが生成されたり、ラベルが備わったりします。 Visual Scripting を使用して、アバターがボタンをクリックしたときにトリガーされるイベントを設定できます。

シーンでの ButtonBase プレハブのスクリーン ショット。

Runtime - Globe

  • Earth: 回転する選択可能な地球の球体。 選択すると、球体は緯度と経度の位置を生成し、マーカーを追加します。 この機能は、Visual Scripting を使用して拡張および変更できます。 すべてのアクションは、既定ですべてのクライアントによって共有されます。

シーンでの Earth プレハブのスクリーン ショット。

Runtime - InformationButton

  • InformationButton: 浮遊ワールド空間のコイン ボタン。 このボタンは、Avatar Trigger 動作による近接検出を備えています。 アバターがボタンから一定距離になると、コインは回転を停止し、代わりに掲示板が表示されます。 アバターはコインをクリックすることができます。 アバターが範囲外になると、ボタンをクリックできなくなり、ボタンはまた回転します。 ボタンのインタラクション可能な動作は、[Mesh Interactable Setup] コンポーネントと InformationButton スクリプトによって駆動されます。

シーンでの InformationButton プレハブのスクリーン ショット。

次のステップ

サンプルの概要