AutoLayout: Widget の座標とサイズを自動制御する

[rrbox]

UI ライブラリのほとんどは制約などでレイアウトの自動制御を行うことが多いようです。GameWidget も最終的には自動レイアウト機能の実装をできるようにしたいです。

サブタスク一覧

• WidgetFrame の座標と AnchorPoint から Widget の正しい座標を算出する #115

[rrbox]

MacOS 向けに方向キーで動かせるカーソルを追加することもできるようにもなると思います。

[rrbox]

自動レイアウトに必要な要素

• レイアウトをするフレームの定義
• 制約
• 制約と widget の対応
• Widget が自身のフレームに収まるための仕組み

[rrbox]

struct SomeWidget: WidgetWrapper {
    var body: some Widget {
        HStack {
            Button(.init("sample"))
            Button(.init("sample_2"))
            Text("sample_text")
        }
    }
}


let (node, system) = SomeWidget().createModels(in: CGRect(x: 0, y: 0, width: 800, height: 600))

[rrbox]

SpriteKit の Node の座標系についてのまとめ

anchorPoint = CGPoint(x: 0.5, y: 0.5) の状態について

AppKit 目線

このような CGRect がレンダリングに使用されます。

width = 600
height = 800
*–––––*
|     |
|     |
|     |
*–––––*
⎣_ origin: (x: -300, y: -400)

SpriteKit 目線

座標 position: CGPoint に .zero をセットすると、座標系の原点に表示されます。このとき、origin のに要素分だけ座標をずらして表示するようです。

width = 600
height = 800
*–––––*
|     |
|  *  |
|  ⎣__|______ SKNode/origin(anchorPoint): (x: 0, y: 0)
*–––––*
⎣_ origin: (x: -300, y: -400)
   (position: (x: -300, y: -400))

position を別の座標にすると、こうなるはずです。

width = 600
height = 800
*–––––*
|     |
|  *  |
|  ⎣__|______ SKNode/origin(anchorPoint): (x: 10, y: 100)
*–––––*
⎣_ origin: (x: -300, y: -400)
   (position: (x: -290, y: -300))

---

#115 を作成しました（2023/07/22 追記）。

[rrbox]

一つ一つの Widget が作成される手順

1. フレームの確定（x, y, z, size）
2. 性質の確定（各種 SKNode）
3. SKNode を フレームに収める
4. Modifier の適用（フレーム、性質の上書き）

ここからわかること

• Widget はフレームと WidgetNotificationSystem から SKNode を生成することになる
  • Widget の SKNode 生成メソッドの引数は frame, notificationSystem の2つになる.

単一の Widget の責任範囲

• 性質の定義（各種 SKNode）

HStack, VStack のようなレイアウト用 Widget の責任範囲

• Widget のフレームの計算
• 「全体フレーム」の要求

Display の責任範囲

• Widget を単一の SKNode に格納する

[rrbox]

HStack, VStack のための内部関数

HStask {
    Text("sample")
    Text("sample")
}
// □□

VStask {
    Text("sample")
    Text("sample")
}

// □
// □

HStask {
    HStack {
        Text("sample")
        Text("sample")
    }
    Text("sample")
    Text("sample")
}

// □□□□

HStask {
    VStack {
        Text("sample")
        Text("sample")
    }
    Text("sample")
    Text("sample")
}

// □□□
// □

どちらも1次元のリソースを各 Widget に割り振るような作りになるはずです。

struct SomeWidget {
    func addTo(buffer: inout [SKNode], frame: WidgetFrame, controller: WidgetNotificationSystem) {
        // フレームに合わせて SKNode を生成
    }
    var countOfNodes: Int { 1 }
}

struct WidgetList2<C0: Widget, C1: Widget> {
    let widgets: (C0, C1)
    var countOfNodes: Int { self.widgets.0.countOfNodes + self.widgets.1.countOfNodes }
}

struct HStack<Content: WidgetList>: Widget {
    let content: Content
    func addTo(buffer: inout [SKNode], frame: WidgetFrame, controller: WidgetNotificationSystem) {
        // フレームを割り振りながら SKNode を生成
        let widgetSize = CGSize(width: frame.size.width/self.countOfNodes, height: frame.size.height)
    }
    var countOfNodes: Int { 1 }
}

struct VStack<Content: WidgetList>: Widget {
    let content: Content
    func addTo(buffer: inout [SKNode], frame: WidgetFrame, controller: WidgetNotificationSystem) {
        // フレームを割り振りながら SKNode を生成
        let widgetSize = CGSize(width: frame.size.width, height: frame.size.height/self.countOfNodes)
    }
    var countOfNodes: Int { 1 }
}

---

課題

• countOfWidgets は Extension や ForEach などを考慮していない
  • countOfNodes として、WidgetListElementType すべてに実装することで解決できそうです。

protocol SplittingFrameElementType {
    var countOfNode: Int { get }
}

extension SplittingFrameElementType {
    var countOfNode: Int { 1 }
}

[rrbox]

フレーム Split のロジック

シンプルに、HStack と VStack で2種類のアルゴリズムを用意します。入力データは全体のフレーム（size のみ）、出力データはフレームの配列（position と size）です。

フレームの想定は、「一点を中心にした四角形」です。Widget を配置する SKNode の anchorPoint がなんであれ、その SKNode のposition を中心にするように配置されます。

1. CGSize のフレームを取得する。
2. フレームの左上頂点の座標を計算する。
3. 左上頂点を起点にしてフレームを切り分けていく。
4. フレームを切り分けたら、SKNode を割り当てていく。このとき、もとのフレームの左上頂点とフレームの中心の差分だけ座標を補正する。

[rrbox]

addTo(buffer:, center:) の内容が変更される必要があります

addTo(buffer: inout [SKNode], frame: (position: CGPoint, size: CGSize), center: WidgetNotificationSystem)

[rrbox]

Display/place(_:) の扱い

HStack や VStack を使用する前提なので、place(_:) メソッドはひとつの Widget を受け取るようにし、hStack(_:) と vStack(_:) を実装することになるかもしれません。

// 単一の Widget

// 1
Display.place {
    Button(.init("sample"))
}

// 2
Display.place {
    HStack {
        Button(.init("sample"))
        Button(.init("sample/2"))
    }
}

// NG (もしかしたら、自動で VStack にするかもしれないですが...)
Display.place {
    // for each は widget ではなく, 構造化要素なのでここには入れられない.
    ForEach(0...10) { i in
        Button(.init("sample\(i)"))
    }
}

// HStack

// 1
Display.hStack {
    Button(.init("sample"))
    Button(.init("sample/2"))
}

// 2
Display.hStack {
    ForEach(0...10) { i in
        Button(.init("sample"))
        Button(.init("sample/\(i)"))
    }
}

また、version 1 現在実装されている、place メソッドのチェーン機能は廃止されることになります。

// NG (version2〜)
Display.place {
    Button(.init("sample"))
}
.place {
    Button(.init("sample/2"))
}