[1: インストール] cocos2d-iPhoneとSpriteBuilderでゲームを1週間で作ろう

Cocos2d-iPhone 3.0と SpriteBuilderでFlappyBirdっぽいゲームを作ります。

というか、こちらの記事の和訳+補足になります。

https://www.makegameswith.us/gamernews/369/build-your-own-flappy-bird-with-spritebuilder-and

FlappyFly 8

↑こういったアプリが作れます。

まずはインストール

まず以下の2つをDLし、インストールしましょう。

  • Cocos2d 3.0
  • SpriteBulider

両方共インストールが完了したら早速始めちゃいましょう。
参照元は「チュートリアルはやっておいてね」と書いていたのですが、無視します。

プロジェクトを作ろう

SpriteBuliderを起動して、プロジェクトを作ります。

新しいプロジェクトを作るFile > New > Project と選択して、

プロジェクトをデスクトップに保存「FlappyFly」という名前をつけて、デスクトップに保存。
(保存先はどこでも良いです。)

起動画面するとプロジェクトが作成されて、最初の画面が表示されます。

デフォルトの画面を消す

SpriteBuilderという文字と、その後ろの青い背景を消します。

スクリーンショット 2014-05-25 19.39.50

スクリーンショット 2014-05-25 19.40.05

これで何もなくなりました。
ちなみにオブジェクトを選択してdeleteボタン押しても消せます。

スクリーンショット 2014-05-25 19.42.44

画面を縦にする

横画面だと具合がわるいので、縦にします。

スクリーンショット 2014-05-25 19.45.53

File > ProjectSettings… を選択し、
Default scaling from: を 2x(iPhonehd)に、
Orientation: を Portraitにして
「Done」を押します。

スクリーンショット 2014-05-25 19.48.23

これで画面が縦になりました。

続いてはSpriteBuilderで背景画像を設置します。

画像をダウンロードする

こちらのページから画像をダウンロードします

https://s3.amazonaws.com/mgwu-misc/FlappyFlyArtPack.zip

スクリーンショット 2014-05-31 19.02.39
画像一覧

画像をプロジェクトに追加

ダウンロードして解凍したフォルダを、プロジェクトに追加します。
ドラッグアンドドロップで追加できます。

スクリーンショット 2014-05-31 19.03.31

背景画像を設置

追加した画像から、背景画像(background.png)を設置します。
左側の追加したフォルダを開き、ドラッグアンドドロップで画面上に画像を設置します。

スクリーンショット 2014-05-31 19.07.26

スクリーンショット 2014-05-31 19.09.35

位置の調整

設置した画像を選択すると、右側のバーに位置などの設定画面が出ます。
そこのPosition, AnchorPointを変更します。

スクリーンショット 2014-05-31 19.12.28

まずPositonは「Top-left」で、Xが「0.0」Yも「0.0」に、
Anchor Pointは、Xを「0.0」に、Yを「1.0」に設定します。

これで位置を整列できました。

Top-Left、つまり左上を基準として設定したわけですが、こうすることで、iPhone4でもiPhone5でも対応できるようになります。

iPhone4での見え方を確認したい場合はこちらの設定から確認できます。

スクリーンショット 2014-05-31 19.23.26

地面を設置

背景画像と同様に、地面も設置します。
ground.pngをドラッグアンドドロップします。

スクリーンショット 2014-05-31 20.46.13

その後、先程と同様に位置指定をします。

スクリーンショット 2014-05-31 20.50.24

PositionはBottom-leftでXが0.0、Yが12.0。
Anchor pointはXが0.00、Yが0.50。

同様に、雲も設置してみます。

スクリーンショット 2014-05-31 23.57.34

PositionはTop-leftでXが187.0、Yが134.0。

とりあえず保存

というわけで今日はここまで。

スクリーンショット 2014-05-31 23.59.50

次回

[2: 主人公] cocos2d-iPhoneとSpriteBuilderでゲームを1週間で作ろう

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です