2016/2/5 イベント＆コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #04 「タッチイベントの使い方」の資料です。Cocos2d-xにおけるイベント関連を紹介しました。

1. Cocos2d-x(JS) ハンズオン #4
タッチイベントの使い方
株式会社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)の開発環境構築
 Cocos2d-xにおけるイベントの紹介
 cc.EventListenerクラス
 cc.EventManagerクラス
 イベントの種類
 実際にさわってみる
 シングルタッチイベント
 マウスイベント
 キーボードイベント

6. イベントの紹介

7. 新しい画像ファイルの追加
 新しい画像は「res」フォルダに配置する
 cat1.png
 cat2.png
 cat3.png
を配置しよう
http://tks2.net/handson/20160205/cat1.png
http://tks2.net/handson/20160205/cat2.png
http://tks2.net/handson/20160205/cat3.png

8. cc.EventListenerクラス
 タッチイベント
 cc.EventListener.TOUCH_ONE_BY_ONE
 cc.EventListener.TOUCH_ALL_AT_ONCE
 キーボードイベント
 cc.EventListener.KEYBOARD
 マウスイベント
 cc.EventListener.MOUSE
 加速度センサイベント
 cc.EventListener.ACCELERATION
 カスタムイベント
 cc.EventListener.CUSTOM

9. cc.eventManager
 ユーザが作成したリスナーの登録
 addListener
 見た目順(ZOrderの降順)にイベントが発生
setSceneGraphPriority
 優先順の昇順にイベントが発生
setFixedPriority
 リスナーの削除
 removeListener

10. イベントの種類
 シングルタッチイベント
 cc.EventListener.TOUCH_ONE_BY_ONE
 onTouchBegan
 onTouchMoved
 onTouchEnded
 onTouchCancelled
 マルチタッチイベント
 cc.EventListener.TOUCH_ALL_AT_ONCE
 onTouchesBegan
 onTouchesMoved
 onTouchesEnded
 onTouchesCancelled

11. イベントの種類
 キーボードイベント
 cc.EventListener.KEYBOARD
 onKeyPressed
 onKeyReleased
 マウスイベント
 cc.EventListener.MOUSE
 onMouseDown
 onMouseUp
 onMouseMove
 onMouseScroll

12. イベントの種類
 加速度センサイベント
 cc.EventListener.ACCELERATION
 onAccelerationEvent
 カスタムイベント
 cc.EventListener.CUSTOM
 onCustomEvent

13. 実際にさわってみる

14. シングルタッチイベント
 cc.EventListener.TOUCH_ONE_BY_ONE
 タッチ開始: onTouchBegan
 戻り値 true, false
 スワイプ: onTouchMoved
 タッチ終了: onTouchEnded
 タッチキャンセル: onTouchCancelled
 手順
 リスナーの作成
 リスナーの登録

15. シングルタッチイベント

16. シングルタッチイベント

17. 画面をタッチすると
ログ

18. ノードに対するタッチイベント

19. 画面をタッチすると
ログ
スプライト以外
をタッチしても、
先ほどと同じ

20. onTouchBeganにて判定が必要

21. 画面をタッチすると
ログ
スプライトをタッ
チした場合のみ
イベントが有効

22. 複数ノードに対する
タッチイベント

23. 画面をタッチすると
ネコをタップする
と移動できる
しかし、ネコが重
なっている箇所を
タップすると複数
のネコが移動する

24. 単一のノードのみタッチする

25. 画面をタッチすると
ネコが重なってい
る箇所をタップす
ると最前面のネコ
が移動する

26. マウスイベント

27. キーボードイベント

28. 作業はここまで

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

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