１年ぶりにiPhone用ゲームアプリの開発をしたのでまとめ（Cocos2d-iPhone Ver3.xとSpriteBuilder）

こんにちは、雑貨屋やってます、じぃーまです。空いた時間でiPhone向けのアプリの開発もやってます。今回はCocos2d-iPhoneとSpriteBuilderでのゲームアプリ開発について書きます。

確か昨年の最初の方までは「１ヶ月、遅くても２ヶ月に１本はアプリをリリースする」という目標でやっていたはずなのですが、気がついたら前回のリリースからほとんど１年経過していました。時の流れが早すぎてうんこ･･･いや失礼、大便を漏らしてしまいそうです。

１年ぶりにiPhoneアプリ開発をやったので、とにかく色々と変わりすぎてて大変でした。備忘録も兼ねて、ここまでやったことや参考にしたサイトをまとめたいと思います。これからアプリを開発する方、したい方、１年ぶりにアプリを開発しようとしてうんこ…大便が漏れそうな方のお役に立てれば幸いです。

完成したゲームアプリ

完成したゲームアプリはこちらです（2015/02/27 Appleの承認待ち）。
作業時間は30時間ぐらい（雑貨屋業のスキマ時間でやっているので不正確）。ゲーム作りそのものも久しぶりで大変でしたが、新しい環境へのアップデート作業とか、使い方の調査とか、そういうところにやたら時間がかかりました。10時間ぐらい？

ゲーム自体の紹介は別の記事にします。たぶんします。

開発環境のアップデート（XcodeとSpriteBulder）

１年ぶりにiPhone用アプリを開発するとなると、開発環境を最新にするところからスタートです。iPhoneアプリを作るので、無論ハードウェアはMacを使います。未だに私の開発環境はMacbookAirのみです。十分なんだもの。

（参考）MacbookAirで開発するときの便利なアイテム

MacBookAirだけでアプリ開発している私がオススメする、iPhone用アプリを開発するときにあると便利なアイテム３選 | はみ出るじぃーま

私がアプリ開発に使うのは以下のソフトです。これらを最新版にアップデートしておきます。

  • Xcode
    無料。Apple標準の開発環境
  • SpriteBuilder
    無料。なんかcocos2d-iPhoneのバージョン3から使えるようになった、プログラムを書かずに画面が設計できる便利なソフト
  • Cocos2d-iPhone
    無料。2Dのゲームが開発できる便利なフレームワーク。最新版はSpriteBuilderをインストールすると自動的にXcodeに導入されてクソ便利
  • GIMP
    無料。お絵かきソフト。Mac版はよくバグるのでWindows版を推奨。Illustrator？なにそれおいしいの？

はい、全部無料です。
はい、全部無料です（2回言いました）。

いい時代になりましたね。

SpriteBuilderとXcodeのインストールはAppStoreから

GIMP以外のソフト、SpriteBuilderとXcodeはMac標準のAppStoreからダウンロードできます。かんたん！

SpriteBuilerをダウンロードすると、Xcode上でCocos2d-iPhone V3が使えるようになります（インストール済みの古いバージョンであるcocos2d-iPhone v2は別名でちゃんと残りました）。面倒なインストール作業が不要でびっくりの簡単さ。まさに至れり尽くせり。そういえば前の会社で「至れり尽くせり」を「入れたり尽くせり」って言っちゃう下ネタなのか言い間違いなのかギリギリだったNさんは何をしているんだろう。元気かなぁ。

ちなみにCocos2d-SpriteBuilderの公式サイトはこちら。超英語。
Cocos2D-SpriteBuilder – Open Source Game Engine

GIMPのダウンロード

そうそう、無料で最高なお絵描きソフト（正確には画像編集ソフト）、GIMPのダウンロードはここです。WindowsでもMacでもイケますが、Mac版はよくバグります。

GIMP – The GNU Image Manipulation Program

ちなみに最新のXcodeを使うために、MacのOS自体をアップデートする必要があったので、このアップデート作業だけで5時間ぐらいかかりました。聡明にして計画的な皆さんは、日頃からこまめにアップデート作業をしておきましょう。アップデート待ちが長すぎて、アプリを作ろうという情熱が徐々に萎えてきます。

cocos2d-iPhone V2からV3への変更を確認する

