階層的UIのイベント伝播設計(ゲームのUIを例に)

p-hone
p-hone
Jul 29, 2017 · 2 min read

階層をもつUIのクラス設計、どのようにすれば良いか考えた。

具体例

下の例はゲームによくある「所持している武器を一覧表示するウィンドウ」的なもの。

この例で難しいのは、一番下の階層 (Weapon Item) をクリックすると、一番上の階層 (Game Scene) に通知する必要があるという部分。

一番下から一番上まで飛んで通知を送るためには、Weapon Item は ものすごく遠い存在である Game Scene への連絡手段が必要となる。

手段 (1).コールバック

Game Scene から Item Window をつくるときにコールバック関数を渡し、さらに Item Windows から Weapon Item List Tab をつくるときにそのコールバック関数を渡し、…

を繰り返して一番下の Weapon Item までコールバック関数を届かせるという方法。

この方法は単純明快ではあるけれど、あまり美しくない

なぜなら、本来そのコールバック関数を知るべきなのは Game Scene と Weapon Item の2つだけであり、その間にいるクラスは関与すべきではないから。

手段 (2).グローバル変数

Game Scene にグローバル変数として、クリック時の処理を公開しておく方法。

この方法はコード量が少なくて住むけど、やはり美しくない

なぜなら、間の2つのクラスどころか、どこからでもアクセスできてしまう。これは (1) のコールバックを渡す方法よりも厳しい。

手段 (3).イベントを受け取る専用のクラス

内部で (from -> to) の対応付を保持するイベントを受け取る専用のクラスがあればいいのではないだろうか?

Event Dispatcher 自体は結局グローバル変数のようなものだが、クラスという枠に閉じ込めてしまい、内部の対応付に従って通知先を決定するのであれば、グローバル変数を使うよりずっと安全なのでは。

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade