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) ハンズオン #03「複数あるボタンの使い分け」

1,169 views

Published on

2016/1/8 イベント&コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #03 「複数あるボタンの使い分け」の資料です。Cocos2d-xで用意されているボタンを紹介しました。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Cocos2d-x(JS) ハンズオン #03「複数あるボタンの使い分け」

  1. 1. Cocos2d-x(JS) ハンズオン #3 複数あるボタンの使い分け 株式会社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)の開発環境構築  ボタンの紹介  cc.Menuクラス  cc.ControlButtonクラス  ccui.Buttonクラス  実際にさわってみる  ccui.Buttonクラス  cc.Menuクラス  cc.ControlButtonクラス
  5. 5. ボタンの紹介
  6. 6. 新しい画像ファイルの追加  新しい画像は「res」フォルダに配置する  button.png と buttonHighlighted.ongを配置しよう http://goo.gl/KIRgN4 ↑ (大文字のアイ)
  7. 7. 新しい画像ファイルの追加  新しい画像ファイルパスを「resource.js」に登録
  8. 8. ボタンの紹介  cc.Menuクラス  cc.ControlButtonクラス  ccui.Buttonクラス
  9. 9. cc.Menuクラス  概要  Cocos2d-x初期より存在したボタン  cc.MenuItemクラスがボタン  cc.Menuクラスがボタンを管理するクラス  メリット  メニューで利用するときに便利  デメリット  1つのボタンとして利用するには不便  ボタンのイベントが1種類のみ (TouchEnded)
  10. 10. cc.MenuItemクラス  文字のボタン  cc.MenuItemLabelクラス  cc.MenuItemFontクラス  cc.MenuItemAtlasFontクラス  画像のボタン  cc.MenuItemSpriteクラス  cc.MenuItemImageクラス  トグルボタン  cc.MenuItemToggleクラス
  11. 11. cc.ControlButtonクラス  概要  Cocos2d-x v2系の頃に追加されたクラス  cc.Controlクラスは従来より高機能なオブジェクト  メリット  ボタンのイベントが豊富  ボタンの背景画像の自動調整機能がある  ボタンの各状態に対して、ラベル・画像を変更可能  デメリット  必ずラベル (cc.Label) が必要
  12. 12. イベントの種類  TOUCH_DOWNイベント  TOUCH_DRAG_INSIDEイベント  TOUCH_DRAG_OUTSIDEイベント  TOUCH_DRAG_ENTERイベント  TOUCH_DRAG_EXITイベント  TOUCH_UP_INSIDEイベント  TOUCH_UP_OUTSIDEイベント  TOUCH_CANCELイベント
  13. 13. ccui.Buttonクラス  概要  Cocos Studioのために用意され たボタン  メリット  ccui.Buttonクラスのみで完結す るシンプルなボタン  デメリット  ボタンのイベント取得時に、 typeによる分岐が必要
  14. 14. 実際にさわってみる  ccui.Buttonクラス  cc.ControlButtonクラス  cc.Menuクラス
  15. 15. ccui.Buttonクラス  ボタンを利用する準備  テンプレートプロジェクト - project.json
  16. 16. ccui.Buttonクラス  ボタンの表示  テンプレートプロジェクト - app.js
  17. 17. ccui.Buttonクラス  ボタンのイベント  テンプレートプロジェクト - app.js
  18. 18. ccui.Buttonクラス  ソースコードはこちら  https://goo.gl/o6bJO1
  19. 19. ccui.Buttonクラス
  20. 20. cc.ControlButtonクラス  ボタンを利用する準備  テンプレートプロジェクト - project.json
  21. 21. cc.ControlButtonクラス  画像の表示に利用  テンプレートプロジェクト - app.js
  22. 22. cc.ControlButtonクラス  ボタンのイベント  テンプレートプロジェクト - app.js
  23. 23. cc.ControlButtonクラス  ボタンのイベント  テンプレートプロジェクト - app.js
  24. 24. cc.ControlButtonクラス  ソースコードはこちら  https://goo.gl/2i14At
  25. 25. cc.ControlButtonクラス
  26. 26. cc.Menuクラス  画像の表示に利用  テンプレートプロジェクト - app.js
  27. 27. cc.Menuクラス  ボタンのイベント  テンプレートプロジェクト - app.js
  28. 28. cc.Menuクラス  ソースコードはこちら  https://goo.gl/5FnH0t
  29. 29. cc.Menuクラス
  30. 30. 作業はここまで
  31. 31. 参考になるサイト  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
  32. 32. Cocos2d-x (JS) ハンズオン  Cocos2d-x (JS)を学ぶチャンス!  PCを持参し実際に手を動かし、Cocos2d-x (JS)が 難しくないということが実感できます!  2/5(金) Cocos2d-x (JS) ハンズオン #4  日時: 2/5(金) 19:00〜21:00  場所: イベント&コミュニティスペース dots.  内容: Cocos2d-x (JS)の タッチイベントの使い方 (iOS, Android, ブラウザ)
  33. 33. おわり  ありがとうございました

×