Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
51
Cocos2d-x(JS) ハンズオン #8 様々な画像描画方法 株式会社TKS2 清水友晶
-
Upload
tomoaki-shimizu -
Category
Technology
-
view
818 -
download
0
Transcript of Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Cocos2d-x(JS)ハンズオン #8
様々な画像描画方法
株式会社TKS2 清水友晶
清水 友晶 株式会社TKS2
アプリ開発コンサルCocos2d-xサポートスマホアプリ開発TECH.C.非常勤講師
プライベートでもCocos2d-xに関するゲーム開発講演活動執筆活動
マイブーム: ゲームエンジン調査
チラ裏開発メモ: http://tks2.net/memo
SlideShare: http://www.slideshare.net/doraemonsss
Facebook: http://www.facebook.com/doraemonsss
http://line.me/S/sticker/1085672
画像表示
画像描画クラス
テクスチャアトラス
Scale9Spriteクラス
Sprite Porygonクラス
非同期読み込み
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"
};
画像描画クラス
デバッグ情報
デバッグ情報
GL verts … 頂点数
GL calls … ドローコール
FPS / フレーム時間
画像描画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;
Sprite描画
画像描画
GL verts: 12
GL calls: 2
画像を表示することで、頂点数・コール数が増える
画像描画
同一画像による複数スプライト
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;
複数スプライト描画
複数スプライト描画
GL calls: 1
異なる画像を表示するとコール数が増えるが、同一画像の場合は、コール数は増えない
Cocos2d-x v3.xよりバッチノードが自動で適用されるようになったため
テクスチャアトラス
テクスチャに使用する画像 画像を画面に表示するとき、画像はビデオメモリ上
(VRAM)に展開される
GPUメモリ上に展開される画像のサイズ
2のべき乗1, 2, 4, 8, 16, 32, 64, 128,256, 512, 1024, 2048, 4096, …
例:画像 960px * 640px
VRAM上 1024px * 1024px
テクスチャアトラス 複数の画像を1つにまとめたもの
メモリの節約
CPUの処理が高速
Cocos2d-xの場合、設定ファイル(plist)とセット
テクスチャアトラスの注意 同じグループの画像を1つにまとめる
1つの画面で使用するパーツ画像
アニメーションで使用する複数画像
無関係な画像を1つにまとめない
場合によっては、1枚の小さな画像を読み込むだけなのに、大きなテクスチャアトラスを読み込む必要がある
カードゲームなどの場合、カードをテクスチャアトラスにまとめない
最大サイズは2048px * 2048pxが適切
古い端末の場合、4096pxを読み込めない
テクスチャアトラス生成
テクスチャアトラス生成
テクスチャアトラスによる描画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;
テクスチャアトラスによる描画
画像描画
GL verts: 12 12
GL calls: 2 1
テクスチャアトラスの利用により、コール数が減っている
SpriteFrameCacheクラス テクスチャアトラスを管理する
テクスチャアトラスの読み込み
addSpriteFramesWithFile関数
テクスチャアトラスの解放
removeSpriteFrames関数
removeSpriteFrameWithFile関数
注意
Spriteクラスによるテクスチャの変更には注意すること
Texture Packer
Scale9Spriteクラス
画像拡大
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;
画像拡大
Scale9Spriteクラス
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;
Scale9Spriteクラスによる画像拡大
Sprite Polygon
Sprite Polygon 画像をポリゴン化し、描画コストを少なくする
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;
Sprite描画
Sprite描画
Texture Packer
Texture Packer
非同期読み込み
大型プロジェクトの場合
テクスチャアトラスを用い、テクスチャロード時間の短縮を行っても、テクスチャアトラスの枚数が多ければ、ユーザビリティは悪いまま
しかし画像を読み込み終えなければ、その画像を表示することはできない
テクスチャアトラスを使ってもなおユーザビリティが改善されない場合、画像の非同期読み込みの導入が要求される
ただし非同期読み込みを行う場合、設計の変更が発生する可能性があるため、事前に非同期読み込みの仕組みを理解し、設計に影響を与えないような作りとする
非同期読み込みによる描画
this._super();
//画像の読み込みcc.textureCache.addImageAsync("res/apple.png",
this.loadingCallback, this);
cc.textureCache.addImageAsync("res/bug.png",
this.loadingCallback, this);
return true;
非同期読み込みによる描画
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);
}
Sprite描画
作業はここまで
参考になるサイト
Cocos公式Wikihttp://www.cocos2d-x.org/wiki/Cocos2d-JS
Cocos2d-JS APIリファレンスhttp://cocos2d-x.org/wiki/Reference
Qiita（tag: cocos2d-js）https://qiita.com
おわり
ありがとうございました
