まとまりのないブログ

something which something is something

cocos2d 雑記・雑学

cocos2d-x javascript no.2 タッチイベントの追加

投稿日:2017年11月17日 更新日:

イベントはシーンまたはレイヤー、スプライトに追加することができる。イベントを定義し、addListnerにてそのイベントと対象オブジェクトを設定することでタッチイベントを受けることができるようになる。

スプライトにイベントを追加

window.onload = function(){
cc.game.onStart = function(){

var MyScene = cc.Scene.extend({
onEnter:function () {
this._super();
var size = cc.director.getWinSize();

var sprite = cc.Sprite.create(“ball.png”);
sprite.setPosition(size.width / 2, size.height / 2);
sprite.setScale(0.8);
sprite.name = “sprite1”;
this.addChild(sprite, 0);

var sprite2 = cc.Sprite.create(“ball.png”);
sprite2.setPosition(size.width / 2.5, size.height / 2.5);
sprite2.setScale(0.8);
sprite2.name = “sprite2”;
this.addChild(sprite2, 0);

var sprite3 = cc.Sprite.create(“ball.png”);
sprite3.setPosition(size.width / 1.5, size.height / 1.5);
sprite3.setScale(0.8);
sprite3.name = “sprite3”;
this.addChild(sprite3, 0);

cc.eventManager.addListener(listener, sprite);
cc.eventManager.addListener(listener.clone(), sprite2);
cc.eventManager.addListener(listener.clone(), sprite3);

}
});
cc.director.runScene(new MyScene());

};
cc.game.run(“gameCanvas”);
};

var listener = cc.EventListener.create({
event: cc.EventListener.TOUCH_ONE_BY_ONE,

onTouchBegan: function (touch, event) {

var target = event.getCurrentTarget();
var location = target.convertToNodeSpace(touch.getLocation());
var spriteSize = target.getContentSize();
var spriteRect = cc.rect(0, 0, spriteSize.width, spriteSize.height);

if (cc.rectContainsPoint(spriteRect, location)) {
cc.log(target.name + ” touched.”);
return true;
}

return false;
},

onTouchMoved: function (touch, event) {
cc.log(“onTouchMoved”);

var target = event.getCurrentTarget();
var delta = touch.getDelta();
target.setPosition(cc.pAdd(target.getPosition(), delta));
}

return false;
}

});

解説

シーンに対してスプライト3つを追加。(sprite1,sprite2,sprite3)
スプライトのイメージは適当なボールの画像とした。(ball.png)
スプライトを定義・追加したあとそれぞにイベントを追加。(cc.eventManager.addListener)
イベントの種類はタッチとムーブ。
スプライトが複数ある場合は、どのスプライトがタッチされたのかを識別する必要があるため、スプライトごとにイベントを設定する。イベント追加時にlistener.clone()とすることでスプライトごとのイベントを受け取れるようになる。
イベントの設定では単にイベントを定義しただけではゲーム画面全体のどこでもタッチするとイベントが受け取れるようになってしまっているため、スプライトのサイズに合わせてイベントを受け取れるように設定する必要がある。その判定がevent.getCurrentTarget()以下の記述である。

-cocos2d, 雑記・雑学

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

no image

cardinitialize failed!!

シグマリオン2に無線lanのCFカードアダプタを挿入したら、ERROR cardinitialize failed!! と怒られるようになってしまった。初期化に失敗、ということらしい。その後はOKボタ …

no image

html5でcanvas要素の下部に7pxのマージンが発生してしまう件

htmlのレンダリングに関することで、canvas要素を3つほど連続して配置したときに謎の空白が下部に発生するのを確認した。意味がわからないのは、<!DOCTYPE html> を文書先頭 …

no image

肉と植物油をやめるとアトピーが抑えられる

油を断てばアトピーはここまで治るという本がある。まだ読んではいないのだが(注文中)、植物油または植物油脂がアトピー性皮膚炎の悪化に関係するということを主張しているらしい。私自身アトピー持ちのため長年苦 …

no image

コロナ禍の読み

今更というか調べてなかったので確証がなかったので調べてみたが、「コロナ禍」の読み方はどうやら「ころなか」と読むのが正しいらしい。 コロナ禍 – Wikipedia この「禍(わざわい)」と …

no image

クラファンでゲームを企画したが失敗した事例まとめ

Project Phoenix 2013年開始 発起人はヴァイオリン奏者の由良浩明氏 クラウドファンディングで102万ドルを集めることに成功 2019年を最後に開発状況の更新を停止。 【Project …