Advanced cocos2d

Advanced cocos2d

@Seasons

cocos2d実践テクニックのご紹介

@Seasonscocos2d AUTHOR

Blog：Seasons.NET•cocos2dリリース情報の翻訳•テクニカル情報の翻訳

@cocos2dfan_jp 管理人•cocos2dに関する情報を不定期にポスト

My Profile

Today’s agenda

Today’s agenda

•Introduction cocos2d

Today’s agenda

•Introduction cocos2d•How to learn cocos2d

Today’s agenda

•Introduction cocos2d•How to learn cocos2d•Advanced technics

Introduction cocos2d

What is cocos2d ?

What is cocos2d?

What is cocos2d?

•2Dゲームフレームワーク

What is cocos2d?

•2Dゲームフレームワーク•オープンソース

What is cocos2d?

•2Dゲームフレームワーク•オープンソース•MITライセンス

What is cocos2d?

•2Dゲームフレームワーク•オープンソース•MITライセンス•ハイパフォーマンス

What is cocos2d?

•2Dゲームフレームワーク•オープンソース•MITライセンス•ハイパフォーマンス•物理エンジンなども統合

cocos2dの最新バージョン

0.99.5(stable版)1.00 rc3(開発版)

Xcode4

http://d.hatena.ne.jp/Seasons/20110602/1307037640

1.0.0 rc3(開発版)正式リリースまでは、あと１～２ヶ月？

リリースノート翻訳

公式フォーラムにもcocos2d作者許可を得て掲載中



気になるライセンス

昔は、　やという標記を入れる必要があった。

MIT ライセンス？？？


昔は、　やという標記を入れる必要があった。


cocos2d



cocos2d



cocos2d

ソースコード上の著作権や許諾表示を含めること以外は許諾料も制限も一切ない。

最新！！cocos2d採用タイトル


Birzzle


Birzzle Siege Hero


Birzzle Siege Hero倉木麻衣★ムービーパズル

多くの採用実績!!

多くの採用実績!!

多すぎて掲載しきれません...

パフォーマンス

よく言われること...

cocos2dって遅そう.パフォーマンス大丈夫？CとかC++の方がよくない？

cocos2d News

cocos2d News

最近、cocos2d開発者である

cocos2d News

最近、cocos2d開発者である　　Ricardo Quesada氏が

cocos2d News

最近、cocos2d開発者である　　Ricardo Quesada氏がZynga社にJoinしました。

祝!!

よく言われること...

Zynga社にJoinしたら、cocos2dはZynga社のもの？開発は大丈夫なの？

公式フォーラムにて作者自ら回答

How to learn cocos2d

cocos2d 日本2強

cocos2dで困ったら、まずこの2人に何か聞いてみる

@Seasonscocos2dリリースノートを2年以上追っている。日本語での情報発信に専念。たまに技術ネタ。

@splhack 氏cocos2dに関するstack over flow 回答上位テクニカルなネタ中心に守備範囲が広い！！

書籍を読む！！


•cocos2dのほぼ全機能について解説•洋書プログラミング部門1位•cocos2d ユーザー必読本


•ミニゲームを作成しながら学習•基本的な機能について丁寧に解説•CCActionの図解が嬉しい！！•物理エンジンは、Chipmunkを解



•基本的な機能について丁寧に解説•Box2Dに関する解説が詳しい•VertexHelperの使い方も掲載

•ミニゲームを作成しながら学習•基本的な機能について丁寧に解説•CCActionの図解が嬉しい！！•物理エンジンは、Chipmunkを解


現実はそう甘くない...

洋書、英語嫌いがまだまだ多いこの業界。

洋書の中でもダントツで人気のこの書籍を翻訳して販売できないか？

例によってまたTwitterでつぶやく

日本開発者のみなさん、ついに翻訳本出ます！！


Amazon プログラミング部門１位 !!



企画、監修、付録+15p執筆担当

@Seasons@splhack@hkato193@tomohisa

監修、執筆陣



企画、監修、付録+15p執筆担当

@Seasons@splhack@hkato193@tomohisa

監修、執筆陣

6月24日発売

著者からメッセージ頂きました！！

@gaminghorror氏

はっきり言って超オススメです!!cocos2dのリファレンス本としても実践本としても使えます

付録+30ページ増量で500ページに迫るボリューム！

Advanced Technics

倉木麻衣★ムービーパズル実際に使ったテクニックなどについてご紹介

テクニック一覧


•画面遷移


•画面遷移•画像最適化手法


•画面遷移•画像最適化手法•画像の継ぎ目をなくす


