Successfully reported this slideshow.

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

7

Share

Loading in …3
×
1 of 25
1 of 25

More Related Content

More from Tomoaki Shimizu

Related Books

Free with a 14 day trial from Scribd

See all

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. おわり —  次回、ツールを紹介しつつゲームを作ります!! —  ありがとうございました。

×