UI Editor
AR Clip の 2D インターフェース（HUD、メニュー、ボタン、ラベル）はすべてカードで、3D ビューの 手前に、ふつうのインターフェースと同じようにレイアウトされます。どんな距離でも、どんな画面でも 文字がくっきりしているのはこのためです。
カードの実行時のふるまいは インターフェースカードにあります。このページは作りかたの話です。
開きかた
入口は 4 つあり、どれも同じ全画面エディターに行き着きます。
- 左レールの Scene UI ボタン。アクティブなシーンのインターフェースを開き、なければ作ります
- シーンの設定の UI セクション
- オブジェクトの UI component から Edit layout
- プロジェクトのアセットにある UI ファイル
エディターは共同編集に対応していて、Apply と Close があります。
自分で作る必要はありません。開いて始めるだけです。
カードを何かに付ける
カードはファイルで、UI component がそれをオブジェクトに結び付けます。
| 設定 | 選択肢 |
|---|---|
| UI resource | どのカードか |
| Mode | Overlay（全画面）または Anchored（オブジェクトに留める） |
| Anchor X / Y | どの角・辺をオブジェクトに合わせるか。anchored のときだけ |
| Enabled | 表示するかどうか |
| Keep variables | シーンをまたいでも値を保つ |
シーンに載せたカードは常に overlay です。オブジェクトに載せたカードはどちらにもできます。
デザインしたままの大きさを保ち、対象のオブジェクトがカメラの後ろに回ると隠れます。距離に応じて 大きさを変えたいなら、3D テキストを使ってください。
UI をシーンにつなぐ
方法は 3 つあり、後になるほど強力です。
組み込みアクション — カード自身を変えるものです。画面の切り替え、変数の設定、タイマーの開始。 インターフェースの中だけで完結することは、ここに置いておきます。
シーンのステップ — エンジンのステップが、パラメーター付きのアクションとしてエディターから そのまま使えます。シーンへ移動、URL を開く、アニメーションを再生。ボタンがコードなしでシーンを 動かせるのはこれです。
名前付きアクション＋ロジック — アクションに id を付け、それに反応します。オブジェクトの Events component には UI アクションのトリガーがあり（id を空にすればどのアクションでも拾います）、 script から直接聞くこともできます。
const ui = ctx.getDivKit(entity);
ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {});
ui.onAction('restart', () => {});
逆に、カードの変数を正となる置き場にすると、その値を別の場所で使いたくなった瞬間に破綻します。 カードの変数は参加者間で共有されず、リロードでリセットされるからです。
次へ: Space の設定