Cocos2d-iPhone 3.0と SpriteBuilderでFlappyBirdっぽいゲームを作ります。
というか、こちらの記事の和訳＋補足になります。
https://www.makegameswith.us/gamernews/369/build-your-own-flappy-bird-with-spritebuilder-and
↑こういったアプリが作れます。
まずはインストール
まず以下の２つをDLし、インストールしましょう。
- Cocos2d 3.0
- SpriteBulider
両方共インストールが完了したら早速始めちゃいましょう。
参照元は「チュートリアルはやっておいてね」と書いていたのですが、無視します。
プロジェクトを作ろう
SpriteBuliderを起動して、プロジェクトを作ります。
File > New > Project と選択して、
「FlappyFly」という名前をつけて、デスクトップに保存。
（保存先はどこでも良いです。）
するとプロジェクトが作成されて、最初の画面が表示されます。
デフォルトの画面を消す
SpriteBuilderという文字と、その後ろの青い背景を消します。
これで何もなくなりました。
ちなみにオブジェクトを選択してdeleteボタン押しても消せます。
画面を縦にする
横画面だと具合がわるいので、縦にします。
File > ProjectSettings… を選択し、
Default scaling from: を 2x(iPhonehd)に、
Orientation: を Portraitにして
「Done」を押します。
これで画面が縦になりました。
続いてはSpriteBuilderで背景画像を設置します。
画像をダウンロードする
こちらのページから画像をダウンロードします
https://s3.amazonaws.com/mgwu-misc/FlappyFlyArtPack.zip
画像をプロジェクトに追加
ダウンロードして解凍したフォルダを、プロジェクトに追加します。
ドラッグアンドドロップで追加できます。
背景画像を設置
追加した画像から、背景画像（background.png）を設置します。
左側の追加したフォルダを開き、ドラッグアンドドロップで画面上に画像を設置します。
位置の調整
設置した画像を選択すると、右側のバーに位置などの設定画面が出ます。
そこのPosition, AnchorPointを変更します。
まずPositonは「Top-left」で、Xが「0.0」Yも「0.0」に、
Anchor Pointは、Xを「0.0」に、Yを「1.0」に設定します。
これで位置を整列できました。
Top-Left、つまり左上を基準として設定したわけですが、こうすることで、iPhone4でもiPhone5でも対応できるようになります。
iPhone4での見え方を確認したい場合はこちらの設定から確認できます。
地面を設置
背景画像と同様に、地面も設置します。
ground.pngをドラッグアンドドロップします。
その後、先程と同様に位置指定をします。
PositionはBottom-leftでXが0.0、Yが12.0。
Anchor pointはXが0.00、Yが0.50。
同様に、雲も設置してみます。
PositionはTop-leftでXが187.0、Yが134.0。
とりあえず保存
というわけで今日はここまで。
次回