表示モード

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

エンティティをクリック・タップできるようにするには、onPointDown トリガーを利用します。

凡例 ​

javascript
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画面から指が離れた。マウスのボタンが離された

それぞれのイベントに対応するトリガーを利用することで、イベント発生時に処理を実行できます。

下記のコードでは、クリック・タップ時に矩形が青色になり、クリック・タップが矩形から離れた時に矩形が赤色に変わります。

javascript
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();
  });
});

関連情報 ​