インターフェースカード
2D の UI はすべてカードです。 HUD、メニュー、ボタン、ラベル、会話。平面に置いた 3D テキスト でも、文字入りのテクスチャでもありません。
カードは 3D ビューの手前で、ふつうのインターフェースと同じようにレイアウトされます。だから距離や 画面サイズが変わっても鮮明なままです。カードの中の文字は読めますが、世界の中の平面に載せた文字は カメラの機嫌しだいです。
カードはリソースで、それをオブジェクトに付けます。
置きかたは 2 通り
Overlay は画面いっぱいに広がります。HUD、メニュー、会話ウィンドウなど。
Anchored は、画面上のオブジェクトの位置にカードを留めます。キャラクターの上の名前、商品の上の 価格など。
デザインしたままの大きさを保ち、対象のオブジェクトがカメラの後ろに回ると隠れます。何かに付いた ラベルであって、世界の中のオブジェクトではありません。離れるほど小さくなるものが欲しいときは、 3D テキストを使ってください。
作れるもの
よくある構成要素はひととおりそろっています。
container · text · image · gif · video · separator · grid · gallery
pager · tabs · state · indicator · slider · input · select · switch
ボタンとは、背景・余白・枠線・アクションを持たせた text か container のことです。手間が
増えそうに聞こえますが、実際は逆です。既定のボタンと戦う代わりに、デザインが求めるとおりの
ボタンがそのまま手に入ります。
繰り返し現れるもの（リストの行、チップ、ギャラリーのカード）は、テンプレートを一度作って 使い回してください。
カードは自分の中に複数の画面を持ち、シーンをまったく巻き込まずに切り替えられます。タブ付きの パネルや多段の会話は、こうして作るのが正解です。シーンが知る必要はありません。
独自の component や、Lottie のようなサードパーティ拡張は描画されません。
カードに何かをさせる
カードは自分の変数を持ち、それで自分自身を変えられます。表示と非表示、文字の差し替え、画面の 切り替え、タイマーの実行。インターフェースの中だけで完結することは、カードの中に置いておいてください。
シーンに手を伸ばす必要があるときは、3 通りあります。後になるほど強力です。
| 方法 | 使いどころ |
|---|---|
| カードの組み込みアクション | UI の状態だけ。タブ、トグル、タイマー |
| アクションに付けるシーンのステップ | コードなしでシーンのステップを実行。シーン遷移、アニメーション再生 |
| 名前付きアクション＋ script | ゲームのロジック |
カードのアクションは、階層を上っていく通常のイベントも発生させます。だからシーンに置いた イベントで、その中のどのカードからの押下でも受け取れます。名前を指定しても、どんな押下でも かまいません。
script とやりとりする
script からはカードの変数を読み書きし、押下を受け取れます。
const ui = ctx.getDivKit(entity);
ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {
/* 表示が変わった */
});
ui.onAction('restart', () => {
/* リスタートのボタンが押された */
});
腑に落としておきたいのはこの形です。ゲームの状態は script に置き、カードはそれを表示する。 逆ではありません。
画像や動画を指す
カードの中では、URL ではなくプロジェクトのリソースを指してください。参照は式の中でも使えるので、 条件によって画像を選ぶような書きかたも、期待どおりに動きます。
設計を始める前に
- カードはそのシーンがアクティブな間だけ表示されるので、UI がシーンをまたいで漏れ出すことは ありません
- 3D ビューのスクリーンショットにカードは写りません。 UI はプレビューで確認してください
- カードの変数は参加者間で共有されず、リロードでリセットされます。共有が必要なもの、残す必要が あるものは script に置いてください
- ビジュアルエディターは選び抜かれたプロパティだけを表示しますが、手書きのレイアウトはそのまま 保ちます。編集しても壊れません。プロパティのパネルがないだけです
次へ: マテリアルグラフ — 標準のマテリアルでは足りないとき。