•画面遷移•画像最適化手法•画像の継ぎ目をなくす•サウンド容量を削減する


•画面遷移•画像最適化手法•画像の継ぎ目をなくす•サウンド容量を削減する•座標系の変更(AfterEffects連携)


•画面遷移•画像最適化手法•画像の継ぎ目をなくす•サウンド容量を削減する•座標系の変更(AfterEffects連携)•便利なクラス

画面遷移

画面遷移で考えること

•シーン(CCScene)の再読み込み•音切れ(特にBGM)•シーン間トランジション

例）タイトル画面とオプション画面

CCTitleScene CCOptionScene

ありがちな実装

CCTitleScene

CCOptionScene

[[CCDirector sharedDirector] replaceScene:[CCTransitionCrossFade transitionWithDuration:1.0 scene:[HelloWorldLayer scene]]];

replaceScene

何が起きるか？

replaceScene

CCTitleScene

常駐メモリ


replaceScene

常駐メモリ


replaceScene

CCOptionScene

常駐メモリ


replaceScene

CCOptionScene

常駐メモリ

replaceSceneは、シーンを破棄して、シーンを読み込む

•シーン間の読み込みが毎回発生CCSceneが沢山のメモリをロードする場合は、コストが大きい。処理負荷が心配。

•シーン内の音声が途切れるシーン内で再生しているBGMやSEがシーン再生時に途切れる。

replaceScene

replaceScene

pushScene

replaceSceneとの違い

pushScene

CCTitleScene

常駐メモリ


pushScene

CCTitleScene

CCOptionScene

常駐メモリ


pushScene

CCTitleScene

CCOptionScene

常駐メモリpushScene(popScene)は、現在のシーンの上にシーンを読み込む。


CCTitleScene

CCOptionScene


popScene


CCTitleScene


popScene

pushScene

•シーン間の再読み込みを回避前のシーンを再読み込みすることが無いため戻る時間が大幅に短縮。

•シーン内の音声が途切れない前のシーンは実質バックグラウンドで動いているため、音声は途切れない。

Solution

CCTransitionScene

シーン間の切り替えを綺麗に見せるためによく使いますよね？

CCTransitionScene

致命的な問題点

Scene A

Scene B


Scene A

Scene BpushScene


Scene A

Scene BpushScene popScene


Scene A


CCTransitionScene


Scene A


CCTransitionScene

popSceneは、トランジションに対応していない。

popSceneWithTransition

•トランジション版を使うpopSceneにトランジションパッチを当てたバージョンを使いましょう。

Solution

-(void) popSceneWithTransition: (Class)transitionClass duration:(ccTime)t{! NSAssert( runningScene_ != nil, @"A running Scene is needed"); ! [scenesStack_ removeLastObject];! NSUInteger c = [scenesStack_ count]; ! if( c == 0 ) {! ! [self end];! } else {! ! CCScene* scene = [transitionClass transitionWithDuration:t scene:[scenesStack_ objectAtIndex:c-1]];! ! [scenesStack_ replaceObjectAtIndex:c-1 withObject:scene];! ! nextScene_ = scene;! }}

http://www.cocos2d-iphone.org/forum/topic/1076付録でも紹介

http://www.cocos2d-iphone.org/forum/topic/1076

http://www.cocos2d-iphone.org/forum/topic/1076

画像最適化手法

こんなことありませんか？

•20MBに収めたい•画像の処理負荷が高い•読み込み速度が気になる

TexturePackerhttp://www.texturepacker.com/

http://www.texturepacker.com/

http://www.texturepacker.com/

どんなツールか？


•テクスチャを自動的に配置


•テクスチャを自動的に配置•減色テクスチャ生成


•テクスチャを自動的に配置•減色テクスチャ生成•圧縮テクスチャ生成


•テクスチャを自動的に配置•減色テクスチャ生成•圧縮テクスチャ生成•テクスチャ最適化

もっと詳しく

付録：A.3.1 TexturePacker•インストール方法•Free,Proエディションの違いについて•よく使う機能についての日本語マニュアル

20MBに収めるテクニック


1.画像を減色する


1.画像を減色する2.テクスチャフォーマット


1.画像を減色する2.テクスチャフォーマット3.圧縮テクスチャ

1.画像を減色する

RGBA8888BGRA8888RGB4444RGBA5555RGBA5551RGB565PVRTC4PVRTC2Alpha

豊富なフォーマット

Solution

減色用フォーマット

RGBA8888：デフォルト画質を落としたくない時。フルカラー画像に向いている。ファイルサイズは最も大きくなる。

