Cocos2d-x(JS) ハンズオン #2画像表示とアクション

株式会社 TKS2 清水友晶

清水 友晶株式会社 TKS2

アプリ開発コンサルCocos2d-x サポートスマホアプリ開発

プライベートでもCocos2d-x に関するゲーム開発講演活動執筆活動

マイブーム : ゲームエンジン調査

チラ裏開発メモ : http://tks2.net/memoSlideShare: http://www.slideshare.net/doraemonsssFacebook: http://www.facebook.com/doraemonsss

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

もくじおさらい

Cocos2d-x(JS) の開発環境構築

画像の表示かんたんな画像表示画像表示の注意点特殊な画像表示方法

アニメーション（アクション）アクションの紹介連続アクション連結アクションコールバックアクション

画像の表示

cc.Sprite クラス画像の表示に利用

テンプレートプロジェクト - app.js

cc.Sprite の第 1 引数の定数は、 resource.js にて定義している

addChild 関数の第 2 引数は、画像の表示順を定める Z オーダーを示す

26: // add "HelloWorld" splash screen27: this.sprite = new cc.Sprite(res.HelloWorld_png);28: this.sprite.attr({29: x: size.width / 2,30: y: size.height / 231: });32: this.addChild(this.sprite, 0);

resource.jsresource.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: }

新しい画像ファイルの追加新しい画像は「 res 」フォルダに配置する

sumomo_and_koume.png を配置しよう

http://goo.gl/QFN4Wy

新しい画像ファイルの表示app.js を編集

cc.Sprite の第 1 引数の定数は、画像ファイルパスを直接指定している

位置の指定はシンプルに書けるZ オーダーは、 Cocos2d-x のロゴよりも全面となるよ

うに 1 とした

34: var sumomoKoume = new cc.Sprite("res/sumomo_and_koume.png");35: sumomoKoume.x = size.width / 2;36: sumomoKoume.y = size.height / 2;37: this.addChild(sumomoKoume, 1);

新しい画像ファイルの表示

Cocos2d-x のロゴより前面に画像が配置されている

画像上に「 Hello World 」が表示されているのは、ラベルの Z オーダーが 5 であるため

画像表示の注意点

画像のサイズを確認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 screen27: 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 / 232: });33: this.addChild(this.sprite, 0);

画像のサイズを確認実行結果のログを確認

追加した画像ファイルの幅が 0 !!

追加したリソースが事前読み込みされていない結果

resource.js に定義すると、正常にサイズを取得することができる

resource.jsresource.js を編集

正しくサイズを取得することができた

01: var res = {02: HelloWorld_png : "res/HelloWorld.png",03: SumomoKoume_png : "res/sumomo_and_koume.png",04: };05: 06: var g_resources = [];07: for (var i in res) {08: g_resources.push(res[i]);09: }

特殊な画像表示方法

画像の非同期読み込みこれまでの方法は、画像が読み込まれていなくても、

ノードが追加されていた

しかし、事前読み込みが多くなると、ゲームの起動に時間がかかってしまう

また、後から追加したファイルなど、画像の読み込みが終わってから表示したほうが都合が良いケースもある画像ファイルサイズにより、位置・スケールなどの変更

が必要など

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: }

addLoadedEventListenerテクスチャのロードが完了した時に呼び出される関数

を定義することができる

cc.Sprite のほか、 cc.Texture2D や cc.Label などにも備わっている

addLoadedEventListener:function(callback, target)

新しい画像ファイルの表示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);

非同期読み込みによる表示

非同期読み込みで画像を表示

画像サイズも問題なく取得できている

アニメーション（アクション）

アクションの種類時間とともに状態が変化するアクション（ 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 （コールバックアクション）

移動アクションの利用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);

移動アクションの実行

起動後中央に表示されていた画像が、左下に 5 秒かけて移動する

回転アクションの利用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);

回転アクションの実行

起動後中央に表示されていた画像が、5 秒かけて時計回りに 1 回転する

連続アクション

連続アクションの利用app.js を編集

連続アクションとして cc.Repeat を利用している第 1 引数は、繰り返すアクションを示す第 2 引数は、繰り返し回数を示す

40: var rotate = new cc.RotateBy(5, 360);41: var repeat = new cc.Repeat(rotate, 2);42: sumomoKoume.runAction(repeat);

連続アクションの実行

起動後中央に表示されていた画像が、時計回りに 2 回転する

連結アクション

連続アクション ( 順番 ) の利用

app.js を編集

連続アクション ( 順番 ) として cc.Sequence を利用している

引数には、アクションを順番に指定している

40: var move = new cc.MoveTo(5, cc.p(0, 0));41: var rotate = new cc.RotateBy(5, 360);42: var seq = new cc.Sequence(move, rotate);43: sumomoKoume.runAction(seq);

連続アクション ( 順番 ) の実行

起動後中央に表示されていた画像が、左下へ移動した後、時計回りに 1 回転する

連続アクション ( 同時 ) の利用

app.js を編集

連続アクション ( 同時 ) として cc.Spawn を利用している

引数には、同時発生するアクションを指定している

40: var move = new cc.MoveTo(5, cc.p(0, 0));41: var rotate = new cc.RotateBy(5, 360);42: var spawn = new cc.Spawn(move, rotate);43: sumomoKoume.runAction(spawn);

連続アクション ( 同時 ) の実行

起動後中央に表示されていた画像が、左下へ移動した後、時計回りに 1 回転する

コールバックアクション

コールバックアクションの利用

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);

コールバックアクションの実行

起動後中央に表示されていた画像が、左下へ移動した後、中央に瞬間移動する

作業はここまで

参考になるサイト

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

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, ブラウザ）

おわり

ありがとうございました