プログラミング初心者がswiftでゲームアプリ的なものを作ってみた。

こんにちは、DAC2年目のkumataです。

普段は素敵な先輩方に囲まれてインフラ周りのお仕事をさせて頂いていますが、今回は業務とは全く関係ないプログラミングをやってみました。全く初心者なのですが、swift+Xcodeで簡単にスマホゲーム的なものが作れました。初心者の目線から作成方法をつらつらと書いていきたいと思います。

※本当に初心者向けです。

はじめに

環境について OS：OS X 10.9.5 Xcode：Version 6.2（OSX 10.0.5に互換してる最新だと思います） ⇒App storeでインストールしようとしても最新版しか選択できず… 　　　　　　　　 https://developer.apple.com/downloads/index.actionからとってきました。ちょこっとだけswiftとXcodeについて。

swift

Appleが提供するMacやiPhone等のプラットフォーム向け開発言語。従来使用されていたObjective-Cよりスクリプト言語のような見た目でとっつきやすく、手軽に実行できる素敵なものです。 Cの複雑さに心が折れた私もすんなりできました。

xcode

iOSアプリ開発iOSアプリ開発用のツールで、自動でコンパイルやらデバッグやらをやってくれる、 iOSアプリを作るときには欠かせない便利ツールです。

ではさっそく

作成していった手順を簡単にまとめていきます。

※今一度いいますが、初心者向けです。

準備する。

まず、Xcodeをインストールしてきました。自分のOSXのバージョンと互換性があるものを見つけてきて下さい。インストール自体は他のアプリと変わらずにできます。

おおまかな流れ。

Xcode×swiftでアプリを作成する際のおおまかな流れはこんな感じです。

Xcodeでプロジェクトを作成する。
画面を作成する。
動きをつける。
動作確認をする。

アプリを作成する。

1.Xcodeでプロジェクトを作成する。

Xcode > Create a new Xcore project > Game 画面より、下記を入力

　Project Name　　　　　 　: プロジェクトの名前
　Organization Name　　  　: 開発者や開発会社の名前
　Organization Idenitifier : 組織を識別できるドメイン名等
　Language                 : Swiftを選択
　Game Technology          : SprictKit(2Dゲーム用のテンプレート)を選択
　Device                   : 動かしたいデバイスを選択

2-1.スタート画面を作成する。

SprictKitの画面は

Skview：土台
SKScene：各場面（遷移していく度に変更になっていく様々な場面）
SKNode：各オブジェクト（ボタンや画像等のゲームを構成する各要素）

の3つの要素でできています。 Nodeは画面上の位置情報（position）をx軸とy軸の座標として持っていて、その座標を元に画面上に表示されます。まず、アプリの起動時に立ち上がるタイトル画面を作成しました。下記が、実際に作成したプログラムです。

