Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

24,878 views

Published on

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

Published in: Technology
  • Be the first to comment

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

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

×