UI エディター

シーンの上に表示する 2D のインターフェースを作ります。メニュー、ボタン、ラベル、画面上の表示などです。作ったら、オブジェクトやロジックとつなぎます。

AR Clip の 2D インターフェースは、どれも カード です。カードは 3D の表示の手前に、ふつうの画面と同じようにレイアウトされます。カードの文字は、どの距離から見ても、どの画面で見てもくっきりしています。

このページではカードの作り方を説明します。実行中のプロジェクトでカードがどう動くかは UI カードを見てください。

エディターを開く

開き方は 4 つあります。どれも同じ全画面のエディターが開きます。

1 つのカードを複数の人が同時に編集できます。変更を保存するには Save を、エディターを閉じるには Close をクリックします。

新しいシーンには最初から UI があります

中身は空で、すぐに使える状態です。自分で作る必要はありません。開いて作り始めましょう。

カードは 1 つのファイルです。UI コンポーネントを使って、カードをオブジェクトに付けます。

設定	選択肢
UI resource	表示するカード。
Mode	Overlay（全画面）または Anchored（オブジェクトに固定）。
Anchor X / Y	カードのどの辺や角をオブジェクトに合わせるか。Anchored モードのときだけ使います。
Enabled	カードを表示するかどうか。
Persist variables globally	訪問者が別のシーンに移っても、カードの値がそのまま保たれます。

シーン に付けたカードは、必ずオーバーレイになります。オブジェクト に付けたカードは、どちらのモードにもできます。

Anchored のカードは離れても小さくなりません

カードはデザインしたときの大きさのままで、オブジェクトがカメラの後ろに回ると隠れます。距離に応じて小さくしたいものには、3D テキストを使いましょう。

方法は 3 つあります。下に行くほど、柔軟に扱えます。

組み込みのアクション。 カードが自分自身を変えます。画面を切り替える、変数を設定する、タイマーを動かす、といった操作です。インターフェースだけに関わる処理は、ここにまとめておきましょう。
シーンのステップ。 エディターでは、エンジンのステップを設定付きでアクションとして選べます。シーンに移動する、URL を開く、アニメーションを再生する、などです。ボタン 1 つで、コードを書かずにシーンを操作できます。
名前付きのアクションとロジック。 アクションに ID を付けて、それに反応させます。オブジェクトの Events コンポーネントには UI action トリガーがあります。ID を空にすると、どのアクションにも反応します。スクリプトから直接受け取ることもできます。

const ui = ctx.getDivKit(entity);

ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {});
ui.onAction('restart', () => {});

ゲームの状態はロジックに持たせましょう

スコアや残りライフのような値は、スクリプトやパッチに保存し、カードには表示だけをさせましょう。カードの変数は参加者どうしで共有されず、ページを再読み込みするとリセットされます。

次へ： スペースの設定 — スペースの背景、ライティング、単位を設定します。