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

株式会社TKS2 清水友晶

清水 友晶 �  株式会社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

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

今日やること �  100匹のネコ (いろんなネコの表示)

�  Texture Atlas �  非同期読込み

�  1000匹のネコ (同じネコの表示) �  CCSpriteBatchNode

�  パーティクル

�  ラベルの画像化

準備 �  画像をダウンロード http://tks2.net/cats.zip

�  プロジェクトの作成

�  Resourcesディレクトリに画像を追加

�  Xcode上でResourcesに画像を読込む

キャラクターの表示 �  CCSpriteクラス CCSprite* pSprite = CCSprite::create(”cat00.png"); pSprite->setPosition(ccp(200, 100)); this->addChild(pSprite);

�  簡単に表示できるけど、実は処理が重い

�  ちょっとした工夫でパフォーマンスアップ

100匹のネコ (1)CCSprite �  CCSpriteを利用していろんなネコ100匹を描画

�  ソース https://gist.github.com/4523769

�  HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。

100匹のネコ (1)CCSprite

�  iPadで実行するとinit関数終了までに1.77秒

�  Android端末でSDカードから読込む場合は更に…

100匹のネコ (2)Texture Atlas �  Texture Atlasを利用していろんなネコ100匹を描画

�  ソース https://gist.github.com/4523786

�  HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。

�  Texture Atlasの作成 �  Zwoptex (¥1,381 お試し可) �  TexturePacker (¥2,758)

100匹のネコ (2)Texture Atlas

�  iPadで実行するとinit関数終了までに1.11秒

�  Texture Atlasを利用することで読込み～表示の速度が1.6倍

100匹のネコ (3)非同期読込 �  非同期読込を利用していろんなネコ100匹を描画

�  ソース https://gist.github.com/4523792

�  HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。

�  より実用的な方法は、キャラクタ用のクラスを作成しそのインスタンスから非同期でテクスチャを読込むと良い

100匹のネコ (3)非同期読込

�  iPadで実行するとinit関数終了までに0.58秒 �  全画像の表示処理終了まで2.37秒 �  キャラクタが多少遅れて表示されても良い場合はかなり有効

100匹のネコ (4)TA非同期読込 �  Texture Atlas画像を非同期読込でいろんなネコ100匹を描画

�  ソース https://gist.github.com/4524231

�  HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。

�  このソースコードはテスト用です。コピペは危険ですので、画像読込みのクラスを用意する等、正しい方法で使用して下さい。

100匹のネコ (4)TA非同期読込

�  iPadで実行するとinit関数終了までに0.21秒 �  全画像の表示処理終了まで1.37秒 �  少しでも早く画面遷移を行いたいときは有効

1000匹のネコ (1)CCSprite �  CCSpriteを利用して同じネコ1000匹を描画

�  ソース https://gist.github.com/4524293

�  HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。

1000匹のネコ (1)CCSprite

�  iPadで実行するとinit関数終了までに0.63秒

�  同じ画像なのでいろんなネコ100匹よりは早いけど…

1000匹のネコ (2)CCSpriteBatchNode

�  CCSpriteを利用して同じネコ1000匹を描画

�  ソース https://gist.github.com/4524325

�  HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。

1000匹のネコ (2)CCSpriteBatchNode

�  iPadで実行するとinit関数終了までに0.06秒

�  CCSpriteBatchNode利用で読込み～表示の速度が10倍

パーティクル �  パーティクルってむずかしそう…

�  そうなんです。

�  設定がいっぱい必要なので むずかしいです。

�  Cocos2d-xのサンプルでも 右のような感じです…

パーティクル �  でもGUIツールのおかげでかんたんなんです。

�  ParticleDesigner (¥659)

�  たった3行でパーティクルを表示できます。

�  ソース https://gist.github.com/4524527

�  HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。

パーティクル

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

ラベルの表示 �  CCLabelTTFクラス CCLabelTTF* label = CCLabelTTF::create("Hello World", "", 96); label->setPosition(ccp(200, 100)); this->addChild(label);

�  フォントがシンプルすぎる…

�  フォントサイズをOS・機種毎に変更する必要がある

ラベルの画像化 �  CCLabelBMFontクラス

�  ソース https://gist.github.com/4524796

�  GlyphDesigner (¥2,472)

�  色変更・グラデーション・シャドウ・縁取り等ができる

ラベルの画像化

�  OS・機種が異なっても表示は同じ

�  日本語も可能だが、都度文字の追加が必要

おわり �  次回、ツールを紹介しつつゲームを作ります!!

�  ありがとうございました。