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

Cocos2d-x(JS) ハンズオン #2
画像表示とアクション
株式会社TKS2 清水友晶

清水友晶
 株式会社TKS2
アプリ開発コンサル
Cocos2d-xサポート
スマホアプリ開発
 プライベートでも
Cocos2d-xに関するゲーム開発
講演活動
執筆活動
 マイブーム: ゲームエンジン調査
 チラ裏開発メモ: http://tks2.net/memo
 SlideShare: http://www.slideshare.net/doraemonsss
 Facebook: 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 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);

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

新しい画像ファイルの追加
 新しい画像は「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);
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);

画像のサイズを確認
 実行結果のログを確認
 追加した画像ファイルの幅が 0 !!
 追加したリソースが事前読み込みされていない結果
 resource.jsに定義すると、正常にサイズを取得するこ
とができる

resource.js
 resource.jsを編集
 正しくサイズを取得することができた
01: var res = {
03: SumomoKoume_png : "res/sumomo_and_koume.png",
04: };
05:
09: }

画像の非同期読み込み
 これまでの方法は、画像が読み込まれていなくても、
ノードが追加されていた
 しかし、事前読み込みが多くなると、ゲームの起動に
時間がかかってしまう
 また、後から追加したファイルなど、画像の読み込み
が終わってから表示したほうが都合が良いケースもあ
る
 画像ファイルサイズにより、位置・スケールなどの変更
が必要など

resource.js
 非同期読み込みを確認するため、resource.jsを元に戻
す
01: var res = {
03: };
04:
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);
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引数は、位置を示す
39:
40: var move = new cc.MoveTo(5, cc.p(0, 0));
41: sumomoKoume.runAction(move);

移動アクションの実行
 起動後中央に表示されていた画像が、
左下に5秒かけて移動する

回転アクションの利用
 app.jsを編集
 回転アクションとしてcc.RotateByを利用している
 第1引数は、時間(s)を示す
 第2引数は、回転角度を示す
40:
41: var rotate = new cc.RotateBy(5, 360);
42: sumomoKoume.runAction(rotate);

回転アクションの実行
 起動後中央に表示されていた画像が、5
秒かけて時計回りに1回転する

連続アクションの利用
 app.jsを編集
 連続アクションとしてcc.Repeatを利用している
 第1引数は、繰り返すアクションを示す
 第2引数は、繰り返し回数を示す
41: var repeat = new cc.Repeat(rotate, 2);
42: sumomoKoume.runAction(repeat);

連続アクションの実行
時計回りに2回転する

連続アクション(順番)の利用
 app.jsを編集
 連続アクション(順番)としてcc.Sequenceを利用
している
 引数には、アクションを順番に指定している
42: var seq = new cc.Sequence(move, rotate);
43: sumomoKoume.runAction(seq);

連続アクション(順番)の実行
左下へ移動した後、時計回りに1回転する

連続アクション(同時)の利用
 app.jsを編集
 連続アクション(同時)としてcc.Spawnを利用している
 引数には、同時発生するアクションを指定している
42: var spawn = new cc.Spawn(move, rotate);
43: sumomoKoume.runAction(spawn);

連続アクション(同時)の実行
左下へ移動した後、時計回りに1回転する

コールバック
アクション

コールバックアクションの利用
 app.jsを編集
 コールバックアクションとしてcc.CallFuncを利用して
いる
 第1引数には、呼び出す関数を指定している
 第2引数は、ターゲットとしてthisつまりこの
HelloWorldLayerを指定している
41: var callfunc = new cc.CallFunc(function()
42: {
45: }, this);
46: var seq = new cc.Sequence(move, callfunc);
47: sumomoKoume.runAction(seq);

コールバックアクションの実行
左下へ移動した後、中央に瞬間移動する

参考になるサイト
 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

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

おわり
 ありがとうございました

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

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to Cocos2d-x(JS) ハンズオン #02 「画像表示とアクション」 (20)

More from Tomoaki Shimizu (10)

Recently uploaded (10)

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