cocos2d-x(js) ハンズオン #02 「画像表示とアクション」
Post on 21-Feb-2017
1.068 Views
Preview:
TRANSCRIPT
清水 友晶株式会社 TKS2
アプリ開発コンサルCocos2d-x サポートスマホアプリ開発
プライベートでもCocos2d-x に関するゲーム開発講演活動執筆活動
マイブーム : ゲームエンジン調査
チラ裏開発メモ : http://tks2.net/memoSlideShare: http://www.slideshare.net/doraemonsssFacebook: http://www.facebook.com/doraemonsss
もくじおさらい
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);
画像のサイズを確認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);
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);
回転アクションの利用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);
連続アクションの利用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);
連続アクション ( 順番 ) の利用
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);
連続アクション ( 同時 ) の利用
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);
コールバックアクションの利用
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, ブラウザ)
top related