【SpriteKitで始める #1】プロジェクト作成編

Swift, プログラム

2015.12.01

つぶやく

はてブ

あとで

こんにちは、@Yuuです。

前回の第0回では、SpriteKitとはどんなものか、どのような事を考えて作るのか、について書きました。

第1回の今回は、これから複数回解説を行う際のベースとなるプロジェクトファイルの作り方を解説します。ここで作るプロジェクトをベースに今後のファイルを作るので、しっかり作っていきましょう！

解説を行う環境

今回僕が解説を行う環境です。

OS：OS X Yosemite10.10.5
Xcode：7.1

Xcodeのバージョンが7以降なのでSwift2での解説になります。 Swift（無印）でも書き方はほぼ一緒だと思いますが、違う場合はご了承下さい。

基本となるプロジェクトを作成する

では早速基本となるプロジェクトを作っていきたいと思います。
今回行う作業は大まかに以下の4つを行います。

新規プロジェクトの作成
View Controllerの設定
Sceneの設定
View ControllerからGame Sceneを呼び出す

です。
では順番に解説していきます。

1. 新規プロジェクトの作成

Xcodeのメニューバーから
File -> New -> Project..を選択し、新しいプロジェクトを作成していきます。

SpriteKitは、そもそもゲームを作るフレームワークです。
Xcodeには新規プロジェクトを作成する際に「Game」という項目があります。ですが、今回は「Single View Application」を選択します。

「Game」という項目があるのになぜ選択しないかというと、「Game」を選択してしまうと様々なファイルを自動的に生成してくれてしまうからです。
逆に「Single View Application」はほぼ何もない状態からプロジェクトを作っていきます。
確かに「Game」を選択した場合は、様々なファイルを自動的に生成してくれるので非常に便利ではあります。ですが、初めてプロジェクトを作る際には、1から作る方が覚えると思うので、今回は「Single View Application」でまっさらな状態から始めてみましょう！

プロジェクト名は以下のように「GameSample01」というプロジェクト名にしましたが、ここは好きな名前にして頂いて構いません。

また、この後に設定するプロジェクトを保存するフォルダも好きな場所で構いません。

2. View Controllerの設定

プロジェクトの作成が完了したら「Main.storyboard」を開いて下さい。

するとView Controller内に「View」と書かれた項目があります。
こちらのViewを選択し右側のサイドバーのShow the Identity inspectorというタブ項目から
Custom Class -> Class内に「SKView」と記載します。

次にViewController.swiftファイルの編集を行います。

ViewController.swiftを開いてimport UIKitと書かれているすぐ下にimport SpriteKitと記載します。

そしてviewDidLoad()内にコードを追記し、viewDidLoad()を以下のように変更します。

override func viewDidLoad() {
   super.viewDidLoad()

   let skView = self.view as! SKView
   // FPSの表示
   skView.showsFPS = true
   // Nodeの数を表示
   skView.showsNodeCount = true
}

override func viewDidLoad() {

super.viewDidLoad()

let skView = self.view as! SKView

// FPSの表示

skView.showsFPS = true

// Nodeの数を表示

skView.showsNodeCount = true

}

6行目のskView.showsFPSや8行目のskView.showsNodeCountはFPSの表示、Nodeの数の表示を行うためのものなのですが、詳しい説明は後述しますね。

ここまで行った後のViewController.swiftの全文は以下のようになります。

import UIKit
import SpriteKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let skView = self.view as! SKView
        // FPSの表示
        skView.showsFPS = true
        // Nodeの数を表示
        skView.showsNodeCount = true
    }
}

import UIKit

import SpriteKit

class ViewController: UIViewController {

override func viewDidLoad() {

super.viewDidLoad()

let skView = self.view as! SKView

// FPSの表示

skView.showsFPS = true

// Nodeの数を表示

skView.showsNodeCount = true

}

上記のコードでは、プロジェクトを作った時に自動的に作られるdidReceiveMemoryWarning()というメソッドは使用しないので削除してあります。

ここまででViewController.swiftでの作業は一旦終了です。

3. Sceneの設定

次にSceneを追加します。

Sceneて何なんだよ！？という方は第0回の記事の「ゲームの遷移にはSceneを使う」という辺りを読んでみて下さい。

今回追加するSceneの名前は「GameScene」という名前にしたいと思います。

ファイルを追加するので、メニューバーから
File -> New -> File...と選択するか、下記画像のようにサイドバーのGameSample01というフォルダの上で右クリックをして「New File...」という項目を選択して下さい。

制作するファイルの種類を選択する画面で「Swift File」を選択します。

ファイル名に「GameScene.swift」と付け、createボタンを押してファイルを作成します。

作成したGameScene.swiftを選択し、まずファイルを作成した時に自動的に書かれているコードを全て削除しちゃいましょう。
そして以下のコードをまるっとコピーして貼り付けて下さい。

import SpriteKit

class GameScene: SKScene {

    /// Sceneが表示された時に呼ばれる
    override func didMoveToView(view: SKView) {

        // Sceneが呼ばれた時の処理を記載する

    }
}

import SpriteKit

class GameScene: SKScene {

/// Sceneが表示された時に呼ばれる

override func didMoveToView(view: SKView) {

// Sceneが呼ばれた時の処理を記載する

}

6行目のdidMoveToView(view: SKView)というメソッドが、GameSceneが呼び出され最初に実行されるメソッドです。
今回は「// Sceneが呼ばれた時の処理を記載する」というコメントアウトしか書いていませんが、今後はここに様々な処理を書いていきます。

ここまでの処理を行ったプロジェクトの画像を一応貼っておきますね。

4. View ControllerからGame Sceneを呼び出す

最後にViewControllerを起動した時にGameSceneを呼び出す設定を記述します。

追記した後のViewController.swiftは以下のようになります。

import UIKit
import SpriteKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let skView = self.view as! SKView
        // FPSの表示
        skView.showsFPS = true
        // Nodeの数を表示
        skView.showsNodeCount = true

        // viewと同じサイズのGameSceneを作成
        let scene = GameScene(size: skView.bounds.size)
        // viewにsceneを表示
        skView.presentScene(scene)
    }
}