iOSゲームアプリの作り方 - モノ創りで国造りを

はじめに

ほぼプログラミング無知だった筆者がiPhoneアプリ開発を始めて4ヶ月で20本のアプリをリリースした経験を踏まえて
簡単にカジュアルゲームアプリの作り方を解説したいと思います。
今更感満載ですが、お付き合い頂ければ幸いです。

前提

本記事ではiOSアプリでカジュアルゲームの作り方を簡単に説明します。
前提として、Xcodeをインストールしてある程度使い方を理解している方を対象にしています。
従ってXcodeの使い方についてはあまり細かくは述べませんのでご了承ください。

ゲームアプリの流れ

カジュアルゲームアプリは概ね以下のシーンの流れで進みます。

タイトル
遷移(カウントダウン)
プレイ
(遷移)
結果の表示

開発に必要な機能はあまり多くありません。

画像について
- 画像の配置
- 画像の移動
- 画像の描画
ボタンについて
- ボタンの配置
- ボタンのアクションの設定
ラベルについて
- ラベルの配置
- ラベルの記述
画像、ボタン、ラベルの移動とサイズ変更
画像、ボタン、ラベルの表示/非表示
関数の繰り返し
一定時間後に関数を実行

それぞれの機能の実装方法について説明した後に各シーンの実装を説明します。

画像について

画像の配置

画像を配置するには、Main.storyboardにImageVIewを配置します。
配置したImageViewをViewControllerに関連付けます。
ここではimage1と名前をつけて説明します。

描画する画像の設定

image1に表示する画像は以下のコードで設定できます。
以下のコードではimage.pngの画像データを表示します。

image1.image = UIImage(named:"image.png")

列挙体と一緒に使うと便利

ゲームの場合、キャラクタを歩いているように見せたり、移動方向などで画像を変更します。
その場合に以下のような列挙体を使用するとわかりやすくて便利です。

enum heroImg: String{
        case walkRight1 = "image1.png"
        case walkRight1 = "image2.png"
        case walkLeft1 = "image3.png"
        case walkLeft1 = "image4.png"
        case damage = "image5.png"
    }

image1.image = UIImage(named:heroImg.damage.rawValue)

ボタンについて

ボタンの配置

ボタンを配置するには、Main.storyboardにButtonを配置します。
配置したButtonをViewControllerに関連付けます。
ここではbutton1と名前をつけて説明します。

ボタンのアクション

Main.storyboardに配置したbutton1を再びViewControllerに関連づけます。
アクションを選択することで、ボタンを押した際に実行する内容を設定できるようになります。

ラベルについて

ラベルの配置

ラベル配置するには、Main.storyboardにLabelを配置します。
配置したLabelをViewControllerに関連付けます。
ここではlabel1と名前をつけて説明します。

ラベルの記述

ラベルに記載する内容は以下のコードで設定できます。

label1.text = "Hello World"

画像、ボタン、ラベルの移動とサイズ変更

画像、ボタン、ラベルの位置とサイズは以下のコードで設定できます(ここでは画像を例にしています)。

image1.frame = CGRect(x:0, y:0, width:200, height:300)

x、yが座標、widthが横幅、heightが縦の長さを示します。

画像、ボタン、ラベルの表示/非表示

デフォルトでは画像、ボタン、ラベルは表示された状態です。
ゲームの画面に応じて非表示にしたいと思うことがあります。
その場合は、以下のコードで非表示にできます(ここではラベルを例にしています)。

label1.hidden = 1

表示する場合は以下を記述します。

label1.hidden = 0

関数の繰り返し

ある関数を一定の時間間隔で繰り返す機能は、カジュアルゲームの肝です。
全てのゲームは、一定時間の繰り返しで動作しています。

//Timerを宣言
       var timer: Timer!

//時間間隔と繰り返し実行する関数を設定(ここでは、0.01s間隔でupdate関数を繰り返す)
        timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(self.update), userInfo: nil, repeats: true)
//タイマー開始
        timer.fire()

//一定時間間隔で実行する関数
@objc func update(tm: Timer) {
        ....
}

ゲームの背景やキャラクタを動かす場合が、update関数内に座標を記述します。タイマーを停止する場合は、

timer.invalidate()

ゲームオーバー時に実行することが多いです。

一定時間後に実行する関数

カウントダウンなど一定時間経過すると画像を切り替えたい場合には
以下のコードを使用します。

//例えば0.5s後に実行する場合
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.5) {
  ...
}

カウントダウン以外にも、一定時間後にキャラクタの画像を切り替えたり、敵の動きを変えるといったことも行います。

各シーンの実装

タイトル

タイトル画面です。
タイトル画面には、主に

背景
タイトル
スタートボタン
マニュアルボタン
記録確認ボタン

などがあります。

遷移

スタートボタンを押すとプレイ画面へシーンが遷移します。
どのような遷移画面にするかは自由です。
ここではカウントダウン方式の説明を行います。

カウントダウン方式

スタートボタンを押すと同時に画面に数字の3が表示され、1秒ごとに2、1と切り替わり、 0でゲームが開始するようにします。

スタートボタンをクリックすると同時に、以下を行います。

ボタンを非表示
タイトルを非表示
背景を非表示

合わせてカウントダウン画面を表示します。

プレイシーン

プレイ開始と同時に以下を行います。

プレイシーンの背景を表示
各キャラクタを表示
各オブジェクトを表示
ラベルの表示
ラベルの文字を0にする

繰り返し関数において以下を行います。

ボタンの押下を判断
敵・アイテムなどとの当たり判定
スコアの表示変更
ライフの表示変更
ゲームオーバー条件の確認
背景の移動
キャラクタの移動
オブジェクトの移動