Cocos2d-xで画像周りを自由自在に表示してみよう
-
Upload
tomoaki-shimizu -
Category
Technology
-
view
21.582 -
download
3
description
Transcript of Cocos2d-xで画像周りを自由自在に表示してみよう
![Page 1: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/1.jpg)
Cocos2d-xで 画像周りを自由自在に表示してみよう
株式会社TKS2 清水友晶
![Page 2: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/2.jpg)
清水 友晶 � 株式会社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
![Page 3: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/3.jpg)
おやこでスマほん � 株式会社スマートエデュケーション
![Page 4: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/4.jpg)
今日やること � 100匹のネコ (いろんなネコの表示)
� Texture Atlas � 非同期読込み
� 1000匹のネコ (同じネコの表示) � CCSpriteBatchNode
� パーティクル
� ラベルの画像化
![Page 5: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/5.jpg)
準備 � 画像をダウンロード http://tks2.net/cats.zip
� プロジェクトの作成
� Resourcesディレクトリに画像を追加
� Xcode上でResourcesに画像を読込む
![Page 6: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/6.jpg)
キャラクターの表示 � CCSpriteクラス CCSprite* pSprite = CCSprite::create(”cat00.png"); pSprite->setPosition(ccp(200, 100)); this->addChild(pSprite);
� 簡単に表示できるけど、実は処理が重い
� ちょっとした工夫でパフォーマンスアップ
![Page 7: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/7.jpg)
100匹のネコ (1)CCSprite � CCSpriteを利用していろんなネコ100匹を描画
� ソース https://gist.github.com/4523769
� HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。
![Page 8: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/8.jpg)
100匹のネコ (1)CCSprite
� iPadで実行するとinit関数終了までに1.77秒
� Android端末でSDカードから読込む場合は更に…
![Page 9: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/9.jpg)
100匹のネコ (2)Texture Atlas � Texture Atlasを利用していろんなネコ100匹を描画
� ソース https://gist.github.com/4523786
� HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。
� Texture Atlasの作成 � Zwoptex (¥1,381 お試し可) � TexturePacker (¥2,758)
![Page 10: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/10.jpg)
100匹のネコ (2)Texture Atlas
� iPadで実行するとinit関数終了までに1.11秒
� Texture Atlasを利用することで読込み~表示の速度が1.6倍
![Page 11: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/11.jpg)
100匹のネコ (3)非同期読込 � 非同期読込を利用していろんなネコ100匹を描画
� ソース https://gist.github.com/4523792
� HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。
� より実用的な方法は、キャラクタ用のクラスを作成しそのインスタンスから非同期でテクスチャを読込むと良い
![Page 12: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/12.jpg)
100匹のネコ (3)非同期読込
� iPadで実行するとinit関数終了までに0.58秒 � 全画像の表示処理終了まで2.37秒 � キャラクタが多少遅れて表示されても良い場合はかなり有効
![Page 13: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/13.jpg)
100匹のネコ (4)TA非同期読込 � Texture Atlas画像を非同期読込でいろんなネコ100匹を描画
� ソース https://gist.github.com/4524231
� HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。
� このソースコードはテスト用です。コピペは危険ですので、画像読込みのクラスを用意する等、正しい方法で使用して下さい。
![Page 14: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/14.jpg)
100匹のネコ (4)TA非同期読込
� iPadで実行するとinit関数終了までに0.21秒 � 全画像の表示処理終了まで1.37秒 � 少しでも早く画面遷移を行いたいときは有効
![Page 15: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/15.jpg)
1000匹のネコ (1)CCSprite � CCSpriteを利用して同じネコ1000匹を描画
� ソース https://gist.github.com/4524293
� HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。
![Page 16: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/16.jpg)
1000匹のネコ (1)CCSprite
� iPadで実行するとinit関数終了までに0.63秒
� 同じ画像なのでいろんなネコ100匹よりは早いけど…
![Page 17: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/17.jpg)
1000匹のネコ (2)CCSpriteBatchNode
� CCSpriteを利用して同じネコ1000匹を描画
� ソース https://gist.github.com/4524325
� HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。
![Page 18: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/18.jpg)
1000匹のネコ (2)CCSpriteBatchNode
� iPadで実行するとinit関数終了までに0.06秒
� CCSpriteBatchNode利用で読込み~表示の速度が10倍
![Page 19: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/19.jpg)
パーティクル � パーティクルってむずかしそう…
� そうなんです。
� 設定がいっぱい必要なので むずかしいです。
� Cocos2d-xのサンプルでも 右のような感じです…
![Page 20: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/20.jpg)
パーティクル � でもGUIツールのおかげでかんたんなんです。
� ParticleDesigner (¥659)
� たった3行でパーティクルを表示できます。
� ソース https://gist.github.com/4524527
� HelloWorldScene.h HelloWorldScene.cpp を編集して下さい。
![Page 21: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/21.jpg)
パーティクル
� 非常に簡単に利用できるが、負荷が掛かり過ぎる場合があるので、パーティクルの出力には注意!
![Page 22: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/22.jpg)
ラベルの表示 � CCLabelTTFクラス CCLabelTTF* label = CCLabelTTF::create("Hello World", "", 96); label->setPosition(ccp(200, 100)); this->addChild(label);
� フォントがシンプルすぎる…
� フォントサイズをOS・機種毎に変更する必要がある
![Page 23: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/23.jpg)
ラベルの画像化 � CCLabelBMFontクラス
� ソース https://gist.github.com/4524796
� GlyphDesigner (¥2,472)
� 色変更・グラデーション・シャドウ・縁取り等ができる
![Page 24: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/24.jpg)
ラベルの画像化
� OS・機種が異なっても表示は同じ
� 日本語も可能だが、都度文字の追加が必要
![Page 25: Cocos2d-xで画像周りを自由自在に表示してみよう](https://reader034.fdocuments.net/reader034/viewer/2022052600/5585ab6fd8b42ae3228b4e98/html5/thumbnails/25.jpg)
おわり � 次回、ツールを紹介しつつゲームを作ります!!
� ありがとうございました。