プログラミング学習コラム、今回は第2回目の勉強内容です。

はじめてのゲームアプリに挑戦

iOSアプリと言えばやはりいつかはゲームアプリ作成に挑戦したいですよね。実際にゲームアプリを作るのは大変です。ストーリー構成、画面デザイン、2D or 3Dオブジェクトの設計・描画、難易度の調整、あらゆる状況でのデバッグなど、初心者がいきなりチャレンジするにはクリアすべき項目が多過ぎます。

ここでも『iOSの教科書』のゲームアプリは実に良く出来ています。超シンプルなアクションゲームでありながら、スマホアプリならではの特徴を持たせて、実行時にプログラマの満足度を高めてくれる題材を選んでいます。

前回ひととおりの作成手順を経験した方は、さっそくこの「Smash」ゲームの作成に取り組むことにしましょう。なお、この教科書の特徴として、前回までにやったことの説明は繰り返さず当然それは出来るものとして説明が進んでいく、というのがありますので、「あれっ、この部分はやり方の説明が書いてないぞ」と思ったらあわてず前章までの説明を見返してみましょう。どこかにやり方が書いてあるはずです。

以下、教科書と現在のXcodeのバージョンの違いについて触れていきます。教科書通りにやってもうまく行かない場合、下記の項目をチェックしてみて下さい。

『iOSの教科書』の実践！（Xcode5、iOS7対応版）

以下、第７章の補足項目です。前回同様電子書籍版をベースにしているので、ページ数が無意味になります。項目の番号で参照して下さい。

7.3 画像とプロジェクトの作成
今回も前回同様、自作の画像がない場合は公式サイトのリンク集からダウンロードした素材を使う。今回使うフォルダは「7 Smash」フォルダの「Images」フォルダ。
宇宙空間の画像は320ピクセル×480ピクセルであらかじめ用意された画像（Default.png）をそのまま用いてもよい。iPhone5以降では画面全体のピクセル数は640ピクセル×1136ピクセルであるが、Storyboardで配置する際に自動的に引き伸ばすことが出来る。高解像度（Retina）対応については第８章で触れられる。

3. 上記Imagesフォルダのプロジェクへの追加は、前回の方法で行う。第６章「6.1 ビュー・アイテム画像の作成」の3. 以下のやり方、または5. 以下のやり方を参照すること。

7.4 ステータスバーの消去
1. 〜 10. 全ての作業が不要。iOS7からはステータスバーが半透明であることが基本となり、背景画面は必ずフルスクリーンで作ることが前提になる。

7.5 ビュー・アイテムの作成
今回は前回のように「Retina 3.5-inch Full Screen」を選ばなくても良い。デフォルトで「Retina 4-inch Full Screen」が選ばれているが、今回はそのまま4インチ画面で作業を進めてもずれは生じない。

1. 前回同様「SmashViewController.xib」という項目はない。代わりに「Main.storyboard」を選ぶ。以降同様。
8. 前回同様オブジェクト・ライブラリに「Round Rect Button」はない。代わりに「Button」を選ぶ。
12. 追加作業として、「Title」欄のテキスト（「Button」）を削除する。

7.6 アウトレットやアクションの接続
今回は前回と違うもうひとつの方法でアウトレットやアクションの接続を行っている。前回と同じやり方でも構わない。今回は手動方式で面倒なようだが、失敗した時のUndo（やり直し）ははるかに楽である。失敗しない前提であれば前回の自動方式の方がずっと早く完了する。

5. 「Interface BuilderのDock」の代わりに、「StoryboardのDocument Outline」を開く。「File’s Owner」の代わりに、「Smash View Controller」を選択する。Document Outlineを表示するボタンは下の方にある。

図. 画面下部中央にある横向き三角のボタンが、Document Outlineを表示するボタン。

11. 「DockのFiles’s Owner」の代わりに、Document Outlineの「Smash View Controller」を、control + クリックする。（これもいわゆる「もうひとつのやり方」なので、直前の7. 〜10. のやり方で行なっても全く問題はない。）

7.7 タイマーの作成
2. タイマー生成コードの５行を書く場所を間違えやすいので注意。viewDidLoadメソッドの中のコメント（緑の文字）の次の行から書くと良い。さらに続くmove: メソッドを書く場所にも注意。move: メソッドはSmashViewController.mの自由な場所に書けるが、他のメソッドの中に書いてしまわないよう注意。書く場所がよくわからなければ「@end」の直前に追加していけばよい。以降書く場所がわからない場合は、7.16 スマッシュのソースコード を見て判断する。なお、この完成コードの中の – (BOOL)shouldAutorotateToInterfaceOrientation〜 メソッド（８行）は、iOS7では無効なメソッドなので、入力する必要はない。

図. viewDidLoadメソッド。最初の２行は自動的に入力されている。最後の行の「 } 」に注意。

7.8 乱数によるランダム移動
前半の３つのソースコードは説明用のサンプルコードなので、move: メソッドの中に書いてしまわないように。４つ目のソースコード、「//UFOを移動」行から実際にmove: メソッドの中に書いていく。５つ目のソースコード、「//乱数の初期化」以下の２行は、viewDidLoadメソッドの「// タイマーの作成（動作開始）」の直前に書く。

7.10 効果音の作成
画像ファイルと同様、音声ファイルについても公式サイトにサンプル素材が用意されている。このサンプル素材の効果音を用いる場合は、「7.10 効果音の作成」作業は不要となる。サンプル素材の「Sounds」フォルダをプロジェクトへ追加する方法は、「Images」フォルダの追加方法と同じ（上記7.3 を参照）。

7.11 フレームワークの追加
2. プロジェクト・エディタの左上に「Smash」と書いてあるところをクリックする。デフォルトで「Targets」→「Smash」が選ばれているはず。

7.12 効果音の再生
2. 書く場所は「#import <UIKit/UIKit.h>」の次の行
3. 書く場所は「 IBOutlet UIButton *target;」の次の行

7.14 ビューの自動回転
2. 前回と同様、このメソッドは現在は無効。この作業は飛ばす。前回の記事第６章「ビューの自動回転」の2. の部分を参照。
4. 前回同様、この部分はアイコンではなく、チェックボタンになっている。

 

以上でSmashの完成です。ついにアクションゲームの作成に成功しました。ゲームプログラミングは本来難しいものですが、このアプリではきわめてシンプルに、しかしスマホならではの要素をしっかりと備えていて、容易にプログラミングの基礎を学べるようになっています。UFOのランダムな移動は、move: メソッドの中で３行に凝縮されて書かれています。この部分をしっかり理解すれば、あなたも立派なプログラマの仲間入りです。

さて、次回はまたSmashです。今回作ったものを高解像度（Retina）に対応させ、さらにiPadにも対応させてみます。iPadアプリはまた動いた時の喜びが格別です。iPadをお持ちの方は是非チャレンジしてみて下さい。