RGBA4444,5555画質多少落としても問題ない時に利用。RGBA5555は、PVR形式で出力できないので注意。マッハバンドが出やすい。

RGBA5551,RGB565α値=透過色扱いなら、RGBA5551も検討できる。α値が全く含まれない場合は、RGB565でさらにファイルサイズ減。

2.テクスチャを圧縮する

PNGPVRGZip & PVRZLib & PVRJPG

豊富なフォーマット

Solution

フォーマットの使い分け

PNG(pngフォーマット)α値も格納出来る一般的な画像フォーマット。可逆圧縮。Bitmapなどと異なりファイルサイズは小さくなる。cocos2dでは単体画像でよく使われるフォーマット。

CCSprite *sprite = nil;[CCSprite spriteWithFile:@"Icon.png"];

PVR(PowerVR テクスチャフォーマット)PVR形式は、最終的にVRAMに配置されるフォーマット形式であるため、テクスチャの読み込みが激的に速くなる。ただし、ファイルサイズは比較的大きくなる。＊通常テクスチャは、画像ファイルを読み込み、OpenGL用のVRAM転送関数で転送する際、VRAMのフォーマットに変換する。これらがオーバーヘッドとなるため、転送時間が別途かかってしまう。

Not PVR

PVR

read transfer

PVR(PowerVR テクスチャフォーマット)PVR形式は、最終的にVRAMに配置されるフォーマット形式であるため、テクスチャの読み込みが激的に速くなる。ただし、ファイルサイズは比較的大きくなる。＊通常テクスチャは、画像ファイルを読み込み、OpenGL用のVRAM転送関数で転送する際、VRAMのフォーマットに変換する。これらがオーバーヘッドとなるため、転送時間が別途かかってしまう。

Not PVR

PVR

read transfer

x5～10 speed up!!

GZip compressed PVR(.pvr.gz)PVR形式のフォーマットをgzipで圧縮したフォーマット。データの抽出と伸張が同時に出来るためメモリ使用量が少ない。＊通常、圧縮されたファイルは展開後のデータを格納するためのメモリを別途確保する必要があり、データ展開時にメモリ消費が激しくなる傾向がある。これはその問題を解決するフォーマットである。

GZip PVR

new

Zlib compressed PVR(.pvr.ccz)PVR形式のフォーマットをzlibで圧縮したフォーマット。pvr.gzの登場以前に採用されていたフォーマット。＊ファイルの抽出と慎重は同時に行えないため展開後のデータサイズを別途メモリ確保する必要がある。

Zlib PVR

JPG(.jpg)WEBなどでも一般的によく使われるJPEG画像。非可逆圧縮であるため、圧縮率を調整しながら希望の画質とファイルサイズまで調整することができる。

JPEG

3.圧縮テクスチャ

RGBA8888BGRA8888RGB4444RGBA5555RGBA5551RGB565PVRTC4PVRTC2Alpha

PVRTC？

Solution

PVRTC

•PowerVR専用圧縮テクスチャフルカラー系の画像に特化したテクスチャフォーマット。大幅に画像サイズを小さくすることが出来る。但し、画質は犠牲になる。

PVRTC用フォーマット

PVRTC44bit PVRTC圧縮テクスチャ。画質を優先したい場合は、このフォーマットを利用する。フルカラーに向いている。

PVRTC22bit PVRTC圧縮テクスチャ。画質よりもサイズを優先したい場合は、このフォーマットを利用する。但し、画質は相当悪くなってしまう。

画像の継ぎ目をなくす

エフェクト画像の裏話

エフェクト画像の裏話

テクスチャの容量、メモリ使用量を抑えるため以下のような素材を4つ組み合わせて、エフェクト画像を生成している。

画像の継ぎ目？？？


テクスチャを４つ綺麗に並べて表示。しかし、浮動小数点の誤差で間に隙間が出来てしまう。


そこで、画像同士を1ピクセルそれぞれ重ねて表示させることで継ぎ目をなくしている。

継ぎ目が目立つ！？

継ぎ目が目立つ！？

ピクセル同士の重なりの部分がα値を含む場合、浮動小数の誤差により、1ピクセル以上重なることがある。これにより、画像の境界が濃くなってしまう。

TexturePackerを使う

Extrude

Solution


Extrude

画像の境界のピクセルを指定したピクセル数分押し出す機能

Solution


Extrude

Extrude=2


Solution


Extrude

境界が押し出されるため、1ピクセル以上重なっても予期しないピクセル同士の重なりを防ぐことが可能。

Extrude=2


Solution

サウンド容量を削減する

サウンドの再生(SE)

wave format

