Cocos2d-x(JS) ハンズオン #03「複数あるボタンの使い分け」
34
Cocos2d-x(JS) ハハハハハ #3 ハハハハハハハハハハハハ ハハハハ TKS2 ハハハハ
-
Upload
tomoaki-shimizu -
Category
Technology
-
view
1.009 -
download
0
Transcript of Cocos2d-x(JS) ハンズオン #03「複数あるボタンの使い分け」
Cocos2d-x(JS) ハンズオン #3複数あるボタンの使い分け
株式会社 TKS2 清水友晶
清水 友晶株式会社 TKS2
アプリ開発コンサルCocos2d-x サポートスマホアプリ開発
プライベートでもCocos2d-x に関するゲーム開発講演活動執筆活動
マイブーム : ゲームエンジン調査
チラ裏開発メモ : http://tks2.net/memoSlideShare: http://www.slideshare.net/doraemonsssFacebook: http://www.facebook.com/doraemonsss
http://line.me/S/sticker/1085672
もくじおさらい
Cocos2d-x(JS) の開発環境構築
ボタンの紹介cc.Menu クラスcc.ControlButton クラスccui.Button クラス
実際にさわってみるccui.Button クラスcc.Menu クラスcc.ControlButton クラス
ボタンの紹介
新しい画像ファイルの追加新しい画像は「 res 」フォルダに配置する
button.png と buttonHighlighted.ong を配置しよう
http://goo.gl/KIRgN4 ↑ ( 大文字のアイ )
新しい画像ファイルの追加新しい画像ファイルパスを「 resource.js 」に登録
ボタンの紹介cc.Menu クラス
cc.ControlButton クラス
ccui.Button クラス
cc.Menu クラス概要
Cocos2d-x 初期より存在したボタンcc.MenuItem クラスがボタンcc.Menu クラスがボタンを管理するクラス
メリットメニューで利用するときに便利
デメリット1 つのボタンとして利用するには不便ボタンのイベントが 1 種類のみ (TouchEnded)
cc.MenuItem クラス文字のボタン
cc.MenuItemLabel クラスcc.MenuItemFont クラスcc.MenuItemAtlasFont クラス
画像のボタンcc.MenuItemSprite クラス
cc.MenuItemImage クラス
トグルボタンcc.MenuItemToggle クラス
cc.ControlButton クラス概要
Cocos2d-x v2 系の頃に追加されたクラスcc.Control クラスは従来より高機能なオブジェクト
メリットボタンのイベントが豊富ボタンの背景画像の自動調整機能があるボタンの各状態に対して、ラベル・画像を変更可能
デメリット必ずラベル (cc.Label) が必要
イベントの種類 TOUCH_DOWN イベント
TOUCH_DRAG_INSIDE イベント
TOUCH_DRAG_OUTSIDE イベント
TOUCH_DRAG_ENTER イベント
TOUCH_DRAG_EXIT イベント
TOUCH_UP_INSIDE イベント
TOUCH_UP_OUTSIDE イベント
TOUCH_CANCEL イベント
ccui.Button クラス概要
Cocos Studio のために用意されたボタン
メリットccui.Button クラスのみで完結
するシンプルなボタン
デメリットボタンのイベント取得時
に、 type による分岐が必要
実際にさわってみるccui.Button クラス
cc.ControlButton クラス
cc.Menu クラス
ccui.Button クラスボタンを利用する準備
テンプレートプロジェクト - project.json
ccui.Button クラスボタンの表示
テンプレートプロジェクト - app.js
ccui.Button クラスボタンのイベント
テンプレートプロジェクト - app.js
ccui.Button クラス
cc.ControlButton クラスボタンを利用する準備
テンプレートプロジェクト - project.json
cc.ControlButton クラス画像の表示に利用
テンプレートプロジェクト - app.js
cc.ControlButton クラスボタンのイベント
テンプレートプロジェクト - app.js
cc.ControlButton クラスボタンのイベント
テンプレートプロジェクト - app.js
cc.ControlButton クラス
cc.Menu クラス画像の表示に利用
テンプレートプロジェクト - app.js
cc.Menu クラスボタンのイベント
テンプレートプロジェクト - app.js
cc.Menu クラス
作業はここまで
参考になるサイト
Cocos 公式 Wikihttp://www.cocos2d-x.org/wiki/Cocos2d-JS
Cocos2d-JS API リファレンスhttp://cocos2d-x.org/wiki/Reference
Qiita（ tag: cocos2d-js ）https://qiita.com
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, ブラウザ）
おわり
ありがとうございました
