Akashic Engine 逆引きリファレンス

クリック・タップできるようにする

エンティティをクリック・タップできるようにするには、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();
  });
});

関連情報