UIレイアウトシステム再設計

flex だけ、はやめよう

ui-layout-2 ブランチで yoga を使った flex レイアウトをデフォルトにしてみたが、どうにも flex レイアウトはゲームでは使いづらい。画面の上下左右にスナップしたコンテナをまずルート要素近くに用意し、flex はその中で使うことが多いだろう。(それでもほとんど StackPanel で足りるが)

grid layout は欲しい。この grid も、WPF のような高さを指定できるものと Flutter のような列数だけ指定してあとは Flow にするもの、など欲しい。

Style vs 派生クラス

そうするとやっぱり UIElement ごとにレイアウト方法を変えたくなる。

HTML/CSS のように Style でやるならこんな感じ。

auto i = UIElement::With()
    .layoutDisplay(UILayoutDisplay::Grid)
    .size(100, 100)
    .build();

これまでのように派生クラスを用意するならこんな感じ。

auto i = UIGridLayout::With()
    .size(100, 100)
    .build();

後者の方が読みやすいだろう。

WPF, UE, Godot, Kivy, Flutter, Android あたりは後者。Unity の UIElements は前者。ゲームエンジンでは前者は珍しいかも。

デフォルトの Layout は？

これまで同様でよいだろう。ただ、UIVAlignment, UIHAlignment をやめたい。この指定がどうしても冗長になってしまう。

次のようにできないだろうか？

Margin の有無で Alignment を決める。
- Left または Right が指定されていたら、UIHAlignment::Left, UIHAlignment::Right と同義。
- 両方指定されていたら、UIHAlignment::Sretch と同義。
- 両方指定されていなかったら、UIHAlignment::Center と同義。
- Sretch 以外の場合、幅は Width を使う。Width 未指定の場合、desirdSize を使う。

パーセントの指定方法はどうしよう？

Litho は positionDip と positionPercent といった具合で別関数がある。というかコアになってる yoga そのまま。 https://fblitho.com/javadoc/com/facebook/litho/Component.Builder.html

ComponentKit はオブジェクトを渡す。 https://componentkit.org/docs/avoid-width-100-percent/

Flutter, Kivy, WPF はそもそも無いみたい。親の Grid など側で割合を指定できる。 https://stackoverflow.com/questions/43122113/sizing-elements-to-percentage-of-screen-width-height

Grid があればパーセントの指定は要らないかなという気がする。そうすると nan を無効値として扱うだけでよいため API はかなりシンプルにできる。

LuminoEngine / Lumino