SwiftのSpriteKitで実装―タワーディフェンスゲームの大枠の作り方とコツ：iOS SDKとSwiftで始めるゲーム作成入門（2）（1/3 ページ）

一般的な「タワーディフェンス」ゲームのルール

連載目次

　前回の「初心者でもiOS 9／tvOS向け2Dゲームが作れる標準フレームワークSpriteKitの基礎知識とチュートリアル」ではSpriteKitのサンプルを動かしてSpriteKitの大枠を把握しました。

　今回からは実際にタワーディフェンスを作っていきます。

　まずはどんなゲームを作るかを考えます。タワーディフェンスのルールを調べてみましょう。Wikipediaによるとタワーディフェンスの基本的なルールは下記6点です。

　本連載では、このルールを満たすアプリを作っていきます。

今回の実装範囲――ゲームの大枠を作る

　今回はゲームの大枠を作ることを目標にします。敵と味方が画面に表示されて条件を満たすとゲームクリアやゲームオーバー画面が表示されることを目指します。

　具体的には下の3点を実装します。

　今回のゲーム作りの流れを簡単にまとめると下のようになります。

• 画面ごとにSKSceneのサブクラスのインスタンスを作成する
• 作成したScene（SKSceneのインスタンス）上に、Node（SKNodeのインスタンス）を配置して処理を記述していく

　基本的にはSceneを作って、その上に処理を書いていくだけなので慣れればスムーズに制作できるかと思います。これから紹介するライフサイクルメソッド「didMoveToView」「update」の概要は、前回記事を参照してください。

XcodeでGameプロジェクトを作成

　まずは、Xcodeの「Create a new Xcode project」から「Game」を選択してプロジェクトを作っていきます。

　「Product Name」「Organization Name」「Organization Identifier」は自分の好きなものを入れます。

　プロジェクトを作ったらまずは不要な処理を削除します。「GameScene.swift」を開いて下のように最低限のコードにします。

import SpriteKit
 
class GameScene: SKScene {
    override func didMoveToView(view: SKView) {
    }
}

SKSceneの設定

　SKSceneの設定を変更します。「GameViewController.swift」を開いて下のように修正してください。

// scene.scaleMode = .AspectFill
// ↑ を ↓ に書き換える
scene.scaleMode = .ResizeFill

　この設定は「sceneのサイズをviewに合わせるかどうか」という設定です。今回は扱いやすい「ResizeFill」を使います。

素材を敷き詰めて背景を表示する

　背景画像を表示します。素材は「ぴぽや倉庫」のフリー素材を使わせていただきました。

　こちらから「resource.zip」ファイルをダウンロードして解凍してください。その中に「Char.png」「Enemy.png」「Field.png」があるので「Assets.xcassets」の中にドラッグ＆ドロップします。

　画像の追加ができたらGameSceneのdidMoveToViewに下のような処理を記述します。これは背景にマップを敷き詰める処理です。

class GameScene: SKScene {
    override func didMoveToView(view: SKView) {
        let fieldImageLength: CGFloat = 32
        for i in 0...Int(frame.size.width / fieldImageLength) + 1 {
            for j in 0...Int(frame.size.height / fieldImageLength) + 1 {
                let field = SKSpriteNode(imageNamed: "Field")
                field.position = CGPoint(x: CGFloat(i) * fieldImageLength, y: CGFloat(j) * fieldImageLength)
                field.zPosition = -1
                addChild(field)
            }
        }
    }
}

　この状態で起動すると画面いっぱいに緑の画像が敷き詰められるかと思います。