More Related Content
Similar to Cocos2d-x(JS) ハンズオン #02 「画像表示とアクション」 (20)
More from Tomoaki Shimizu (10)
Cocos2d-x(JS) ハンズオン #02 「画像表示とアクション」
- 7. cc.Spriteクラス
画像の表示に利用
テンプレートプロジェクト - app.js
cc.Spriteの第1引数の定数は、resource.jsにて定義してい
る
addChild関数の第2引数は、
画像の表示順を定めるZオーダーを示す
26: // add "HelloWorld" splash screen
27: this.sprite = new cc.Sprite(res.HelloWorld_png);
28: this.sprite.attr({
29: x: size.width / 2,
30: y: size.height / 2
31: });
32: this.addChild(this.sprite, 0);
- 8. resource.js
resource.jsの役割
定数の設定
ブラウザアプリのためのリソース事前読み込み
ここに必ず指定しなくともよい(但し注意が必要)
01: var res = {
02: HelloWorld_png : "res/HelloWorld.png",
03: };
04:
05: var g_resources = [];
06: for (var i in res) {
07: g_resources.push(res[i]);
08: }
- 13. 画像のサイズを確認
app.jsを編集
cc.logは、コンソールにログを表示する
35: var sumomoKoume
= new cc.Sprite("res/sumomo_and_koume.png");
36: cc.log("SumomoKoume: " + sumomoKoume.width);
37: sumomoKoume.x = size.width / 2;
38: sumomoKoume.y = size.height / 2;
39: this.addChild(sumomoKoume, 1);
26: // add "HelloWorld" splash screen
27: this.sprite = new cc.Sprite(res.HelloWorld_png);
28: cc.log("HelloWorld: " + this.sprite.width);
29: this.sprite.attr({
30: x: size.width / 2,
31: y: size.height / 2
32: });
33: this.addChild(this.sprite, 0);
- 20. 新しい画像ファイルの表示
app.jsを編集
addLoadedEventListenerの第1引数は、直接関数を指定
している
第2引数は、ターゲットとしてthisつまりこの
HelloWorldLayerを指定している
35: var sumomoKoume = new cc.Sprite("res/sumomo_and_koume.png");
36: sumomoKoume.addLoadedEventListener(function()
37: {
38: cc.log("===== SumomoKoume width: " + sumomoKoume.width);
39: sumomoKoume.x = size.width / 2;
40: sumomoKoume.y = size.height / 2;
41: this.addChild(sumomoKoume, 1);
42: }, this);
- 23. アクションの種類
時間とともに状態が変化するアクション(cc.ActionInterval)
cc.MoveTo, ccMoveBy(移動アクション)
cc.ScaleTo, ccScaleBy(伸縮アクション)
cc.RotateTo, cc.RotateBy(回転アクション)
cc.DelayTime(待機アクション)
cc.Repeat, ccSequence, cc.Spawn(連続・連結アクション)
瞬時に状態が変化するアクション(cc.ActionInstance)
cc.Show, cc.Hide(表示・非表示アクション)
cc.FlipX, cc.FlipY(反転アクション)
cc.RemoveSelf(消失アクション)
cc.CallFunc(コールバックアクション)
- 24. 移動アクションの利用
app.jsを編集
移動アクションとしてcc.MoveToを利用している
第1引数は、時間(s)を示す
第2引数は、位置を示す
35: var sumomoKoume = new cc.Sprite("res/sumomo_and_koume.png");
36: sumomoKoume.x = size.width / 2;
37: sumomoKoume.y = size.height / 2;
38: this.addChild(sumomoKoume, 1);
39:
40: var move = new cc.MoveTo(5, cc.p(0, 0));
41: sumomoKoume.runAction(move);
- 26. 回転アクションの利用
app.jsを編集
回転アクションとしてcc.RotateByを利用している
第1引数は、時間(s)を示す
第2引数は、回転角度を示す
36: var sumomoKoume = new cc.Sprite("res/sumomo_and_koume.png");
37: sumomoKoume.x = size.width / 2;
38: sumomoKoume.y = size.height / 2;
39: this.addChild(sumomoKoume, 1);
40:
41: var rotate = new cc.RotateBy(5, 360);
42: sumomoKoume.runAction(rotate);
- 37. コールバックアクションの利用
app.jsを編集
コールバックアクションとしてcc.CallFuncを利用して
いる
第1引数には、呼び出す関数を指定している
第2引数は、ターゲットとしてthisつまりこの
HelloWorldLayerを指定している
40: var move = new cc.MoveTo(5, cc.p(0, 0));
41: var callfunc = new cc.CallFunc(function()
42: {
43: sumomoKoume.x = size.width / 2;
44: sumomoKoume.y = size.height / 2;
45: }, this);
46: var seq = new cc.Sequence(move, callfunc);
47: sumomoKoume.runAction(seq);
- 41. Cocos2d-x (JS) ハンズオン
Cocos2d-x (JS)を学ぶチャンス!
PCを持参し実際に手を動かし、Cocos2d-x (JS)が
難しくないということが実感できます!
1/8(金) Cocos2d-x (JS) ハンズオン #3
日時: 1/8(金) 19:00〜21:00
場所: イベント&コミュニティスペース dots.
内容: Cocos2d-x (JS)の複数ある
ボタンの使い分け
(iOS, Android, ブラウザ)