読み込み

プロジェクトを開いたときに見る人が何を待つかを選び、起動画面を設定します。

見る人が待つのは、最初の 1 回だけです。そのときに何を読み込むかで、プロジェクトが開くまでの体感速度がいちばん大きく変わります。

アセットの届き方

アセットの届き方は 3 つあります。

事前読み込み（preload）：シーンが開く前に取得します。起動画面はこれを待ちます。最初の数秒で見えるものに使います。
遅延読み込み（defer）：シーンはアセットを待たずに開き、アセットは届いた時点で表示されます。プロジェクトの後半で出てくるコンテンツに使います。
ストリーミング（stream）：全体をダウンロードせず、ネットワークから直接再生します。動画と音声に使います。

ストリーミングできるのは動画と音声だけです

全体が届く前に再生を始められるのは、動画と音声だけです。モデル、テクスチャ、フォントは、全体が届かないと使えません。これらを遅延読み込みにすると、シーンが待たずに開き、準備ができた時点でアセットが表示される、というだけです。

プロジェクトの初期設定とアセットごとの設定

プロジェクト設定の Project preload スイッチが、すべてのアセットの初期設定になります。アセットごとに上書きすることもできます。Project assets でファイルにカーソルを合わせると、その行に 2 つのボタンが表示されます。

Always preload：プロジェクトの設定に関係なく、シーンは常にこのファイルを待ちます。
Always stream：シーンはこのファイルを待ちません。動画と音声はストリーミングになり、それ以外のファイルは遅延読み込みになります。
どちらもオンでなければ、ファイルは Project preload に従います。

ボタンをもう一度クリックすると、オフになります。どちらかがオンの間は、ボタンは行に表示されたままです。

新しく追加した動画と音声のアセットは、最初から Always stream がオンになっています。シーンが開く前に動画全体を待っても、何も得がないからです。それ以外の新しいアセットは、プロジェクトの設定に従います。

設定はファイルに付けます

読み込みの設定は、アセットを使うオブジェクトではなく、アセット自体に付きます。そのため、同じファイルを共有する 2 つのオブジェクトは、常に同じ方法でそのファイルを読み込みます。

起動画面

シーンが表示される前に、見る人には 2 つの画面が表示されることがあります。

タップして始める画面
アセットが届くにつれてゲージが埋まっていく画面

どちらもプロジェクトの設定で設定します。背景、ロゴ、スタートボタンとそのラベル、オンボーディングの案内、ローダーのスタイルを変えられます。

プロジェクトに音があるなら、スタートボタンを残してください

ブラウザは、見る人がページを操作するまで音を鳴らしません。AR の許可も同じで、許可を求めたタップの中でしか許可されません。押すボタンがないと、最初の音が鳴らず、カメラの許可を求める表示も出ないことがあります。

独自の起動画面

組み込みの起動画面はプリセットです。独自の画面をつくるには、起動スクリプトを書きます。起動スクリプトは、2 つの画面の両方を制御します。自分用の設定パネルも定義できるので、使う人はコードを編集せずにフィールドに入力するだけで済みます。

init((ctx: PreloadContext) => {
  // 設定パネルを宣言します。何かが描画される前に実行されるので、宣言だけにして、描画はしないでください。
  ctx.on('describe', (p) => {
    p.section('look', { en: 'Look' });
    p.color('tint', { label: { en: 'Background' }, default: '#101014', section: 'look' });
    p.text('caption', { label: { en: 'Caption' }, default: '', localized: true, section: 'look' });
    p.boolean('hideWhenReady', { label: { en: 'Hide when ready' }, default: true });
  });

  ctx.on('launch', () => {
    /* タップして始める画面を表示する */
  });

  ctx.on('loading', () => {
    /* ゲージが埋まっていく画面を表示する */
  });

  ctx.on('progress', ({ loaded, total, percent }) => {
    /* 自分でつくったプログレスバーを更新する */
  });

  ctx.on('ready', () => {
    /* すべて届いた */
  });
});

イベント	発生するタイミング
`describe`	設定パネルをつくるとき。ランタイムでもエディターでも発生します
`start`	ランタイムが起動するとき
`launch`	見る人がタップする画面を表示するとき
`loading`	ゲージが埋まっていく画面を表示するとき
`progress`	アセットが届いている間：`loaded`、`total`、`percent`
`ready`	必要なものがすべて届いたとき
`error`	問題が起きたとき

設定はローカライズできるので、1 つの起動スクリプトで、プロジェクトが対応するすべての言語をカバーできます。

シーンはタップの中で開始してください

シーンを開始する処理は、ボタン自身のクリックハンドラーから呼び出す必要があります。デバイスの向きとカメラの許可は、許可を求めたタップの中でしか与えられません。次のフレームでシーンを開始すると、許可が失われます。

起動スクリプトが壊れていても、見る人が締め出されることはありません

起動スクリプトがエラーを投げた場合は、代わりに組み込みの画面が表示されます。

読み込む必要がないもの

物理を使わないシーンは、物理の読み込みを待ちません。
インスタンシングのコピーやパーティクルは、いくつあってもダウンロードのサイズをほとんど増やしません。

見る人が、必要のないものを待つことはありません。詳しくは AR Clip を選ぶ理由を参照してください。

次へ： 共有パッケージ — インポートして使えるコードパッケージ。

アセットの届き方​

プロジェクトの初期設定とアセットごとの設定​

おすすめの初期設定​

起動画面​

独自の起動画面​

読み込む必要がないもの​

アセットの届き方

プロジェクトの初期設定とアセットごとの設定

おすすめの初期設定

起動画面

独自の起動画面

読み込む必要がないもの