クイックスタート

このページでは、タイトルとボタンを持つカードという小さな画面の作り方を説明します。

1. パネルを作成する

パネルは YAUI のツリーのルートです。空の GameObject を作成し、次のコンポーネントを追加してください。

• YAUI/Panel (YauiPanel)。YauiElement も一緒に追加されます。パネルはルートの要素で、画面全体を覆います。
• YAUI/Raycaster (YauiRaycaster)。ポインターイベントを受け取るために使います。

既定では、パネルはポストプロセスの後に画面の上に描画されます (Overlay)。uGUI の Canvas Scaler と同じように、参照解像度 1080×1920 を基準に画面サイズに合わせて拡大縮小されます。

シーンに EventSystem があることを確認してください (GameObject > UI > Event System)。

2. 要素を追加する

パネルの下にある GameObject のうち、YauiElement (または YauiText などの派生コンポーネント) を持つものは、それぞれ UI 上のボックスになります。子は Flexbox によって親の内側にレイアウトされ、兄弟の順に親の上に描画されます。

注記

YAUI はパネルの下にある GameObject の Transform を無視します。意味を持つのは階層だけで、位置とサイズはレイアウトが決めます。要素を移動・回転・拡大縮小するには、描画変換を使ってください。

次の階層を作ります。

Panel            YauiPanel, YauiElement, YauiRaycaster
└─ Card          YauiElement
   ├─ Title      YauiText
   └─ Button     YauiElement, YauiButton
      └─ Label   YauiText

次に、Inspector で以下のプロパティを設定します。

GameObject	プロパティ
Panel	Layout: Justify Center、Align Items Center (カードを中央に配置するため)
Card	Layout: Size W 600、Padding を全辺 40、Gap (0, 24) Box: Background Color 白、Corner Radius を全角 24、Shadow Color 黒 (アルファ 0.3)、Shadow Blur 16、Shadow Offset (0, 8)
Title	Text Hello, YAUI!、Font Size 56
Button	Layout: Padding を全辺 24、Align Items Center Box: Background Color は任意、Corner Radius 16
Label	Text Press me、Color 白

Game ビューを見てみましょう。YAUI は Edit モードでも描画されます。

3. ボタンを処理する

YauiButton は、要素がクリックまたはサブミットされたときに OnClick を呼び出します。リスナーは Inspector で追加するか、スクリプトから追加します。

using UnityEngine;
using Yaui;

public class HelloButton : MonoBehaviour
{
    [SerializeField] YauiButton button;
    [SerializeField] YauiText label;

    int count;

    void OnEnable() => button.OnClick.AddListener(OnClick);
    void OnDisable() => button.OnClick.RemoveListener(OnClick);

    void OnClick()
    {
        count++;
        label.Text = $"Pressed {count} times";
    }
}

要素のプロパティはセッターで設定します。色や変形の変更は非常に安価です。何も再構築されず、レイアウトも再実行されません。スクリプティングを参照してください。

次のステップ

• サンプルを試してみてください。
• レイアウトと要素について学びましょう。