Cocos2d-xで画像周りを自由自在に表示してみよう

1. Cocos2d-xで
画像周りを自由自在に
表示してみよう
株式会社TKS2 清水友晶

2. 清水 友晶
— 株式会社TKS2
スマートフォンアプリ開発
(iOS, Android, Windows Phone 8)
Webコンテンツ開発
— Cocos2d-xへの開発参加
Cocos2d-xを利用したアプリ開発
講演活動
執筆活動
— Twitter: tks2shimizu
— Blog: http://tks2.net/memo
— SlideShare: http://www.slideshare.net/doraemonsss
— Facebook: http://www.facebook.com/doraemonsss

3. おやこでスマほん
— 株式会社スマートエデュケーション

4. 今日やること
— 100匹のネコ (いろんなネコの表示)
— Texture Atlas
— 非同期読込み
— 1000匹のネコ (同じネコの表示)
— CCSpriteBatchNode
— パーティクル
— ラベルの画像化

5. 準備
— 画像をダウンロード
http://tks2.net/cats.zip
— プロジェクトの作成
— Resourcesディレクトリに画像を追加
— Xcode上でResourcesに画像を読込む

6. キャラクターの表示
— CCSpriteクラス
CCSprite* pSprite =
CCSprite::create( cat00.png");
pSprite->setPosition(ccp(200, 100));
this->addChild(pSprite);
— 簡単に表示できるけど、実は処理が重い
— ちょっとした工夫でパフォーマンスアップ

7. 100匹のネコ (1)CCSprite
— CCSpriteを利用していろんなネコ100匹を描画
— ソース
https://gist.github.com/4523769
— HelloWorldScene.h
HelloWorldScene.cpp
を編集して下さい。

8. 100匹のネコ (1)CCSprite
— iPadで実行するとinit関数終了までに1.77秒
— Android端末でSDカードから読込む場合は更に…

9. 100匹のネコ (2)Texture Atlas
— Texture Atlasを利用していろんなネコ100匹を描画
— ソース
https://gist.github.com/4523786
— HelloWorldScene.h
HelloWorldScene.cpp
を編集して下さい。
— Texture Atlasの作成
— Zwoptex (¥1,381 お試し可)
— TexturePacker (¥2,758)

10. 100匹のネコ (2)Texture Atlas
— iPadで実行するとinit関数終了までに1.11秒
— Texture Atlasを利用することで読込み∼表示の速度が1.6倍

11. 100匹のネコ (3)非同期読込
— 非同期読込を利用していろんなネコ100匹を描画
— ソース
https://gist.github.com/4523792
— HelloWorldScene.h
HelloWorldScene.cpp
を編集して下さい。
— より実用的な方法は、キャラクタ用のクラスを作成し
そのインスタンスから非同期でテクスチャを読込むと
良い

12. 100匹のネコ (3)非同期読込
— iPadで実行するとinit関数終了までに0.58秒
— 全画像の表示処理終了まで2.37秒
— キャラクタが多少遅れて表示されても良い場合はかなり有効

13. 100匹のネコ (4)TA非同期読込
— Texture Atlas画像を非同期読込でいろんなネコ100匹
を描画
— ソース
https://gist.github.com/4524231
— HelloWorldScene.h
HelloWorldScene.cpp
を編集して下さい。
— このソースコードはテスト用です。コピペは危険ですの
で、画像読込みのクラスを用意する等、正しい方法で
使用して下さい。

14. 100匹のネコ (4)TA非同期読込
— iPadで実行するとinit関数終了までに0.21秒
— 全画像の表示処理終了まで1.37秒
— 少しでも早く画面遷移を行いたいときは有効

15. 1000匹のネコ (1)CCSprite
— CCSpriteを利用して同じネコ1000匹を描画
— ソース
https://gist.github.com/4524293
— HelloWorldScene.h
HelloWorldScene.cpp
を編集して下さい。

16. 1000匹のネコ (1)CCSprite
— iPadで実行するとinit関数終了までに0.63秒
— 同じ画像なのでいろんなネコ100匹よりは早いけど…

17. 1000匹のネコ
(2)CCSpriteBatchNode
— CCSpriteを利用して同じネコ1000匹を描画
— ソース
https://gist.github.com/4524325
— HelloWorldScene.h
HelloWorldScene.cpp
を編集して下さい。

18. 1000匹のネコ
(2)CCSpriteBatchNode
— iPadで実行するとinit関数終了までに0.06秒
— CCSpriteBatchNode利用で読込み∼表示の速度が10倍

19. パーティクル
— パーティクルってむずかしそう…
— そうなんです。
— 設定がいっぱい必要なので
むずかしいです。
— Cocos2d-xのサンプルでも
右のような感じです…

20. パーティクル
— でもGUIツールのおかげでかんたんなんです。
— ParticleDesigner (¥659)
— たった3行でパーティクルを表示できます。
— ソース
https://gist.github.com/4524527
— HelloWorldScene.h
HelloWorldScene.cpp
を編集して下さい。

21. パーティクル
— 非常に簡単に利用できるが、負荷が掛かり過ぎる場合がある
ので、パーティクルの出力には注意!

22. ラベルの表示
— CCLabelTTFクラス
CCLabelTTF* label =
CCLabelTTF::create("Hello World", "", 96);
label->setPosition(ccp(200, 100));
this->addChild(label);
— フォントがシンプルすぎる…
— フォントサイズをOS・機種毎に変更する必要がある

23. ラベルの画像化
— CCLabelBMFontクラス
— ソース
https://gist.github.com/4524796
— GlyphDesigner (¥2,472)
— 色変更・グラデーション・シャドウ・縁取り等ができる

24. ラベルの画像化
— OS・機種が異なっても表示は同じ
— 日本語も可能だが、都度文字の追加が必要

25. おわり
— 次回、ツールを紹介しつつゲームを作ります!!
— ありがとうございました。