Cocos2d-iPhoneが大幅にバージョンアップしたというので軽く調べてみたところ、もうこれがびっくりするぐらい色々変更になっていてうんこ…もううんこでいいか。うんこを漏らしました。私はアプリを開発するのは好きですが、技術的なところを勉強するのは別に好きではありません（えへへ）。いちいち変更点を網羅するのも面倒なので、以下のブログを熟読させていただき、あとはやりながら調べることにしました。結果的にそれで十分でした。

新しいCocos2dでは、なんとApple製品向け言語であるObjective-Cで書いてもAndroid用のソフトとして動かせるそうですね。そうなると、今まで面倒くさくて見て見ぬふりをしてきたAndroidマーケットも視野に入ってきます。とはいえ、やり方を調べるのも億劫な上にそもそもAndroidの端末を1台も持ってないという有り様なので、もう少し時間とやる気とお金がかかりそうです。がんばれじぃーまがんばれぇー。

ざっと調べると、cocos2d-iPhone v3の情報が非常に少ないことがわかります。これからcocos2d-iPhoneを勉強しよう！という方にはちょっと辛いかもしれません。私はまだv2の頃に以下の書籍で勉強したのですが、もう色んなところが変更されまくった上にSpriteBuilderについても書いてませんからね。これから勉強される方はファイトです。

cocos2dでつくるiPhoneゲーム―自由で速い、ゲーム用フレームワークを使う! (I・O BOOKS)

新品価格
￥2,484から
(2015/2/26 18:03時点)

SpriteBuilderの使い方を学ぶ

SpriteBuilderは、今まで全てコードで書いていた画面設計をGUIで行えるという便利なツールです。便利は便利なのですが、使い方を理解するのにやっぱりしばらく触ってみる必要がありますので、慣れるのに時間がかかりました。しかし使えるようになるとめっちゃ便利で、さらに画面サイズの違うデバイスでの表示差を手軽に確認できるのが良いです。もうSpriteBuilderなしでは生きられない…は言いすぎかな。茹でたスパゲッティを挟むトングぐらい便利。ないと地味に困るアレ。別に菜箸でもいいんだけどさぁ…茹でたてのスパゲッティを大量に箸でつかむの大変じゃん？こないだも4人前ぐらいの茹でたてアツアツなパスタをソースの中に移そうとしたらさぁ…重くてさぁ…まぁこの話はどうでもいいですね。スパゲッティ食べたい。

アニメーションもSpriteBuilderで設定できるのですが、実際に動かしてみると色々と問題があった（複数のアニメーションを同時に実行するやり方が分からなかったり）ので、最終的にアニメーションはコードで書いちゃいました。後から調整するのも、コードで書いた方が楽なケースが多いですし…。まぁ好みでしょうか。

このあたりの記事を参考にさせていただき、あとは色々触りながら覚えました。案ずるより産むが易し。手を動かさないと眠くなるし。

構想を練る


今回は久しぶりなのでリハビリと新しい環境への慣れを重視し、簡単なゲームを作ってみることにしました。ちょっと前にFlappyBirdをプレイして、すっごいイライラしながらもズルズルとプレイしてしまって関心したので、今回のテーマは「イライラするゲーム」にしました。

（参考）FlappyBirdはブラウザでもプレイできるみたいです。

すげぇイライラする楽しさ。なんだこれ。ぐぉぉ。
Play Flappy Bird

ゲーム内の絵（仮）を描く

まずはGIMPを使ってお絵かきします。自分の脳内で妄想しているゲームが本当に面白くなるかどうかこの時点ではよくわからないので、この時点では適当に描きました。気に入らなかったら後で直せばいいじゃん！という気軽な気持ちが大切です。

ずっと後になってやっぱり書き直し、最終的にはこんな感じに。

アイコンとロード画面の絵を描く

同じようにアプリのアイコンと起動中に表示される絵を書きます。

アイコンについては1024×1024サイズで描いた後、以下のサービスにぶん投げることで必要なサイズのアイコンを自動で生成してもらえるので最高すぎて大便…うんこが漏れそうです。


Makeappicon – Generate app icons of all sizes with a click!

また起動画面について、今まではアプリごとに書いていたのですがもう面倒臭いので、全てのアプリで共通して使えるデザインを描いてしまうことにしました。これも2回ぐらい描き直して最終的にこうなりました。うさぎだーい好き。

プロトタイプを作る