wave：非圧縮フォーマットSEは、BGMなどとは違い、レスポンス重視であるためこのフォーマットがよく使われる。サイズが大きい。

IMA-ADPCM•16bitのデータを4bit/1サンプルに圧縮

エンコード、デコードも速く、サンプルの音質低下もわずか。

•cocos2d：再生をサポートOpenALは、IMA-ADPCMフォーマットを未サポート。cocos2dでは、ExtendAudio機能を使い、PCMフォーマットにデコードし、データをOpenALに渡すことで再生している。

ima PCM

サウンドの作成

afconvert -f caff -d ima4@22050 “ファイル名”

afconvertツールは、Mac標準でインストール済み。ターミナルを立ち上げて、上記コマンドを打ち込むことでwave -> caff(ima)フォーマットに変換可能。

座標系を変更

cocos2dの座標系(変更前)


(0,0)


(0,0)+X軸


(0,0)+X軸

+Y軸

(0,0)+X軸

+Y軸

cocos2dの座標系(変更後)

ccp()マクロを書き換える

#undef ccp#define ccp(__X__,__Y__) CGPointMake((__X__),(480.0f-(__Y__)))


#define ccop(__X__,__Y__) CGPointMake( (__X__),(__Y__) )

横画面用

縦画面用

オリジナル

Solution

使用方法

#import “cocos2d.h”#import “XXXXX.h”


使用方法

#import “cocos2d.h”#import “XXXXX.h”


cocos2d.hでccpが定義されているので、その下でccp()を再定義する。”ゲーム内だけでccp()の定義を変更”する。

新しいccp()での位置

新しいccp()での位置

sprite.position = ccp(100,100)

AfterEffectsとの連携

AfterEffectsとの連携

左上起点のAfterEffects上の座標がそのまま使えるので、レイアウトツールとして利用。

便利なクラス

CCBumper

•起動時ロゴ表示クラスDefault.pngとは別に起動時ロゴ画面を出したい時に利用。このクラス表示時に画像の読み込みを行ったりする。

Hello World

- (void) applicationDidFinishLaunching:(UIApplication*)application{ /* 省略 */! // Run the intro Scene! [[CCDirector sharedDirector] runWithScene: [CCBumper scene]];}

使用方法

CCBumper scene

HelloWorldLayer scene

- (void) applicationDidFinishLaunching:(UIApplication*)application{ /* 省略 */! // Run the intro Scene! [[CCDirector sharedDirector] runWithScene: [CCBumper scene]];}

使用方法

CCBumper scene

HelloWorldLayer sceneCCBumper内で次に読み込みたいシーンを設定しておく

CCResourceAsyncLoader

•非同期読み込み支援クラス手軽に非同期読み込みを実現するためのクラス。素材を読み込む毎に処理も記述できる＝プログレスバーの実装。


TextureA.png

TextureB.png

TextureC.png




TextureA.png

TextureB.png

TextureC.png

resourceCount = 3




TextureB.png

TextureC.png

resourceCount = 3resourceCount = 2




TextureC.png





TextureC.png

resourceCount = 3





resourceCount = 3





resourceCount = 3


Loading Complete!!

使用方法(起動まで)

CCResourceAsyncLoader *loader = nil; NSArray *resourceNames = [NSArray arrayWithObjects: @"1.tif", @"2.tif", @"3.tif", nil]; CCSendMessages *message = [CCSendMessages actionWithTarget:self]; [[message addMessage] loadComplete];

loader = [CCResourceAsyncLoader loaderWithCount:[resourceNames count]]; loader.tag = kTag_CCBumper_Loader;

for (NSString *path in resourceNames) { [loader addLoadAsyncTexture:path message:message]; } [self addChild:loader];





読み込み後呼び出し






ローダーのセットアップ






ローダーのセットアップ

ローダーの起動

使用方法(読み込み後)

- (void) loadComplete {

CCNode *obj = [self getChildByTag:kTag_CCBumper_Loader]; NSAssert([obj isKindOfClass:[CCResourceAsyncLoader class]], @"Not CCResourceAsyncLoader"); CCResourceAsyncLoader *loader = (CCResourceAsyncLoader *)obj; loader.resourceCount--; // Load Complete!! if( loader.resourceCount == 0 ) { /* 読み込み完了後にしたい処理 */ } /* loader.resourceCountを使ってプログレスバーを更新したり */}




ローダー取り出し





リソースカウント更新&

ユーザー処理





リソースカウント更新&

ユーザー処理

loadCompleteは、メインスレッド呼び出し

Enjoy cocos2d programming

Advanced cocos2d

Technology

Transcript of Advanced cocos2d