プログラミング初心者がswiftでゲームアプリ的なものを作ってみた。
こんにちは、DAC2年目のkumataです。
普段は素敵な先輩方に囲まれてインフラ周りのお仕事をさせて頂いていますが、
今回は業務とは全く関係ないプログラミングをやってみました。
全く初心者なのですが、swift+Xcodeで簡単にスマホゲーム的なものが作れました。
初心者の目線から作成方法をつらつらと書いていきたいと思います。
1 |
※本当に初心者向けです。 |
1 |
はじめに
環境について 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アプリを作るときには欠かせない便利ツールです。
ではさっそく
作成していった手順を簡単にまとめていきます。
1 |
※今一度いいますが、初心者向けです。 |
準備する。
まず、Xcodeをインストールしてきました。
自分のOSXのバージョンと互換性があるものを見つけてきて下さい。
インストール自体は他のアプリと変わらずにできます。
おおまかな流れ。
Xcode×swiftでアプリを作成する際のおおまかな流れはこんな感じです。
- Xcodeでプロジェクトを作成する。
- 画面を作成する。
- 動きをつける。
- 動作確認をする。
アプリを作成する。
1.Xcodeでプロジェクトを作成する。
Xcode > Create a new Xcore project > Game 画面より、下記を入力
1 2 3 4 5 6 |
Project Name : プロジェクトの名前 Organization Name : 開発者や開発会社の名前 Organization Idenitifier : 組織を識別できるドメイン名等 Language : Swiftを選択 Game Technology : SprictKit(2Dゲーム用のテンプレート)を選択 Device : 動かしたいデバイスを選択 |
2-1.スタート画面を作成する。
SprictKitの画面は
- Skview:土台
- SKScene:各場面(遷移していく度に変更になっていく様々な場面)
- SKNode:各オブジェクト(ボタンや画像等のゲームを構成する各要素)
1 |
の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 = "今日の運勢は"
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)
}
}
[/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 = ""くま吉考え中。。。""
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は自動でデバッグ及びコンパイルを行ってくれます。
なので、動作確認は左上の▶︎ボタンを押すだけで行えます。
構文ミス等があれば、ここでコンパイルエラーになってくれます。
テストができればアプリは完成です。
1 2 3 |
※動作確認時はものすごくCPU使います。 MACが悲鳴をあげますので、なるべく最低限のアプリ起動のみの状況でおこなってください。 |
まとめ
プログラムを作るというなんとなくハードルが高いと思っていた作業ですが、
swiftとXcodeを使って簡単に動くアプリを作る事ができました!
基本的な画面配置方法や動作の付け方を勉強できたので、これに肉付けをして様々なアプリが作れそうです。
業務ではあまり目に見えるものを作っていませんが、
今回の記事をかいてみて改めて何かをつくってみる事の面白さを実感できました。
次回はシューティングゲームの作り方を勉強したいと思います。
以上、プログラミング初心者のはじめてのゲームアプリ作成でした!

関連記事
-
-
読み方がわからない技術用語 2015
英語圏での読み方を基本的には参考にしています。英語圏でも複数の読み方をしているケースもあるようなので、あくまでも参考程度。2015と書きながら、古い言葉も混じってますが。 async – えーしんく Alt – おると ASUS – えいすーす bower  …
-
-
【小ネタ】JSで要素の組み合わせを列挙する
下記のような、キーの数や要素数が可変のデータの組み合わせを、列挙するjavascriptコードです。 pythonにはitertoolなどの順列・組み合わせ計算を行う定番ライブラリがあるようです。 やっている事ですが、イメージとしては組み合わせを数列に置き換えています。 1桁目が2進数、3桁目が3進 …
-
-
GoogleスプレッドシートからTreasureDataへデータを取り込む
AudienceOneの開発を担当しています。skryoです。 またまたTreasureDataネタですが、今回はGoogleスプレッドシートからGoogleAppsScriptを使ってTreasureDataへデータを取り込む手順を紹介したいと思います。 なぜ? Googleスプレッドシート上でマ …
-
-
Railsたった14行でアドサーバーAPIができた話
こんにちは。駆け出しエンジニアの近江です。 最近Railsにハマっているので、私が2年間担当しているアドサーバの、簡易版をRailsで作ってみました。 広告やキャンペーンを登録する管理画面はある前提で、ここからたった14行追加するだけでアドサーバーのHTTP APIを作りたいと思います。ついでに配信 …
-
-
Polymer on Rails
Web Componentsをご存知だろうか。これが普及すればWebの開発は画期的に変わるだろう。 説明すると長くなるので、LIGさんのにその辺はお任せして。(この記事読んでください。) 簡単に言えば、下記にあるような新たに提案されたブラウザ向けAPIの総称。 Custom Elements, 説明 …
-
-
ナイーブベイズで羽生さんと羽生くんを分類してみた
はじめに こんにちは。システム開発部の中村です。 機械学習についての理解を促進するため、 データから分類モデルを自動で構築する古典的な方法である、 ナイーブベイズ分類器を実装してみました。 最近はCloudVisionAPIなど専ら画像解析が流行っていますが、 自分のような初学者には敷居が高そうだっ …
-
-
Angular.jsのvalueとfactoryの違いを考える
次のようなHTMLがあったとする。 [code language=”html”] <!doctype html> <html lang="jp" ng-app="App"> <head> <me …
-
-
Scala番外編「Boxに保存したファイルをBox APIを使ってダウンロードしよう!」
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 Box APIを使う背景・目的 DACはメディアレップです メディアレップとは、インタ …
-
-
gulp.jsで広告タグの開発環境を整える
SEOの観点から、サイト表示速度の高速化のためJavaScriptファイルから不用な空白や改行、 コメントを除去したりやローカル変数名を短縮するminifyが奨励されていますが、 これはタスクランナーのgulp.jsとプラグインを使って自動化する事が可能です。 ※gulpの基本的な使い方については下 …
-
-
Scala入門 基礎編「Scalaの書き方を理解しよう」 – PHP使いからScala使いへ転身!
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 さて、今回はScala入門第二弾として、Scalaの書き方を紹介する基礎編をお送りしま …