エンティティをクリック・タップできるようにするには、onPointDown
トリガーを利用します。
var rect = new g.FilledRect({
..., // その他のプロパティ
touchable: true // 触れられるオブジェクトにする
});
rect.onPointDown.add(function(e) {
... // エンティティがクリック・タップされた時の処理
});
エンティティは touchable
プロパティを true
にすることにより、タップやクリックなどのユーザ操作を検出できるようになります。いわゆる「クリック」はマウスを離したタイミングで判定されますが、ここでは単純にマウスを押したタイミングで処理を行います。
エンティティをドラッグ・スワイプで動かすにはg.E#onPointMove
を利用してください。
画面全体をクリック・タップするにはg.Scene#onPointDownCapture
を利用してください。
次のコンテンツは、矩形をクリックすると矩形の色が変わります。
Akashic Engine ではユーザがタップやクリックするとポイントイベントが発生します。ポイントイベントを受け取るトリガーには以下の 3 種類があります。
トリガー名 | 内容 |
---|---|
onPointDown |
画面に指が触れた。マウスのボタンが押された |
onPointMove |
画面に触れた指が移動した。ボタンが押された状態でマウスが移動した |
onPointUp |
画面から指が離れた。マウスのボタンが離された |
それぞれのイベントに対応するトリガーを利用することで、イベント発生時に処理を実行できます。
下記のコードでは、クリック・タップ時に矩形が青色になり、クリック・タップが矩形から離れた時に矩形が赤色に変わります。
var scene = new g.Scene({ game: g.game });
scene.onLoad.add(function() {
// シーンが読み込まれたときに行う処理
var rect = new g.FilledRect({
scene: scene,
cssColor: "red",
width: 200,
height: 200,
x: 50,
y: 50,
touchable: true
});
scene.append(rect);
rect.onPointDown.add(function() {
rect.cssColor = "blue";
rect.modified();
});
rect.onPointUp.add(function() {
rect.cssColor = "red";
rect.modified();
});
});