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,623 views

Published on

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

Published in: Technology
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... (Unlimited)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... (Unlimited)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... (Unlimited)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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. おわり  ありがとうございました

×