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

1. Cocos2d-x(JS) ハンズオン #8
様々な画像描画方法
株式会社TKS2 清水友晶

2. 清水 友晶
 株式会社TKS2
アプリ開発コンサル
Cocos2d-xサポート
スマホアプリ開発
TECH.C.非常勤講師
 プライベートでも
Cocos2d-xに関するゲーム開発
講演活動
執筆活動
 マイブーム: ゲームエンジン調査
 チラ裏開発メモ: http://tks2.net/memo
 SlideShare: http://www.slideshare.net/doraemonsss
 Facebook: http://www.facebook.com/doraemonsss

4. http://line.me/S/sticker/1085672

5. 画像表示
 画像描画クラス
 テクスチャアトラス
 Scale9Spriteクラス
 Sprite Porygonクラス
 非同期読み込み

6. 画像のダウンロード
 今回使用する画像をダウンロードしてください
http://tks2.net/techc/images2.zip

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よりバッチノードが自動で適
用されるようになったため

18. ディズニーツムツム
https://www.youtube.com/watch?v=e9ei52IOs9Y

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;

35. Scale9Spriteクラスによる
画像拡大

36. Sprite Polygon

37. 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. 大型プロジェクトの場合
 テクスチャアトラスを用い、テクスチャロード時間の
短縮を行っても、テクスチャアトラスの枚数が多けれ
ば、ユーザビリティは悪いまま
 しかし画像を読み込み終えなければ、その画像を表示
することはできない
 テクスチャアトラスを使ってもなおユーザビリティが
改善されない場合、画像の非同期読み込みの導入が要
求される
 ただし非同期読み込みを行う場合、設計の変更が発生
する可能性があるため、事前に非同期読み込みの仕組
みを理解し、設計に影響を与えないような作りとする

45. ドラゴンスラッシュ
https://www.youtube.com/watch?v=mIT7qqYp68s

46. 非同期読み込みによる描画
this._super();
//画像の読み込み
cc.textureCache.addImageAsync("res/apple.png",
this.loadingCallback, this);
cc.textureCache.addImageAsync("res/bug.png",
this.loadingCallback, this);
return true;

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

51. おわり
 ありがとうございました