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(JS) ハンズオン #08「様々な画像描画方法」

892 views

Published on

2016/5/27 イベント&コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #08 「様々な画像描画方法」の資料です。Cocos2d-xで画像を表示するためのSpriteクラス, Texture Atlas, Sprite Polygon, 非同期読み込みなど様々な描画方法を紹介しました。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」

  1. 1. Cocos2d-x(JS) ハンズオン #8 様々な画像描画方法 株式会社TKS2 清水友晶
  2. 2. 清水 友晶  株式会社TKS2 アプリ開発コンサル Cocos2d-xサポート スマホアプリ開発 TECH.C.非常勤講師  プライベートでも Cocos2d-xに関するゲーム開発 講演活動 執筆活動  マイブーム: ゲームエンジン調査  チラ裏開発メモ: http://tks2.net/memo  SlideShare: http://www.slideshare.net/doraemonsss  Facebook: http://www.facebook.com/doraemonsss
  3. 3. http://line.me/S/sticker/1085672
  4. 4. 画像表示  画像描画クラス  テクスチャアトラス  Scale9Spriteクラス  Sprite Porygonクラス  非同期読み込み
  5. 5. 画像のダウンロード  今回使用する画像をダウンロードしてください http://tks2.net/techc/images2.zip
  6. 6. resource.js var res = { HelloWorld_png : "res/HelloWorld.png", Apple_png : "res/apple.png", Bug_png : "res/bug.png", Frame_png : "res/frame.png", Apple_And_Bug_plist : "res/AppleAndBug.plist" };
  7. 7. 画像描画クラス
  8. 8. デバッグ情報
  9. 9. デバッグ情報  GL verts … 頂点数  GL calls … ドローコール  FPS / フレーム時間
  10. 10. 画像描画 this._super(); //画面サイズ取得 var size = cc.winSize; //リンゴの表示 var apple = new cc.Sprite(res.Apple_png); apple.setPosition(size.width / 3, size.height / 2); this.addChild(apple); //虫の表示 var bug = new cc.Sprite(res.Bug_png); bug.setPosition(size.width * 2 / 3, size.height / 2); this.addChild(bug); return true;
  11. 11. Sprite描画
  12. 12. 画像描画  GL verts: 12  GL calls: 2  画像を表示することで、頂点 数・コール数が増える
  13. 13. 画像描画
  14. 14. 同一画像による複数スプライト this._super(); //画面サイズ取得 var size = cc.winSize; //50個のリンゴを表示 for (var i = 0; i < 50; i++) { var x = cc.random0To1() * 960; var y = cc.random0To1() * 640; var apple = new cc.Sprite(res.Apple_png); apple.setPosition(x, y); this.addChild(apple); } return true;
  15. 15. 複数スプライト描画
  16. 16. 複数スプライト描画  GL calls: 1  異なる画像を表示するとコール数が増えるが、 同一画像の場合は、コール数は増えない  Cocos2d-x v3.xよりバッチノードが自動で適 用されるようになったため
  17. 17. ディズニーツムツム https://www.youtube.com/watch?v=e9ei52IOs9Y
  18. 18. テクスチャアトラス
  19. 19. テクスチャに使用する画像  画像を画面に表示するとき、画像はビデオメモリ上 (VRAM)に展開される  GPUメモリ上に展開される画像のサイズ  2のべき乗 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, …  例: 画像 960px * 640px  VRAM上 1024px * 1024px
  20. 20. テクスチャアトラス  複数の画像を1つにまとめたもの  メモリの節約  CPUの処理が高速  Cocos2d-xの場合、設定ファイル(plist)とセット
  21. 21. テクスチャアトラスの注意  同じグループの画像を1つにまとめる  1つの画面で使用するパーツ画像  アニメーションで使用する複数画像  無関係な画像を1つにまとめない  場合によっては、1枚の小さな画像を読み込むだけなのに、 大きなテクスチャアトラスを読み込む必要がある  カードゲームなどの場合、カードをテクスチャアトラス にまとめない  最大サイズは2048px * 2048pxが適切  古い端末の場合、4096pxを読み込めない
  22. 22. テクスチャアトラス生成
  23. 23. テクスチャアトラス生成
  24. 24. テクスチャアトラスによる描画 this._super(); //画面サイズ取得 var size = cc.winSize; //テクスチャアトラスの読み込み cc.spriteFrameCache.addSpriteFrames(res.AppleAndBug_plist); //リンゴの表示 var apple = new cc.Sprite(); apple.initWithSpriteFrameName("apple.png"); apple.setPosition(size.width / 3, size.height / 2); this.addChild(apple); //虫の表示 var bug = new cc.Sprite(); bug.initWithSpriteFrameName("bug.png"); bug.setPosition(size.width * 2 / 3, size.height / 2); this.addChild(bug); return true;
  25. 25. テクスチャアトラスによる描画
  26. 26. 画像描画  GL verts: 12  12  GL calls: 2  1  テクスチャアトラスの利用により、 コール数が減っている
  27. 27. SpriteFrameCacheクラス  テクスチャアトラスを管理する  テクスチャアトラスの読み込み  addSpriteFramesWithFile関数  テクスチャアトラスの解放  removeSpriteFrames関数  removeSpriteFrameWithFile関数  注意  Spriteクラスによるテクスチャの変 更には注意すること
  28. 28. Texture Packer
  29. 29. Scale9Spriteクラス
  30. 30. 画像拡大 this._super(); //画面サイズ取得 var size = cc.winSize; //フレームの表示 var frame = new cc.Sprite(res.Frame_png); frame.setPosition(size.width / 2, size.height / 2); frame.setScale(40, 10); this.addChild(frame); return true;
  31. 31. 画像拡大
  32. 32. Scale9Spriteクラス
  33. 33. Scale9Spriteクラスによる 画像拡大 this._super(); //画面サイズ取得 var size = cc.winSize; //フレームの表示 var frame = new cc.Scale9Sprite(res.Frame_png); frame.setPosition(size.width / 2, size.height / 2); frame.setContentSize(size.width / 2, size.height / 2); this.addChild(frame); return true;
  34. 34. Scale9Spriteクラスによる 画像拡大
  35. 35. Sprite Polygon
  36. 36. Sprite Polygon  画像をポリゴン化し、描画コストを少なくする
  37. 37. Sprite Polygonクラス this._super(); //画面サイズ取得 var size = cc.winSize; //リンゴの表示 var pinfo1 = jsb.AutoPolygon.generatePolygon(res.Apple_png); var apple = new cc.Sprite(pinfo1); apple.setPosition(size.width / 3, size.height / 2); this.addChild(apple); //虫の表示 var pinfo2 = jsb.AutoPolygon.generatePolygon(res.Bug_png); var bug = new cc.Sprite(pinfo2); bug.setPosition(size.width * 2 / 3, size.height / 2); this.addChild(bug); return true;
  38. 38. Sprite描画
  39. 39. Sprite描画
  40. 40. Texture Packer
  41. 41. Texture Packer
  42. 42. 非同期読み込み
  43. 43. 大型プロジェクトの場合  テクスチャアトラスを用い、テクスチャロード時間の 短縮を行っても、テクスチャアトラスの枚数が多けれ ば、ユーザビリティは悪いまま  しかし画像を読み込み終えなければ、その画像を表示 することはできない  テクスチャアトラスを使ってもなおユーザビリティが 改善されない場合、画像の非同期読み込みの導入が要 求される  ただし非同期読み込みを行う場合、設計の変更が発生 する可能性があるため、事前に非同期読み込みの仕組 みを理解し、設計に影響を与えないような作りとする
  44. 44. ドラゴンスラッシュ https://www.youtube.com/watch?v=mIT7qqYp68s
  45. 45. 非同期読み込みによる描画 this._super(); //画像の読み込み cc.textureCache.addImageAsync("res/apple.png", this.loadingCallback, this); cc.textureCache.addImageAsync("res/bug.png", this.loadingCallback, this); return true;
  46. 46. 非同期読み込みによる描画 loadingCallback:function (texture) { //画面サイズ取得 var size = cc.winSize; //画像の表示 var x = cc.random0To1() * 960; var y = cc.random0To1() * 640; var sprite = new cc.Sprite(texture); sprite.setPosition(x, y); this.addChild(sprite); }
  47. 47. Sprite描画
  48. 48. 作業はここまで
  49. 49. 参考になるサイト  Cocos公式Wiki http://www.cocos2d- x.org/wiki/Cocos2d-JS  Cocos2d-JS APIリファレンス http://cocos2d-x.org/wiki/Reference  Qiita (tag: cocos2d-js) https://qiita.com
  50. 50. おわり  ありがとうございました

×