【コピペで簡単ブロック崩し作成】MacPCとXcodeでiOSゲームアプリを作ってみた

おはようございます。
システム事業部 かっちゃんです。
平時はiOSアプリの開発に携わっています。

今回のこの記事もiOSアプリに関するものです。
目次を見て興味をひかれるものがあれば、どうぞ先へお進みください。

『XcodeでiOSゲームアプリを作る ブロック崩し編』

準備と説明

最初は準備と説明回です。
タイトルの通り、今回はMac PCとXcodeでブロック崩しのiOSゲームアプリを実際に作ってみたいと思います。

Xcode(エックスコード)は、Apple社が開発しているアプリ開発ツールです。
開発言語は『Swift』または『Objective-C』
今回は『Objective-C』を使います。

XcodeはMac App Storeから無料でダウンロードできます。
アプリをストアでリリースするには開発者登録が必要になりますが、アプリの開発とシミュレーターや実機で動かすまでなら無料でできます。
ちなみに今回は長くなるので、Xcodeのインストールや使い方の説明は省略します。

Xcode(Mac App Store)

『タイトル画面を作る』

ここからはXcodeを使い実際にアプリを作っていきます。
段階的にコードと実行結果の画像を載せるので、参考にしていただければと思います。

これから作るゲームの大まかな画面の流れは以下の通りです。

作成フロー①:タイトル画面
作成フロー②:プレイ画面
作成フロー③:ゲームオーバー画面
作成フロー④:クリア画面

今回はタイトル画面から順番に作っていきます。

基礎となるGameViewControllerとタイトル画面であるTitleSceneを作ります。
AppDelegate.mからGameViewControllerを開き、続いてGameViewController.mからTitleScene開くよう記述を追加します。
※ここからコードがずらっと並びます。

ひとまずここまでで一度動かしてみましょう。

Title_2

タイトル画面が表示されました。
画面下部に書いてある通り、この後コードを追加してゲームを開始できるようにします。

『プレイ画面を作る① ブロックとボールを配置してみる』

次はプレイ画面であるPlaySceneを作り、タイトル画面から遷移するようTitleSceneに記述を追加します。

タイトル画面をタッチした時にプレイ画面へ遷移する処理が用意できました。
続いてPlaySceneを作成し、ブロックとパドルを配置。
更に画面がタッチされたらパドルの上にボールが出現するよう記述します。

ひとまずここまでで一度動かしてみましょう。

Play_3

プレイ画面への遷移アニメーションです。
タイトル画面が上に押し出されてプレイ画面が下から出てきます。

Play_4

ブロックとパドル、ボールが表示されました。

『プレイ画面を作る② 物理エンジンと衝突判定』

ここからはゲームの要の部分を作ります。
画面上部に残りライフと現在のステージ数とSCORE(破壊したブロック数)を表示するようPlaySceneに記述を追加。
更に、ブロックとパドル、ボールにそれぞれ物理演算・衝突判定を設定します。

ボールが当たったブロックは破壊エフェクトを出して消え、ボールが画面下部に到達したらライフが1減るようにしてみます。

Play_6

【spark.sks】
今回の破壊エフェクトはテンプレートをそのまま使用します。
新しいファイルの作成から、ファイルのテンプレート『SpriteKit Particle File』を選択し、その後のパーティクルのテンプレートは『Spark』を選択。

ひとまずここまでで一度動かしてみましょう。

Play_7

ボールが動き、壁やパドルに当たって跳ね返り、ボールが当たったブロックは破壊され、ボールを落とせばライフが減るようになりました。
ここまででも既に十分ゲームらしい見た目になったと思いますが、もうちょっとだけ続きます。

『ゲームオーバー画面を作る』

続いてゲームオーバー画面の作成。
ゲームオーバー画面であるGameOverSceneを作り、ライフが0になった時に遷移するようPlaySceneにも記述を追加します。

ひとまずここまでで一度動かしてみましょう。

GameOver_3

ライフが0になったらゲームオーバー画面が表示され、タッチするとタイトル画面へ戻るようになりました。

『ステージクリア画面を作る そして次ステージへ…』

最後にステージクリア画面と次ステージへ進む処理を作ります。

PlaySceneに記述を追加していきましょう。
全てのブロックを破壊した時にステージクリアの表示を出し、タッチすると次のステージへ進むようにします。

これでブロックくずしの完成です!
動かしてみましょう。

GameClear_2

ブロックを全て破壊して次のステージへ進むことができるようになりました!

おまけ

ゲームアプリ『ブロックくずし』の作成は以上になります。
機能や演出を追加する、BGMやSEを鳴らす、解像度差を考慮してブロックの大きさやマージンを調整するなど改善点はまだまだありますが、今回の説明はここまで。
この先は自由に手を加えてみてください。

アプリのアイコンやローディング画面・背景画像を追加!

Omake_1 Omake_2 Omake_3

ゲームオーバー画面で進んだステージ数と壊したブロックの数をスコアとして表示!

Omake_3

最後に、こんな仕様を追加してみました。
機会があればまた別のゲームを作ってみたいと思います。

大阪府堺市にあるジョイントメディアならホームページ制作を格安で依頼出来ます