メインコンテンツまでスキップ

UI カード

UI カードは 2D のインターフェースです。HUD、メニュー、ボタン、ラベル、ダイアログなどに使います。このページでは、カードを配置してシーンとつなげる方法を説明します。

カードは、3D ビューの手前に、ふつうのアプリの画面と同じようにレイアウトされます。そのため、どの距離から見ても、どの画面サイズでも、文字がくっきり表示されます。3D ワールドの平面に置いた文字は、カメラの位置によって見え方が変わります。人が読む必要のあるものには、カードを使いましょう。

カードはプロジェクト内のファイルで、オブジェクトに付けて使います。

オブジェクトにカードを追加する​

  1. オブジェクトを選択します。
  2. インスペクターで + new component をクリックし、UI を選びます。
  3. Select a UI でカードを選びます。
  4. Overlay か Anchored を選びます。
  5. Edit layout をクリックし、UI editor でカードをデザインします。

シーン全体のインターフェースを編集するには、左レールの Scene UI をクリックします。エディターの使い方は UI エディターで説明しています。

Overlay と Anchored​

Overlay は画面全体に表示されます。HUD、メニュー、ダイアログボックスに使います。

Anchored は、画面上のオブジェクトの位置にカードを固定します。キャラクターの上に出す名前や、製品の上に出す価格に使います。

Anchored のカードは大きさが変わらない

カードはデザインしたときの大きさのまま表示され、オブジェクトがカメラの後ろに回ると隠れます。ワールドの中のオブジェクトではなく、何かに付けたラベルだからです。離れるにつれて小さくなるものが欲しいときは、3D テキストを使ってください。

使える部品​

カードは、次の部品を組み合わせて作ります。

container · text · image · gif · video · separator · grid · gallery
pager · tabs · state · indicator · slider · input · select · switch
ボタンは text か container で作る

ボタン専用の部品はありません。ボタンは、背景、余白、枠線、アクションを付けた text か container です。そのため、デザインのとおりの見た目のボタンを作れます。

  • テンプレート：リストの行、チップ、ギャラリーのカードなど、繰り返し出てくるものは、テンプレートを 1 回作って使い回します。
  • 画面：カードには複数の画面を持たせ、シーンを使わずにカード自身で切り替えられます。タブのあるパネルや、何段階かに分かれたダイアログに使います。

カスタムコンポーネントや、Lottie などのサードパーティの拡張機能は表示されません。

カードに動作をさせる​

カードは独自の変数を持っています。変数を使って、カード自身を変化させられます。部品の表示・非表示、テキストの入れ替え、画面の切り替え、タイマーの実行などです。インターフェースだけに関わることは、カードの中で完結させましょう。

カードからシーンに影響を与える方法は 3 つあります。上ほどシンプルで、下ほど柔軟です。

方法用途
カードに組み込まれたアクションインターフェースだけの変化：タブ、トグル、タイマー
アクションに付けたシーンステップコードを書かずにシーンのステップを実行する：シーンの切り替え、アニメーションの再生
名前付きのアクションとスクリプトゲームのロジック

カードのアクションは、オブジェクトの親へもイベントとして伝わります。そのため、シーンに付けたイベントで、その中にあるどのカードのボタンが押されても受け取れます。UI action トリガーを使い、Action id を設定すると特定のボタンだけに反応し、空のままにするとどのボタンにも反応します。

スクリプトから、カードの変数を読み取ったり、変更したり、ボタンの押下を待ち受けたりできます。

const ui = ctx.getDivKit(entity);

ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {
  /* 表示が変わった */
});
ui.onAction('restart', () => {
  /* リスタートボタンが押された */
});

ゲームの状態はスクリプトで持ち、カードはそれを表示するだけにしましょう。その逆にはしないでください。

カード内の画像と動画​

カードの中では、URL ではなく、プロジェクト内のファイルを指定します。式の中でも使えるので、条件に応じて画像を選べます。

デザインを始める前に​

  • カードは、そのシーンがアクティブな間だけ表示されます。インターフェースが別のシーンに持ち越されることはありません。
  • 3D ビューのスクリーンショットには、カードは写りません。インターフェースはプレビューで確認してください。
  • カードの変数は、同じセッションにいる人どうしで共有されず、ページを再読み込みするとリセットされます。共有や保存が必要なものは、スクリプトで扱ってください。
  • ビジュアルエディターに表示されるのは、選ばれた一部のプロパティだけです。手で書いたレイアウトは、カードを編集してもそのまま残りますが、プロパティパネルには出てきません。

次へ： マテリアルグラフ — 標準のマテリアルでは足りないときに、独自のマテリアルを作ります。