コーチングオーバーレイ
コーチングオーバーレイは、ユーザーのオンボードと最高のエクスペリエンスを保証することができます。
Absolute Scaleコーチングオーバーレイ
Absolute Scaleコーチング・オーバーレイは、 、スケールを決定するために可能な限り最良のデータを収集できるよう、絶対スケールを体験できるようユーザーを指導する。 コーチングオーバーレイは、開発者が簡単にカスタマイズできるように設計されており、WebAR体験の構築に時間を集中させることが可能です。
プロジェクトでAbsolute Scaleコーチング・オーバーレイを使用する:
- プロジェクトを開く
head.html
に以下のタグを追加します。
<meta name="8thwall:package" content="@8thwall.coaching-overlay">
注意:Self-Hostedプロジェクトの場合、代わりに以下の <script>
タグをページに追加することになります:
<script src='https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js'></script>
- オプションで、
coaching-overlay
コンポーネントのパラメータを以下に定義するようにカスタマイズします。 A-Frame以外のプロジェクトについては、CoachingOverlay.configure() のドキュメントを参照してください。
A-Frameコンポーネントのパラメータ(すべてオプション)
パラメータ | タイプ | デフォルト | 説明 |
---|---|---|---|
animationColor | String | 'white' | コーチングオーバーレイアニメーションの色。 このパラメータは、有効なCSSカラー引数を受け付けます。 |
promptColor | String | 'white' | コーチングオーバーレイの全テキストの色。 このパラメータは、有効なCSSカラー引数を受け付けます。 |
promptText | String | 'Move device forward and back' | スケールを発生させるために必要な動作を知らせるアニメーション説明文の文字列を設定します。 |
disablePrompt | Boolean | false | カスタムオーバーレイにコーチングオーバーレイイベントを使用するために、デフォルトのコーチングオーバーレイを非表示にするにはtrueを設定します。 |
プロジェクトに合わせたカスタムコーチングオーバーレイの作成
コーチングオーバーレイはパイプラインモジュールとして追加し、非表示にすることができます( disablePrompt
パラメータを使用)。これにより、コーチングオーバーレイイベントを使用して、カスタムオーバーレイを簡単にトリガーすることができます。
コーチングオーバーレイイベントは、 scale
がabsolute
に設定されている場合にのみ発生します。 イベントは、8th Wall カメラのランループによって発せられ、パイプラインモジュール内からリスニングすることができます。 これらのイベントは、以下の通りです:
coaching-overlay.show
: コーチングオーバーレイが表示されるべき時にイベントがトリガーされます。coaching-overlay.hide
: コーチングオーバーレイを非表示にするときに発生するイベントです。
例)ユーザー指定のパラメータを使用したコーチングオーバーレイ
A-Frameの例(上のスクリーンショット)
<a-scene
coaching-overlay="
animationColor:#E86FFF;
promptText:To generate scale push your phone forward and then pull back;"
xrextras-loading
xrextras-gesture-detector
...
xrweb="scale: absolute;">