[3:物理演算] cocos2d-iPhoneとSpriteBuilderでゲームを1週間で作ろう

CCPhysicsNode SpriteBuilder

今回は物理演算を実装します。

cocos2d v3では物理演算がデフォルトで入るようになりました。さらに、SpriteBuilderを使うと、ワンクリックで物理演算を導入できるようになります。これは本当にすごい。

前回まで

  1. ソフトをインストール。背景画像を設置
  2. 主人公をつくる

 

画面全体にCCPhysicsNodeを配置する

まずは画面全体に物理演算ノードを設置します。

MainSceneを開き左カラムの立方体のタブを開きます。

そこからPhysicsNodeという項目を画面下の「CCNode」の上にドラッグアンドドロップします。

CCPhysicsNode SpriteBuilder

続いて、画面全体をカバーするようサイズを変更します。

幅と高さを100%に変更します。

SpriteBuilder

地面に物理演算を導入する

地面のスプライトを選択し、右カラムの物理演算のタブ(四角が跳ねてるアイコン)を選択します。

ここで「Enable physics」を選択することで、対象ノードが物理演算可能となります。

また、ラジオボタンはStaticを選択します。

SpriteBuilder

続いて、groundをCCPhysicsNodeの子ノードにします。

groundをCCPhysicsNodeの上にドラッグアンドドロップすることで、子ノードにすることができます。

SpriteNode

SpriteNode

最後に、CCPhysicsNodeの表示順を変更します。
(すでにCCPhysicsNodeが最下部にある場合は変更する必要はないです。)

SpriteBuilder

主人公を設置する

ついに前回作った主人公を設置します。

Hero.ccbをMainSceneの画面上にドラッグ&ドロップします。
(ドラッグアンドドロップの前に、Hero.ccbを保存しておきましょう。)

SpriteBuilder

つぎに、追加した主人公のノードをCCPhysicsNodeの子ノードにします。

SpriteBuilder

続いて、対象物の物理演算にチェックを入れます。
地面とは異なり、Dynamicで良いです。

SpriteBuilder

最後に茂みを設置しましょう。
まずドラッグアンドドロップをして。

SpriteBuilder

続いて、位置を修正します。(左下、160,106)

さらに、表示順を変更します。
CCPhysicsNodeの上になるように。

SpriteBuilder

それではビルドしてみましょう!
左上のPublishボタンを押します。

SpriteBuilder Publish

SpriteBuilder publish

保存が済んでない場合は上記の表示が出てくるので、Save Allを押します。

今度はXcodeからビルドしてみましょう。
SpriteBuilderのプロジェクトが入っているフォルダを開き、プロジェクトファイルを開きます。

Xcode Project SpriteBuilder

ビルドします。

Xcode

シュミレーターではこんなかんじで表示されるはず。

Flappy Fly

というわけで今回はここまで!

次回

[4:動かす] cocos2d-iPhoneとSpriteBuilderでゲームを1週間で作ろうす

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

SpriteBuilder

前回までで背景の設置が終わりました。今回は主人公を設置します。

SpriteBuilderを使えばアニメーションを簡単に作れます。普通の開発ではコードを書いてコマ送りを実装ますが、SpriteBuilderでは、動作を見ながらアニメーションを作ることができます。

前回まで

  1. ソフトをインストール。背景画像を設置

 

主人公用のファイルを新規作成

スクリーンショット 2014-06-03 23.03.16

Heroという名前で、「Sprite」を選択してファイルを作成します。

SpriteBuilder

作成したファイルに画像を設定します。

  1. 作成したHero.ccbを選択
  2. CCSpriteを選択
  3. Sprite frameからfly1.pngを選択

SpriteBuilder

続いて、時間間隔を設定します。

Set Timeline Duration

10秒を1秒に変更します。

SpriteBuilder

主人公のアニメーションを作成

アニメーション作成のため、Sprite Frameを追加します。

Sprite Frame

タイムラインを動かしながら、SpriteFrameを6つ追加します。

SpriteFrame

つぎに、Sprite Frameを一つおきにfly2.pngに変更し、羽がパタパタするアニメーションを作成します。

Sprite Frame

最後に動画がループするように設定します。

SpriteBuilder

これで主人公のアニメーションが作成できました。

Sprite Builder アニメーション

 

次回

[3:物理演算] cocos2d-iPhoneとSpriteBuilderでゲームを1週間で作ろう

