プログラミング初心者が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でアプリを作成する際のおおまかな流れはこんな感じです。

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

アプリを作成する。

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

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

swift_1

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

SprictKitの画面は

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

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

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)                 
    }
}

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

 

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

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


①各スプライト登録
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 = "今日の運勢は"
        textLavel1.fontSize = 40
        textLavel1.fontColor = SKColor.blackColor()
        textLavel1.position = CGPoint(x: 200, y: 650)
        self.addChild(textLavel1)

        #上で定義した結果表示用テキスト(textLavel2)の詳細を設定
        textLavel2.text =  " "
        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)
    }
}

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

スクリーンショット 2015-10-22 14.55.42

3.動きを付ける

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

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

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

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

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

動き1:スタートボタンをタッチしたらゲーム画面に遷移する。
   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)
            }

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

動き2:ゲームスタートボタンを押したら結果を表示させる。
  ①タッチ後の動きの設定
    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 = ""くま吉考え中。。。""
                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]
    }

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

 

4.動作確認を行う

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

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

 

まとめ

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

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

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

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

 

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


DACエンジニア採用情報

  関連記事

rails
初心者がRailsで開発 – deviseでユーザー認証設定 -

こんにちは、2年目のYukaです。 開発部所属でありながら実は、、 実際に自分で手を動かして開発する機会がなかなかありませんでした。。 しかしついに、、、 開発初心者がRailsでWebアプリの開発に挑戦します!! 今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …

swift
iOS端末情報をTreasureDataに送るアプリをswiftで作ってみた。

はじめまして、2年目のOyamanです。 通常業務とは別のことになりますが、Swiftに触れる機会が少しあったので、スマホ関連の記事を書かせていただきます。 はじめに SwiftとTreasureDataのSDKを使って、 iOSの端末情報をTreasureDataへ送るアプリを作ってみます。 今回 …

スクリーンショット 2015-07-31 16.41.25
【未経験からのRuby on Rails – 第3回】変数と定数

こんにちは。新卒1年目のmatsuariです。 今回はRubyに限らずプログラミングを学ぶ上で非常に重要となる「変数と定数」について、ご紹介していきます。 変数とは・・・ オブジェクトを一時的に格納しておく箱で、オブジェクトを識別するために利用します。 言葉だけでは理解が難しいかと思いますので、まず …

no image
gulp.jsで広告タグの開発環境を整える

SEOの観点から、サイト表示速度の高速化のためJavaScriptファイルから不用な空白や改行、 コメントを除去したりやローカル変数名を短縮するminifyが奨励されていますが、 これはタスクランナーのgulp.jsとプラグインを使って自動化する事が可能です。 ※gulpの基本的な使い方については下 …

shogi
ナイーブベイズで羽生さんと羽生くんを分類してみた

はじめに こんにちは。システム開発部の中村です。 機械学習についての理解を促進するため、 データから分類モデルを自動で構築する古典的な方法である、 ナイーブベイズ分類器を実装してみました。 最近はCloudVisionAPIなど専ら画像解析が流行っていますが、 自分のような初学者には敷居が高そうだっ …

androidsdk10
SDKってどうやって作ってるの?【Android編】

こんにちは。4度目の投稿です。 現在私はAndroidのSDKを開発しています。 javaにもAndroidにもSDKにも手を出したのは初めてなので、最初はそもそもSDKのイメージが湧かず、ふわふわした状態で始めました。 SDKと調べても「あるソフトウェアを開発するために必要なプログラムや文書などを …

14391226325_8c35c2a652_z
D3.jsとその活用事例について

D3.jsとは? D3とは「Data Driven Document」の略で、データに基づいてドキュメントを操作するための JavaScript ライブラリです。 ご存知の方も多いと思いますが、ちょっとだけD3.jsの基本的な使い方、そして弊社プラットフォームでの利用についてご紹介したいと思います。 …

スクリーンショット 2015-07-31 16.38.02
【未経験からのRuby on Rails – 第2回】Rubyのプログラムを書いてみる(Mac)

こんにちは。新卒1年目のmatsuariです。 前回はRubyとは何か、簡単にご紹介をしましたが、 今回は実際にRubyファイルを作成して、プログラムを書いてみるところまでご紹介していけたらと思います。 Mac環境のプログラミング初心者向けです。 はじめに、Rubyのプログラムを書くためのファイルを …

no image
Angular.jsのvalueとfactoryの違いを考える

次のようなHTMLがあったとする。 valueとfactoryの違いを考える valueもfactoryもcontrollerから利用する値やfunctionを登録しておくのに使う。そのようなcontrollerの外部に登録されているfunction等をサービスと呼ぶ。たとえば、下記のようにplus …

no image
Polymer core-ajax の使い方

Polymerのcore-ajaxの使い方。 まずは、index.html my-topicsというCustom Elementに実際の処理を書く。JSONで、とあるサーバからデータを取得する、という想定。本当はJSONPで取りたかったんだけど、それは次回までの課題で… core-aja …