ここまで準備できたら、次は最初の妄想を形にします。
ところでプログラムには「コメント」と言われる注釈を入れるのですが、私のコメントは「どーん」とか「びゅーんってなる」みたいなコメントばっかりで何が言いたいのか自分でもわかりません。でもそんな自分が好きです。

ゲーム的には縄跳びするだけのシンプルな作りなので、ものの数時間（10時間ぐらい？）ですんなりとプロトタイプの完成です（といいつつ、cocos2dのバージョンアップとSpriteBuilderの使い方が分からないせいでやたら苦労しました）。

実際にプレイしてみると、面白いのか面白くないのかさらによくわからなくなってきました。なんか初期の絵、気持ち悪いし。なんで背景が真っ青なんだよ。作ってるうちに面白くなるかな…という希望的観測の元、最後まで作ることにします。がんばれじぃーまがんばれぇー。

音を用意する

ゲームにはググッとくる効果音の存在が欠かせません。今回は過去に自分で作った効果音を一部流用しつつ、以下のサイト様からいくつか拝借しました。

無料の効果音サイト

  • フリー効果音
    今度アップデートしたら、どっかにクレジット載せます。

無料のBGMサイト

自分で効果音を作るソフト（Mac/Windows）

GameCenterに対応する

シンプルなゲームなので、ここはひとつランキング（LeaderBoard)と実績（achievement）に対応したいと思います。

一見面倒くさそうですが、やってみると意外と簡単に実装できるのでオススメです。グッとちゃんとしたゲームみたいに見えるし。

GameCetnerプログラミングガイド（pdf、日本語）
https://developer.apple.com/jp/documentation/GameKit_Guide.pdf

インタースティシャル広告（とバナー広告）を導入する

今回、初の試みとしてインターステイシャル広告を導入しました。無料のアプリを使っているときに時々グイッと出てくる全画面の広告、アレです。うざいとか邪魔とか出過ぎとお思いでしょうが、貴重な収入源なんだから許してあげて欲しいです。

私のアプリではずっとGoogleが提供するadmobという広告ネットワークを利用して、バナー広告を表示していました。

またadmobには別の会社の広告も広告のソースに利用できるメディエーションという機能があり、Apple公式の広告ネットワークであるiAdと、モバイル向け広告ネットワークで優秀なnendという広告ネットワークを同時に広告のソースとして表示しています。nendがいい感じなので、nend推しです。どの広告ネットワークを優先するかもadmobから設定できます。

バナー広告の実装については、以前に作った自作アプリからコピペでほぼ問題なく導入出来ました。ちょっと古いですが、以下の記事が参考になります。

インターステイシャル広告の実装については公式の情報が役に立ちました。広告そのものであるGADInterstitialというクラスが使い捨てなので、何回も表示したかったら都度生成してやらないといけないところがハマりどころといえばハマりどころでしょうか。まぁ以下の公式サイトをちゃんと読めば書いてあるのですが。

インタースティシャル – Google Mobile Ads SDK — Google Developers

なんかバナー広告とインターステイシャル広告を両方入れると広告ばっかりでウザいと我ながら思ったので、そのうちどちらかを削除（たぶんバナー広告の方を）するかもしれません。

証明書を更新する

ほぼ1年ぶりにアプリをAppStoreに申請するにあたり、当たり前ですが開発者の証明書（Certificates)が期限切れになっています。やってみればどうってことない作業なのですが、こういう細々した作業って本当にやる気を失いますよね。本当にうんこ…うんこ出そう。

以下の記事を参考に、ササッと更新。10分ぐらいで完了。

AppStoreへの申請でつまづく

いざXcodeから完成したアプリをAppleStoreにアップロードしようとすると、こんなエラーが出て進みません。

iTunes Store operation failed. The network connection was lost

なんのこっちゃよくわからないので、以下の記事を参考にして対処。

この辺りはすでに適当になっていたのであーだこーだしているうちになんとかアップロード完了。よくわからないけど、うまくいったっぽいから満足です。

今後の展望

今回のアレコレで、ゲームアプリの作り方からCocos2d-iPhone v3とSpriteBuilderの使い方、インターステイシャル広告がいかに簡単に導入できるかなどを学びました。要するに色々わかったので、次はもう少し手の込んだじぃーまっぽいアプリを作っていきたいと思います。できればAndroidマーケットにも進出して、うんこ…いや、大便を漏らしてしまうほど儲けたいと思います。

じぃーまでした。

アプリ,サラリーマンからの独立