[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週間で作ろう

cocos2d-iPhone 2.x から3.0への移行 (v2 to v3)

cocos2d-xばかりで、cocos2d-iPhoneについてどこも書いてないので、メモしておきます。

参照元はこちら。
https://www.makegameswith.us/gamernews/359/cocos2d-30-a-brief-transition-guide

  • CCLayerがなくなった
  • タッチイベントの
  • CCMenueがなくなって、CCLayoutを使う

 

おっと、こちらに日本語で詳しく書かれていました。。。

http://the3rddevblog.blog.shinobi.jp/cocos2d%E3%83%A1%E3%83%A2/cocos2d%20v3%20-rc-%20%E3%82%92%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%81%8B%E3%82%89%E8%A6%B3%E5%AF%9F

【Cocos2d】Unknown register name ‘q0’ in asm というエラーが出た時

実機でテストしようとしたら以下の様なエラーが出てしまいました。

Unknown register name ‘q0’ in asm

そんなときの対処法。

__ARM_NEON__

↑このように書いてある箇所を↓のように変更します。

__ARM_NEON_7

mat4.cとneon_matrix_impl.cで1箇所ずつ書かれている箇所があるので、両方修正します。

参考元 : http://stackoverflow.com/questions/21510187/unknown-register-name-q0-in-asm

ghostlyIcons.は消して良いのか

GrandPerspective Mac

 

結論。消して良い。

以下を参考にしました。
http://stackoverflow.com/questions/16938659/can-i-safely-delete-the-contents-of-the-library-application-support-iphone-sim

現在、開発機にMacBookAirの128GBストレージのものを使っているのですが、容量的にカツカツになってきたのでいらないファイルの整理を行いました。

その中で、iPhoneシュミレーターのiOS6.1の一時ファイルと思われるディレクトリ「~/Library/Application Support/iPhone Simulator/6.1/tmp」の中身が1GB以上もファイルを持っており、容量を圧迫していることがわかりました。

ghostlyIcons.というのは見たことのないファイルなのでよくわからなかったのですが、リンク先によれば、tmpフォルダにあるものは基本的には削除して良いものだということです。

また、ghostlyIcons.自体がバグにより生成されたものなのではないかということも書いてありました。

というわけでghostlyIcons.のファイルを全部削除。
そもそもiOS6.1のシュミレーターは最近ほとんど使っていないので、なにか起きてもそれほど影響はないのですけどね。

GrandPerspective Macちなみにどのファイルやディレクトリが容量が大きいか、というのは、GrandPerspectiveというフリーソフトを使いました。

どのファイルがどれだけ容量を食っているのかを可視化してくれます。

Xcode5.1にしたら、cocos2dでエラーが出た

Xcode5.1にアップデートしたら、cocos2dで以下の様なエラーが出ました。

Redefinition of ‘__ccContentScaleFactor’ with a different type: ‘CGFloat’ (aka ‘double’) vs ‘float’

というわけでググったらこちらのページに解決法が載っていました。

http://www.cocos2d-iphone.org/forums/topic/redefinition-error-__cccontentscalefactor/

CCDirectorIOS.hの109行目です。

[objc]
// optimization. Should only be used to read it. Never to write it.
//extern CGFloat __ccContentScaleFactor; // CGFloatをfloatに修正
extern float __ccContentScaleFactor;
[/objc]

↑こんなかんじ。

同様に実装の方も修正。
CCDirectorIOS.mの66行目です。

[objc]
// CGFloat __ccContentScaleFactor = 1; // CGFloatをfloatに修正
float __ccContentScaleFactor = 1;
[/objc]

とりあえず動くようになりました。

デバッグ用にスロー再生する cocos2d

デバッグ用にスロー再生したいとき。

cocos2dのテンプレートで作成したプロジェクトのAppDelegate.mのapplication:didFinishLaunchingWithOptions:の最後の方に以下の一文を入れます。(return YES;の前。)

[objc]
– (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
//【中略】

// 時間を5倍にする
[director_ scheduler].timeScale = 0.2;

return YES;
}
[/objc]

これで通常の5分の1のスロースピードで動きます。
timeScaleを2とかにすると、2倍の早さで動きます。

スプライトを、回転軸を指定して回転させる cocs2d

Cocos2d。先日の「Nodeを回転させる」の発展版。

デフォルトだとスプライトは中心に回転軸があるのですが、
これをずらしたい時の方法。

[objc]
// -45度まで回転させるCCRotateをつくる
CCRotate *rotateToMinus45 = [CCRotateTo actionWithDuration:0.2 angle:-45];

// スプライトの回転軸(中心点)を変更。ccp(0,0)だと左下、ccp(1,1)だと右上
hogeSprite.anchorPoint = ccp(0, 0);

// スプライトを回転させる
[hogeSprite runAction:rotateToMinus45];
[/objc]

中心軸(anchorPoint)を変更すると、回転軸も変わります。
中心軸は0~1で指定します。デフォルトは中心なのでccp(0.5,0.5)ですね。
中心軸を変更すると、それにともなって描画位置も変更されるので、座標の調整が必要です。

オナ禁カウンターが累計一万ダウンロードを達成しました

おかげさまで、オナ禁カウンターが全世界累計1万ダウンロードを達成いたしました。

ダウンロードをしてくださいました皆様、ありがとうございます。
引き続き、改良を進めてまいります。

これからも「オナ禁カウンター」をよろしくお願い致します。

Social media & sharing icons powered by UltimatelySocial