いものやま。

雑多な知識の寄せ集め

「BirdHead」のUIを作ってみた。(その1)

ということで、今日から「BirdHead」をiOSで遊べるようにしていく。

「BirdHead」に関しては、以下の記事を参照。

画面構成

まずは大雑把な画面構成から。

「BirdHead」はカードゲームなので、まずは以下のような要素が必要になってくる:

  • デッキ
  • 手札
  • カードをプレイする場所(プレイエリア)

さらに、「BirdHead」の場合、マイナス点を最後にプレイしたカードで受け取るので、以下のものも必要となってくる:

ただし、取得したマイナスカードの一覧はけっこう場所をとるので、普段は隠しておいて、参照が必要なときにだけ表示されるようにするとよさそう。
それと、手札についても、全員の手札を等しく表示させるとかなり場所をとるので、 AIの手札は上半分だけ表示するとかでよさそう。

これを踏まえると、以下のような画面構成になってくる:

f:id:yamaimo0625:20151104133558p:plain

f:id:yamaimo0625:20151104133606p:plain

モデル、コントローラ、ビュー

次に、モデル、コントローラ、ビューの関係。

SpriteKitを使う場合、コントローラに相当するものはシーンとなるのだけど、この三者の関係は次の図のようになるようにする:

f:id:yamaimo0625:20151104140202p:plain

この図の様子は普通のMVCとはちょっと違っていて、Cocoaのメディエータパターンを使ったMVCに近い。
(コントローラがメディエータとして働く)

f:id:yamaimo0625:20151104142504p:plain

最初は普通のMVCと同じようにしようと思っていたのだけど、アニメーションのタイミングを調整しようとしたときに、ビューからコントローラへの通知周りが割とごちゃごちゃする感じになってよくなかったので・・・

なお、カードのノード(ビュー)は必ずデッキ/手札/カードをプレイする場所/マイナスカード一覧のどこかに所属して表示されるので、シーン(コントローラ)が保持するのではなく、カードが現在所属するいずれかのノード(ビュー)が保持するようにした。

今日はここまで!