2015/12/2 イベント＆コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #02 「画像表示とアクション」の資料です。一般的な画像表示、画像の非同期読み込み、各種アクションなどを紹介しました。

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

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

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

5. もくじ
 おさらい
 Cocos2d-x(JS)の開発環境構築
 画像の表示
 かんたんな画像表示
 画像表示の注意点
 特殊な画像表示方法
 アニメーション（アクション）
 アクションの紹介
 連続アクション
 連結アクション
 コールバックアクション

6. 画像の表示

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

9. 新しい画像ファイルの追加
 新しい画像は「res」フォルダに配置する
 sumomo_and_koume.png を配置しよう
http://goo.gl/QFN4Wy

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

11. 新しい画像ファイルの表示
 Cocos2d-xのロゴより前面に画像が配置されている
 画像上に「Hello World」が表示されているのは、
ラベルのZオーダーが5であるため

12. 画像表示の注意点

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

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

15. resource.js
 resource.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: }

16. 特殊な画像表示方法

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

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

19. addLoadedEventListener
 テクスチャのロードが完了した時に呼び出される関数
を定義することができる
 cc.Spriteのほか、cc.Texture2Dやcc.Labelなどにも備
わっている
addLoadedEventListener:function(callback, target)

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

21. 非同期読み込みによる表示
 非同期読み込みで画像を表示
 画像サイズも問題なく取得できている

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

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

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

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

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

28. 連続アクション

29. 連続アクションの利用
 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);

30. 連続アクションの実行
 起動後中央に表示されていた画像が、
時計回りに2回転する

31. 連結アクション

32. 連続アクション(順番)の利用
 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);

33. 連続アクション(順番)の実行
 起動後中央に表示されていた画像が、
左下へ移動した後、時計回りに1回転する

34. 連続アクション(同時)の利用
 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);

35. 連続アクション(同時)の実行
 起動後中央に表示されていた画像が、
左下へ移動した後、時計回りに1回転する

36. コールバック
アクション

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

38. コールバックアクションの実行
 起動後中央に表示されていた画像が、
左下へ移動した後、中央に瞬間移動する

39. 作業はここまで

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

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

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