Cocos2d-x(JS) ハンズオン #4タッチイベントの使い方

株式会社 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) の開発環境構築

Cocos2d-x におけるイベントの紹介cc.EventListener クラスcc.EventManager クラスイベントの種類

実際にさわってみるシングルタッチイベントマウスイベントキーボードイベント

イベントの紹介

新しい画像ファイルの追加

新しい画像は「 res 」フォルダに配置するcat1.pngcat2.pngcat3.pngを配置しよう

http://tks2.net/handson/20160205/cat1.pnghttp://tks2.net/handson/20160205/cat2.pnghttp://tks2.net/handson/20160205/cat3.png

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

cc.eventManagerユーザが作成したリスナーの登録

addListener見た目順 (ZOrder の降順 ) にイベントが発生

setSceneGraphPriority優先順の昇順にイベントが発生

setFixedPriorityリスナーの削除

removeListener

イベントの種類シングルタッチイベント

cc.EventListener.TOUCH_ONE_BY_ONEonTouchBeganonTouchMovedonTouchEndedonTouchCancelled

マルチタッチイベント cc.EventListener.TOUCH_ALL_AT_ONCE

onTouchesBeganonTouchesMovedonTouchesEndedonTouchesCancelled

イベントの種類キーボードイベント

cc.EventListener.KEYBOARDonKeyPressedonKeyReleased

マウスイベントcc.EventListener.MOUSE

onMouseDownonMouseUponMouseMoveonMouseScroll

イベントの種類

加速度センサイベントcc.EventListener.ACCELERATION

onAccelerationEvent

カスタムイベントcc.EventListener.CUSTOM

onCustomEvent

実際にさわってみる

シングルタッチイベントcc.EventListener.TOUCH_ONE_BY_ONE

タッチ開始 : onTouchBegan戻り値 true, false

スワイプ : onTouchMovedタッチ終了 : onTouchEndedタッチキャンセル : onTouchCancelled

手順リスナーの作成リスナーの登録

シングルタッチイベント

シングルタッチイベント

画面をタッチすると

ログ

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

画面をタッチすると

ログ

スプライト以外をタッチしても、先ほどと同じ

onTouchBegan にて判定が必要

画面をタッチすると

ログ

スプライトをタッチした場合のみイベントが有効

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

画面をタッチすると

ネコをタップすると移動できる

しかし、ネコが重なっている箇所をタップすると複数のネコが移動する

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

画面をタッチすると

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

マウスイベント

キーボードイベント

作業はここまで

参考になるサイト

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

おわり

ありがとうございました