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

1. Cocos2d-x(JS) ハンズオン #3
複数あるボタンの使い分け
株式会社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)の開発環境構築
 ボタンの紹介
 cc.Menuクラス
 cc.ControlButtonクラス
 ccui.Buttonクラス
 実際にさわってみる
 ccui.Buttonクラス
 cc.Menuクラス
 cc.ControlButtonクラス

6. ボタンの紹介

7. 新しい画像ファイルの追加
 新しい画像は「res」フォルダに配置する
 button.png と buttonHighlighted.ongを配置しよう
http://goo.gl/KIRgN4
↑
(大文字のアイ)

8. 新しい画像ファイルの追加
 新しい画像ファイルパスを「resource.js」に登録

9. ボタンの紹介
 cc.Menuクラス
 cc.ControlButtonクラス
 ccui.Buttonクラス

10. cc.Menuクラス
 概要
 Cocos2d-x初期より存在したボタン
 cc.MenuItemクラスがボタン
 cc.Menuクラスがボタンを管理するクラス
 メリット
 メニューで利用するときに便利
 デメリット
 1つのボタンとして利用するには不便
 ボタンのイベントが1種類のみ (TouchEnded)

11. cc.MenuItemクラス
 文字のボタン
 cc.MenuItemLabelクラス
 cc.MenuItemFontクラス
 cc.MenuItemAtlasFontクラス
 画像のボタン
 cc.MenuItemSpriteクラス
 cc.MenuItemImageクラス
 トグルボタン
 cc.MenuItemToggleクラス

12. cc.ControlButtonクラス
 概要
 Cocos2d-x v2系の頃に追加されたクラス
 cc.Controlクラスは従来より高機能なオブジェクト
 メリット
 ボタンのイベントが豊富
 ボタンの背景画像の自動調整機能がある
 ボタンの各状態に対して、ラベル・画像を変更可能
 デメリット
 必ずラベル (cc.Label) が必要

13. イベントの種類
 TOUCH_DOWNイベント
 TOUCH_DRAG_INSIDEイベント
 TOUCH_DRAG_OUTSIDEイベント
 TOUCH_DRAG_ENTERイベント
 TOUCH_DRAG_EXITイベント
 TOUCH_UP_INSIDEイベント
 TOUCH_UP_OUTSIDEイベント
 TOUCH_CANCELイベント

14. ccui.Buttonクラス
 概要
 Cocos Studioのために用意され
たボタン
 メリット
 ccui.Buttonクラスのみで完結す
るシンプルなボタン
 デメリット
 ボタンのイベント取得時に、
typeによる分岐が必要

15. 実際にさわってみる
 ccui.Buttonクラス
 cc.ControlButtonクラス
 cc.Menuクラス

16. ccui.Buttonクラス
 ボタンを利用する準備
 テンプレートプロジェクト - project.json

17. ccui.Buttonクラス
 ボタンの表示
 テンプレートプロジェクト - app.js

18. ccui.Buttonクラス
 ボタンのイベント
 テンプレートプロジェクト - app.js

19. ccui.Buttonクラス
 ソースコードはこちら
 https://goo.gl/o6bJO1

20. ccui.Buttonクラス

21. cc.ControlButtonクラス
 ボタンを利用する準備
 テンプレートプロジェクト - project.json

22. cc.ControlButtonクラス
 画像の表示に利用
 テンプレートプロジェクト - app.js

23. cc.ControlButtonクラス
 ボタンのイベント
 テンプレートプロジェクト - app.js

24. cc.ControlButtonクラス
 ボタンのイベント
 テンプレートプロジェクト - app.js

25. cc.ControlButtonクラス
 ソースコードはこちら
 https://goo.gl/2i14At

26. cc.ControlButtonクラス

27. cc.Menuクラス
 画像の表示に利用
 テンプレートプロジェクト - app.js

28. cc.Menuクラス
 ボタンのイベント
 テンプレートプロジェクト - app.js

29. cc.Menuクラス
 ソースコードはこちら
 https://goo.gl/5FnH0t

30. cc.Menuクラス

31. 作業はここまで

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

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

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