変種オセロをiOSで遊べるようにするために、変種オセロのUIを作ってみた。
変種オセロ「良い子悪い子普通の子」については、以下を参照。
画面設計
まずは、画面設計から。
とりあえず、出来上がりがどんなふうになれば良さそうかを書いたラフが、以下。
汚いのはご愛嬌w
ポイント（とラフに書かれていない補足）を列挙すると、
- 画面は縦に使う。
（その方が自分ー相手の関係が分かりやすいから） - 画面の真ん中にボードを表示する。
- ボードの手前には自分の情報を表示する。
（駒の色、現状の駒の数、プレイヤー名） - ボードの奥側には相手の情報を表示する。
（駒の色、現状の駒の数、プレイヤー名） - プレイ可能なマスをハイライトで表示する。
- プレイ可能なマスをタッチすると、実際にプレイすることが出来る。
- ボードの左側にトークン。
- Undo、Pass、Config、Exitのボタンを用意する。
（使えないときにはそれっぽく表示） - 駒は人型（ミープル）で、黒い面と白い面がある。
- 黒い面が表になっていたら、悪い子。
- 白い面が表になっていたら、良い子。
- 駒が立っていて黒と白が見えていたら、普通の子。
という感じ。
黒と白の他に、灰色の状態を表現できるようにする必要があったのだけど、そこで駒を立てられるようにミープルにしたら、一気にいい感じになったw
実際には、プレイするときの画面以外にもいろいろと設計しないといけないのだけど、とりあえず後回しで。
サイズの計算
大体の配置を考えたので、実際のサイズ計算。
まず、iPhoneでもiPadでも大体同じ広さにするために、いろんな画面サイズに対応する方法について。 - いものやま。で書いた通り、iPhoneの場合、SKViewのサイズをUIViewのサイズの2倍にすることにする。
その場合、各デバイスの画面サイズは、以下。（※縦向き）
| デバイス | 画面サイズ |
|---|---|
| iPhone 4 / 4S | 640 x 960 |
| iPhone 5 / 5s / 5c | 640 x 1136 |
| iPhone 6 | 750 x 1334 |
| iPhone 6 Plus | 828 x 1472 |
| iPad / 2 / mini | 768 x 1024 |
| iPad 3 / 4 / Air / Air 2 / mini 2 / mini 3 | 768 x 1024 |
なので、基本的には640ポイントの幅で考えて、iPhone 6 / 6 PlusもしくはiPadの場合には、もう少し余裕もあるという感じ。
さて、変種オセロでどれくらい横幅が必要なのかを考えてみると、
なお、出来るだけ左右対称の方がいいので、可能なら後者にしたいところ。
ところで、640ポイントを基本とするので、これをそれぞれで割り算してみると、
- 10列にする場合、1列平均64ポイント
- 11列にする場合、1列平均約58.2ポイント
なので、逆にキリのいい60ポイントをマスの1列の幅として考えてやると、9列で60 x 9 = 540ポイントで、残りが100ポイント。
これを左右に振り分けて、50ポイントずつ。
そうすると、一番外側の列（トークンが移動する列と、それと対になる列）が、通常のマスより10ポイントずつ狭くなる。
それなら、駒の入る矩形をマスからインセットで10ポイントずつとった40 x 40ポイントとすれば、トークンが見切れることなく表示されるようになる。
そして、幅が640ポイントより大きい環境については、トークンの移動する列の幅も60ポイントとすると、11列で660ポイントを使うことになる。
iPadだと幅は768ポイントなので、これは約100ポイント余る計算。
そこで、これを50ポイントずつ左右に振り分けて、ボードに枠をつけてあげると、見栄えがよくなりそう。
この場合、iPhone 6だと枠が若干見切れて（左右で5ポイントずつ見切れる）、逆にiPhone 6 Plusだと枠の外側に若干の余裕（左右に34ポイントずつの余白）がある感じになる。
ここまでの検討をまとめると、以下の通り。
なお、AppleのHuman Interface Guideだと、コントロール要素のサイズは44 x 44ポイント以上が推奨されている。
ここで、マスのサイズを60 x 60ポイントにすると、実際にはこれが1/2に縮小されて表示されるので、30 x 30ポイントになってしまい、推奨されるサイズより小さくなってしまう。
けど、デフォルトのボタンの高さとかを調べてみると、30ポイントしかなかったので（Apple、それでいいのか？w）、大丈夫なはず・・・
今日はここまで！
