Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,274 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. Cocos2d-x(JS) ハンズオン #2 画像表示とアクション 株式会社TKS2 清水友晶
  2. 2. 清水 友晶  株式会社TKS2 アプリ開発コンサル Cocos2d-xサポート スマホアプリ開発  プライベートでも Cocos2d-xに関するゲーム開発 講演活動 執筆活動  マイブーム: ゲームエンジン調査  チラ裏開発メモ: http://tks2.net/memo  SlideShare: http://www.slideshare.net/doraemonsss  Facebook: http://www.facebook.com/doraemonsss
  3. 3. http://line.me/S/sticker/1085672
  4. 4. もくじ  おさらい  Cocos2d-x(JS)の開発環境構築  画像の表示  かんたんな画像表示  画像表示の注意点  特殊な画像表示方法  アニメーション(アクション)  アクションの紹介  連続アクション  連結アクション  コールバックアクション
  5. 5. 画像の表示
  6. 6. 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);
  7. 7. 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: }
  8. 8. 新しい画像ファイルの追加  新しい画像は「res」フォルダに配置する  sumomo_and_koume.png を配置しよう http://goo.gl/QFN4Wy
  9. 9. 新しい画像ファイルの表示  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);
  10. 10. 新しい画像ファイルの表示  Cocos2d-xのロゴより前面に画像が配置されている  画像上に「Hello World」が表示されているのは、 ラベルのZオーダーが5であるため
  11. 11. 画像表示の注意点
  12. 12. 画像のサイズを確認  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);
  13. 13. 画像のサイズを確認  実行結果のログを確認  追加した画像ファイルの幅が 0 !!  追加したリソースが事前読み込みされていない結果  resource.jsに定義すると、正常にサイズを取得するこ とができる
  14. 14. 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: }
  15. 15. 特殊な画像表示方法
  16. 16. 画像の非同期読み込み  これまでの方法は、画像が読み込まれていなくても、 ノードが追加されていた  しかし、事前読み込みが多くなると、ゲームの起動に 時間がかかってしまう  また、後から追加したファイルなど、画像の読み込み が終わってから表示したほうが都合が良いケースもあ る  画像ファイルサイズにより、位置・スケールなどの変更 が必要など
  17. 17. 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: }
  18. 18. addLoadedEventListener  テクスチャのロードが完了した時に呼び出される関数 を定義することができる  cc.Spriteのほか、cc.Texture2Dやcc.Labelなどにも備 わっている addLoadedEventListener:function(callback, target)
  19. 19. 新しい画像ファイルの表示  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);
  20. 20. 非同期読み込みによる表示  非同期読み込みで画像を表示  画像サイズも問題なく取得できている
  21. 21. アニメーション(アクション)
  22. 22. アクションの種類  時間とともに状態が変化するアクション(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(コールバックアクション)
  23. 23. 移動アクションの利用  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);
  24. 24. 移動アクションの実行  起動後中央に表示されていた画像が、 左下に5秒かけて移動する
  25. 25. 回転アクションの利用  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);
  26. 26. 回転アクションの実行  起動後中央に表示されていた画像が、5 秒かけて時計回りに1回転する
  27. 27. 連続アクション
  28. 28. 連続アクションの利用  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);
  29. 29. 連続アクションの実行  起動後中央に表示されていた画像が、 時計回りに2回転する
  30. 30. 連結アクション
  31. 31. 連続アクション(順番)の利用  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);
  32. 32. 連続アクション(順番)の実行  起動後中央に表示されていた画像が、 左下へ移動した後、時計回りに1回転する
  33. 33. 連続アクション(同時)の利用  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);
  34. 34. 連続アクション(同時)の実行  起動後中央に表示されていた画像が、 左下へ移動した後、時計回りに1回転する
  35. 35. コールバック アクション
  36. 36. コールバックアクションの利用  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);
  37. 37. コールバックアクションの実行  起動後中央に表示されていた画像が、 左下へ移動した後、中央に瞬間移動する
  38. 38. 作業はここまで
  39. 39. 参考になるサイト  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
  40. 40. 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, ブラウザ)
  41. 41. おわり  ありがとうございました

×