[shell] class TitleScene: SKScene { ①各スプライト登録　　　#使いたい要素を定義する　　　//文字列　let 変数 = SKLabelNode(fontNamed: "使いたいフォント") 　　　//画像　let 変数 = SKSpriteNode(imageNamed: "事前に取り込こみ済みの画像の名前") let titleLabel = SKLabelNode(fontNamed: "Verdana-bold")　 //タイトル文字列のラベルを定義 let startLabel = SKLabelNode(fontNamed: "Verdana-bold") 　//スタートボタンのラベルを定義 let titleImg = SKSpriteNode(imageNamed: "kuma1.png") 　　　 //タイトル画像を定義

②配置登録
override func didMoveToView(view: SKView) {

　　　　　#背景色をつける　　　　　//self.backgroundColor = 色コード self.backgroundColor = UIColor.brownColor() 　　　　　　　　　　#上で定義したタイトルの文字列(titleLabel)の詳細を設定 titleLabel.text = "くま吉の今日の運勢うらなっちゃうぞゲーム" //表示する文字列 titleLabel.fontSize = 35　　　　　　　　　　　　　　　　　 //文字の大きさ titleLabel.position = CGPoint(x:375, y:1200)　　　　　 //表示位置 self.addChild(titleLabel)　　　　　　　　　　　　　　　　　 //設置しますよという宣言（必須！）

    #上で定義したタイトル画像(titleImg)の詳細を設定
    titleImg.position = CGPoint(x: 375, y: 700)　
    addChild(titleImg)

　　　　　　　　　　　　　　　 #上で定義したスタートボタン文字列(startLabel)の詳細を設定 startLabel.text = "やってみる"　　　　　　　　　　　　　　　 startLabel.fontSize = 60　　　　　　　　　　　　　　　　　 startLabel.position = CGPoint(x:375, y:200)　　　　　　 self.addChild(startLabel)　　　　　　　　　　　　　　　　 } } [/shell]

こんな画面ができました。

2-2.ゲーム画面を作成する。

下記がゲーム画面用のプログラムです。

[shell]

①各スプライト登録 class GameScene: SKScene { #使いたい要素の定義 let moveSprite = SKSpriteNode(imageNamed: "kuma2.png") //動く画像用スプライト定義 let btnSprite = SKSpriteNode(imageNamed: "button.png") //ボタン画像用スプライト定義 let titleSprite = SKSpriteNode(imageNamed: "title.jpeg") //タイトル画像用スプライト定義 let textLavel1 = SKLabelNode(fontNamed: "Verdana-bold") //テキスト用スプライト定義 let textLavel2 = SKLabelNode(fontNamed: "Verdana-bold") //結果表示用テキストを定義

②配置登録 override func didMoveToView(view: SKView) { #背景色設定 self.backgroundColor = SKColor.whiteColor()

　　　　 #上で定義したタイトル画像(titleSprite)の詳細を設定 titleSprite.position = CGPoint(x: 375, y: 1200) addChild(titleSprite)

    #上で定義した動く画像(moveSprite)の詳細を設定
    moveSprite.position = CGPoint(x: 100, y: 900)
    addChild(moveSprite)

    #上で定義したテキスト1(textLavel1)の詳細を設定
    textLavel1.text = &quot;今日の運勢は&quot;
    textLavel1.fontSize = 40
    textLavel1.fontColor = SKColor.blackColor()
    textLavel1.position = CGPoint(x: 200, y: 650)
    self.addChild(textLavel1)

    #上で定義した結果表示用テキスト(textLavel2)の詳細を設定
    textLavel2.text =  &quot;　&quot;
    textLavel2.fontSize = 65
    textLavel2.fontColor = SKColor.blackColor()
    textLavel2.position = CGPoint(x: 375, y: 500)
    self.addChild(textLavel2)

    #上で定義したボタン(btnSprite)画像の詳細設定
    btnSprite.position = CGPoint(x: 375, y: 300)
    self.addChild(btnSprite)
}

} [/shell]

こんな画面ができました。

3.動きを付ける

では、2で作成した画面に動きを付けていきたいと思います。

今回付けたい動きは2つです。 1.スタートボタンをタッチしたらゲーム画面に遷移する。 2.ゲームスタートボタンを押したら結果を表示させる。

iPhoneアプリは基本的にユーザの画面操作で動きます。そのため、タッチした場所を認識し、その場所にある要素が何かを判断することで動きを付けていきます。

具体的には以下のような動きをします。まず、touchesという変数にユーザがタッチした場所の情報がはいってきます。その変数touchesをforでまわし、指一本ずつの場所のデータを別の変数(touch)に取り込みます。そして、locationInNodeという関数を使用し取り込んだ変数の座標をさらに別の任意の変数に取り込みます。最後にその変数に入った座標情報を動きを始めたい要素の座標と比較し、一致したら動作を開始させます。

下記が実際のプログラムでとなります。

動き1：スタートボタンをタッチしたらゲーム画面に遷移する。

[shell] override func touchesBegan(touches: NSSet, withEvent event: UIEvent) { 　　　　　　#touchesに入れられた情報をforで一つずつ変数touchに取り込む for touch: AnyObject in touches {

　　　　　　　　#locationInNode関数で変数touchに入っている指一本ずつのタッチした場所の座標を変数locationに取り込む let location = touch.locationInNode(self)

　　　　　　　　#変数locationに存在する要素を確認し変数touchNodeに取り込む let touchNode = self.nodeAtPoint(location)

     　　 #上で調べた要素(touchNode)がもしスタートボタン(startLabel)なら
        if touchNode == startLabel {

　　　　　#ゲーム画面に切り替える let skView = self.view as SKView! let scene = GameScene(size: self.size) scene.scaleMode = SKSceneScaleMode.AspectFill skView.presentScene(scene) } [/shell]

このような動きが追加されました。

動き2：ゲームスタートボタンを押したら結果を表示させる。

[shell] 　　①タッチ後の動きの設定 override func touchesBegan(touches: NSSet, withEvent event: UIEvent) { for touch: AnyObject in touches { #タッチされた位置にある要素を変数touchNodeに取り込む let location = touch.locationInNode(self) let touchNode = self.nodeAtPoint(location)

        #もしその要素(touchNode)がボタン画像(btnSprite)のなら文字列(textLavel2)を表示し、さらにサブルーチン(shakeOmikuji)を呼び出す
        if touchNode == btnSprite {
            textLavel2.text = &quot;&quot;くま吉考え中。。。&quot;&quot;
            shakeOmikuji()
        }
    }
}

　　②①で呼び出すスプライトの動きの設定　　 #サブルーチン(shakeOmikuji)の設定 func shakeOmikuji(){ 　　　　 #サブルーチンの中で動く画像(moveSprite)にさせたい動きを登録 let action1 = SKAction.rotateToAngle(-0.3, duration: 0.2) //右に傾く let action2 = SKAction.rotateToAngle( 0.3, duration: 0.2) //左に傾く let action3 = SKAction.moveTo(CGPoint(x:650,y:900), duration: 3) //右に移動する

    #SKAction.sequenceを用いて動く順番を変数actionKに登録
    let actionK = SKAction.sequence(
        [action1,action2,action1,action2,action1,action3])

    #設定した動きをmoveSpriteにひも付け、さらに終了後に呼び出すサブルーチン(showResult)を設定

　　　　　 //動かしたいスプライト.runAction(動き, completion: 動きが終わったらさせること) moveSprite.runAction(actionK, completion: showResult) }

　　③②で呼び出す結果表示時の設定　　 #サブルーチン(showResult)の設定 func showResult(){ #表示したい文字列を配列(result)にいれる。 var result = ["まぁまぁ","よさげ","ぱっとしない...","どんまい。","最高！","最悪！"]

    #arc4random_uniform関数で変数(r)に入った配列がランダムに表示されるように設定
    //var 変数 = Int(arc4random_uniform(配列に入る要素の最大値))
    var r = Int(arc4random_uniform(6))

　　　　　#変数(r)に入ったランダムな文字列を結果表示用テキスト(textLavel2)に表示させる textLavel2.text = omikuji[r] } [/shell]

このような動きが追加できました。

4.動作確認を行う

Xcodeは自動でデバッグ及びコンパイルを行ってくれます。なので、動作確認は左上の▶︎ボタンを押すだけで行えます。構文ミス等があれば、ここでコンパイルエラーになってくれます。

テストができればアプリは完成です。

　
※動作確認時はものすごくCPU使います。
 MACが悲鳴をあげますので、なるべく最低限のアプリ起動のみの状況でおこなってください。

まとめ

プログラムを作るというなんとなくハードルが高いと思っていた作業ですが、 swiftとXcodeを使って簡単に動くアプリを作る事ができました！

基本的な画面配置方法や動作の付け方を勉強できたので、これに肉付けをして様々なアプリが作れそうです。

業務ではあまり目に見えるものを作っていませんが、今回の記事をかいてみて改めて何かをつくってみる事の面白さを実感できました。

次回はシューティングゲームの作り方を勉強したいと思います。

以上、プログラミング初心者のはじめてのゲームアプリ作成でした！

DACエンジニアブログ：アドテクゑびす界

DACのエンジニアやマーケター、アナリストが執筆するアドテクの技術系ブログです。