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

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

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

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

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.
画像描画クラス

8.
デバッグ情報

9.
デバッグ情報
 GL verts … 頂点数
 GL calls … ドローコール
 FPS / フレーム時間

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.
Sprite描画

12.
画像描画
 GL verts: 12
 GL calls: 2
 画像を表示することで、頂点
数・コール数が増える

13.
画像描画

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.
複数スプライト描画

16.
複数スプライト描画
 GL calls: 1
 異なる画像を表示するとコール数が増えるが、
同一画像の場合は、コール数は増えない
 Cocos2d-x v3.xよりバッチノードが自動で適
用されるようになったため

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

18.
テクスチャアトラス

19.
テクスチャに使用する画像
 画像を画面に表示するとき、画像はビデオメモリ上
(VRAM)に展開される
 GPUメモリ上に展開される画像のサイズ
 2のべき乗
1, 2, 4, 8, 16, 32, 64, 128,
256, 512, 1024, 2048, 4096, …
 例:
画像 960px * 640px
 VRAM上 1024px * 1024px

20.
テクスチャアトラス
 複数の画像を1つにまとめたもの
 メモリの節約
 CPUの処理が高速
 Cocos2d-xの場合、設定ファイル(plist)とセット

21.
テクスチャアトラスの注意
 同じグループの画像を1つにまとめる
 1つの画面で使用するパーツ画像
 アニメーションで使用する複数画像
 無関係な画像を1つにまとめない
 場合によっては、1枚の小さな画像を読み込むだけなのに、
大きなテクスチャアトラスを読み込む必要がある
 カードゲームなどの場合、カードをテクスチャアトラス
にまとめない
 最大サイズは2048px * 2048pxが適切
 古い端末の場合、4096pxを読み込めない

22.
テクスチャアトラス生成

23.
テクスチャアトラス生成

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.
テクスチャアトラスによる描画

26.
画像描画
 GL verts: 12  12
 GL calls: 2  1
 テクスチャアトラスの利用により、
コール数が減っている

27.
SpriteFrameCacheクラス
 テクスチャアトラスを管理する
 テクスチャアトラスの読み込み
 addSpriteFramesWithFile関数
 テクスチャアトラスの解放
 removeSpriteFrames関数
 removeSpriteFrameWithFile関数
 注意
 Spriteクラスによるテクスチャの変
更には注意すること

28.
Texture Packer

29.
Scale9Spriteクラス

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.
画像拡大

32.
Scale9Spriteクラス

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.
Scale9Spriteクラスによる
画像拡大

35.
Sprite Polygon

36.
Sprite Polygon
 画像をポリゴン化し、描画コストを少なくする

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.
Sprite描画

39.
Sprite描画

40.
Texture Packer

41.
Texture Packer

42.
非同期読み込み

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

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

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

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.
Sprite描画

48.
作業はここまで

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.
おわり
 ありがとうございました