Cocos2d-x(JS) ハンズオン #03「複数あるボタンの使い分け」
Download as PPTX, PDF•0 likes•1,977 views
2016/1/8 イベント＆コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #03 「複数あるボタンの使い分け」の資料です。Cocos2d-xで用意されているボタンを紹介しました。
Cocos2d-x(JS) ハンズオン #03「複数あるボタンの使い分け」
- 2. 清水 友晶 株式会社TKS2 アプリ開発コンサル Cocos2d-xサポート スマホアプリ開発 プライベートでも Cocos2d-xに関するゲーム開発 講演活動 執筆活動 マイブーム: ゲームエンジン調査 チラ裏開発メモ: http://tks2.net/memo SlideShare: http://www.slideshare.net/doraemonsss Facebook: http://www.facebook.com/doraemonsss
- 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 ↑ (大文字のアイ)
- 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
- 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, ブラウザ）