Widget とはなにか?

Widget とは何か?

このライブラリでちょくちょく登場する「Widget」というのは、このライブラリに定義されているUIパーツを表現するための型のことです。API 上では protocol で定義されており、Widget そのものがUIパーツとして直接機能するわけではありません。本当にUIパーツとして機能しているのは、Widget が作り出した SKNode のインスタンスです。

SKNode とは

SKNode というのは、Swift の2Dゲームフレームワークである SpriteKit にてグラフィックを表現するためのモデルのことです（これが正しい説明なのか私にはわかりません）。ツリー構造をしており、親子が存在します。親も SKNode であり、子も SKNode です。SpriteKit ではグラフィック関係は全て SKNode を使用してプログラミングします。MVC パターンなどに見られる View のようにも思われますが、（個人的な解釈ですが、）Model に相当するはずのオブジェクトです。

Widget は View なのか?

Widget は MVC や MVVM などで語られる View には含まれないと考えています。Widget も SKNode 同様に Model に相当すると考えています。これは、以下のようなフローで使用することを想定しているためです。

(1)Widget でレイアウトを作成 -----> (2)SKNode に変換 -----> (3)SKScene で描画 ------> (4)SKView で表示

ゲームのアーキテクチャとしてお馴染みのECS(あえて英語版)パターンを利用する場合、UI管理の役割をもつ Entity を定義し、Widget をその Entity に送信して表示するという使い方が想定されます。しかし、制作者自身の利用経験がまだ少ないのでもしかしたらもっといい使い方が登場するかもしれません。

ちなみに, 上記のフローを実際に行うコード(Playground 用)はこのようになります.

// ! 実際に動くことを確認していません.

import PlaygourndSupport
import SpriteKit
import GameWidget

// (1), (2), (3) をこのシーンで行います.
class Scene: SKScene {

    override func didMove(to view: SKView) {
        // (1) Widget でレイアウトを作成
        let widget = Display()
            .place {
                Button("sample")
                    .modifiable()
                    .position(CGPoint(x: 100, y: 100))
                Button("sample_2")
                    .modifiable()
                    .position(CGPoint(x: 90, y: 90))
                Button("sample_3")
                    .modifiable()
                    .position(CGPoint(x: 80, y: 80))
            }

        // (2) SKNode に変換
        let node = widget.node()

        // (3) SKScene で描画
        self.addChild(node)
    }

}

// (4) SKView で表示
let view = SKView(rect: CGRect(x: 0, y: 0, width: 1024, height: 640))

let scene = Scene(size: view.bounds.size)
scene.scaleMode = .aspectFit
scene.anchorPoint = CGPoint(x: 0.5, y: 0.5)

view.presentScene(scene)
playgroundSupport.current.setLiveView(view)