読者です 読者をやめる 読者になる 読者になる

いものやま。

雑多な知識の寄せ集め

変種オセロのUIを作ってみた。(その12)

ゲーム開発 Swift YWF

昨日はボタンの描画を実装した。

しかし、レイアウトに問題があることが発覚したので、今日はその解決を。

レイアウトのリデザイン

とりあえず、今まではどの画面サイズについても、縦方向の構成はどれも同じでいいやと思っていたけれど、画面サイズでこうも余白に差が出てしまうのでは、デザインを考え直さないといけない。

余白を埋める方法を考えると、いくつか方法が考えられる。

  • 画像のサイズを変える。
    • ボードのサイズを変える。
    • ボタンのサイズを変える。
  • 要素を追加する。
    • ボタンの配置を変える。(縦に配置する、など)
    • 棋譜を表示する。
    • ヘッダーを表示する。

ただ、画像のサイズを変えるのは、あまりやりたくないところ。
というのも、いろんなサイズの画像を用意しないといけなくなって、非常に面倒だから。
アプリのファイルサイズが大きくなるのも、あまりよくないし。
それに、横方向の限界があるので、それに従って縦方向にも限界が出てくる。

それと、要素を追加するとしても、棋譜を表示するというのは微妙。
というのも、将棋や囲碁といったメジャーなゲームであれば、棋譜の読み方というのも統一されているわけだけれど、今作っているのは変種オセロであって、内部的に棋譜のようなものは持っているけれど、それを外部に公開しているわけではないから。
棋譜を表示するなら、その棋譜を読めるように棋譜の仕様を外部に公開しないといけないわけだけど、そこまでやるのはちょっとやりすぎな感じがある。

ということで、今回は次の2つで対応することにした。

  • 縦方向の余白が大きい場合、ヘッダーを表示する。
    • ヘッダーを表示する場合、"Config"、"Exit"ボタンは、ヘッダー内に表示する。
      (ただし、今のところ設定するものはないので、"Config"は表示しない)
  • 縦方向の余白が大きい場合、ボタンを縦に並べる。
    • ボタンを縦に並べる場合、ユーザの情報を表示するエリアの縦のサイズも大きくする。

サイズの詳細

上記の方針で、機種ごとの各要素の縦方向のサイズを決めていく。

まず、各エリアを下の図のように分割。

+------------+
| ヘッダー    |
+------------+
| 相手情報    |
+------------+
| ボード      |
|            |
+------------+
| 自分情報    |
+------------+

そして、各エリアの縦サイズ(ポイント)を、以下のようにする。
(※SKSceneの縦サイズは、iPhoneの場合、画面サイズの2倍になっていることに注意)

機種 SKScene ヘッダー 相手情報
(+余白)
ボード 自分情報
(+余白)
iPhone 4S 960 なし 80(+20) 760 80(+20)
iPad 1024 100 80(+2) 760 80(+2)
iPhone 5s 1136 100 140(+28) 760 80(+28)
iPhone 6 1334 140 140(+77) 760 140(+77)
iPhone 6 Plus 1472 140 140(+146) 760 140(+146)

なお、

  • ヘッダーがない場合、"Exit"ボタンを相手情報のエリアに置く。
  • ヘッダーがある場合、"Exit"ボタンをヘッダーに置く。

また、

  • 自分情報の縦サイズが80ポイントの場合、"Undo"、"Pass"ボタンを横に並べて置く。
  • 自分上納の縦サイズが140ポイントの場合、"Undo"、"Pass"ボタンを縦に並べて置く。

とする。

あと、ヘッダーにはロゴを表示する。

これでレイアウトのリデザインが出来たので、次はこのレイアウトを実現するための仕組みを作る。

今日はここまで!