Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Download as PPTX, PDF0 likes1,886 views
2016/5/27 イベント＆コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #08 「様々な画像描画方法」の資料です。Cocos2d-xで画像を表示するためのSpriteクラス, Texture Atlas, Sprite Polygon, 非同期読み込みなど様々な描画方法を紹介しました。
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
- 2. 清水 友晶 株式会社TKS2 アプリ開発コンサル Cocos2d-xサポート スマホアプリ開発 TECH.C.非常勤講師 プライベートでも Cocos2d-xに関するゲーム開発 講演活動 執筆活動 マイブーム: ゲームエンジン調査 チラ裏開発メモ: http://tks2.net/memo SlideShare: http://www.slideshare.net/doraemonsss Facebook: http://www.facebook.com/doraemonsss
- 5. 画像表示 画像描画クラス テクスチャアトラス Scale9Spriteクラス Sprite Porygonクラス 非同期読み込み
- 7. 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" };
- 8. 画像描画クラス
- 9. デバッグ情報
- 10. デバッグ情報 GL verts … 頂点数 GL calls … ドローコール FPS / フレーム時間
- 11. 画像描画 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;
- 12. Sprite描画
- 13. 画像描画 GL verts: 12 GL calls: 2 画像を表示することで、頂点 数・コール数が増える
- 14. 画像描画
- 15. 同一画像による複数スプライト 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;
- 16. 複数スプライト描画
- 17. 複数スプライト描画 GL calls: 1 異なる画像を表示するとコール数が増えるが、 同一画像の場合は、コール数は増えない Cocos2d-x v3.xよりバッチノードが自動で適 用されるようになったため
- 19. テクスチャアトラス
- 20. テクスチャに使用する画像 画像を画面に表示するとき、画像はビデオメモリ上 (VRAM)に展開される GPUメモリ上に展開される画像のサイズ 2のべき乗 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, … 例: 画像 960px * 640px VRAM上 1024px * 1024px
- 21. テクスチャアトラス 複数の画像を1つにまとめたもの メモリの節約 CPUの処理が高速 Cocos2d-xの場合、設定ファイル(plist)とセット
- 22. テクスチャアトラスの注意 同じグループの画像を1つにまとめる 1つの画面で使用するパーツ画像 アニメーションで使用する複数画像 無関係な画像を1つにまとめない 場合によっては、1枚の小さな画像を読み込むだけなのに、 大きなテクスチャアトラスを読み込む必要がある カードゲームなどの場合、カードをテクスチャアトラス にまとめない 最大サイズは2048px * 2048pxが適切 古い端末の場合、4096pxを読み込めない
- 23. テクスチャアトラス生成
- 24. テクスチャアトラス生成
- 25. テクスチャアトラスによる描画 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;
- 26. テクスチャアトラスによる描画
- 27. 画像描画 GL verts: 12 12 GL calls: 2 1 テクスチャアトラスの利用により、 コール数が減っている
- 28. SpriteFrameCacheクラス テクスチャアトラスを管理する テクスチャアトラスの読み込み addSpriteFramesWithFile関数 テクスチャアトラスの解放 removeSpriteFrames関数 removeSpriteFrameWithFile関数 注意 Spriteクラスによるテクスチャの変 更には注意すること
- 29. Texture Packer
- 30. Scale9Spriteクラス
- 31. 画像拡大 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;
- 32. 画像拡大
- 33. Scale9Spriteクラス
- 34. 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;
- 36. Sprite Polygon
- 38. 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;
- 39. Sprite描画
- 40. Sprite描画
- 41. Texture Packer
- 42. Texture Packer
- 43. 非同期読み込み
- 44. 大型プロジェクトの場合 テクスチャアトラスを用い、テクスチャロード時間の 短縮を行っても、テクスチャアトラスの枚数が多けれ ば、ユーザビリティは悪いまま しかし画像を読み込み終えなければ、その画像を表示 することはできない テクスチャアトラスを使ってもなおユーザビリティが 改善されない場合、画像の非同期読み込みの導入が要 求される ただし非同期読み込みを行う場合、設計の変更が発生 する可能性があるため、事前に非同期読み込みの仕組 みを理解し、設計に影響を与えないような作りとする
- 47. 非同期読み込みによる描画 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); }
- 48. Sprite描画
- 49. 作業はここまで
- 50. 参考になるサイト 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