クリックできるようにする

このページのサンプルコードをダウンロード

# ポイントイベント

エンティティの touchable プロパティを true にすると、ゲーム画面のタップやクリックなどのユーザ操作を検出できるようになります。 Akashic Engine ではユーザがタップやクリックするとポイントイベントが発生します。ポイントイベントを受け取るトリガーには以下の 3 種類があります

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

以下は矩形エンティティ rect にポイントイベントを受け取るハンドラを設定して自身の色を変える例です。

rect.touchable = true;
rect.onPointDown.add(() => {
  rect.cssColor = "red";
  rect.modified();
});
rect.onPointUp.add(() => {
  rect.cssColor = "gray";
  rect.modified();
});

ポイントイベントが発生した座標を取得するには、トリガーに渡す関数に引数を追加します。例えば、矩形エンティティ rect の onPointDown トリガーの座標を取得するには、以下のようなコードになります。

rect.onPointDown.add(ev => {
  const x = ev.point.x;
  const y = ev.point.y;
  ...
});

追加した引数 ev にポイントイベントが与えられています。この変数には以下のプロパティがあります。

以下は矩形エンティティ rect を指やマウス操作で移動するコード例です。

rect.onPointMove.add(ev => {
  rect.x += ev.prevDelta.x;
  rect.y += ev.prevDelta.y;
  rect.modified();
});

エンティティに重なりがあり、その両方がポイントイベントを受け取れる状態にある場合は、最前面に表示されているエンティティがポイントイベントを受け取ります。

シーンオブジェクトの onPointDownCapture, onPointMoveCapture, onPointUpCapture トリガーを利用すると、配置されているエンティティとは無関係に、シーン全体でポイントイベントを取得できます。これらのトリガーはシーン上にイベントを受け取るエンティティが存在していたとしても常に呼び出されます。

以下は、画面に指が触れた時、もしくはマウスのボタンが押されたときに、その座標に矩形エンティティを配置するコードです。

const scene = new g.Scene({ game: g.game });
scene.onLoad.add(() => {
  scene.onPointDownCapture.add(ev => {
    const size = 20;
    const rect = new g.FilledRect({
      scene: scene,
      x: ev.point.x - size / 2,
      y: ev.point.y - size / 2,
      width: size,
      height: size,
      cssColor: "blue"
    });
    scene.append(rect);
  });
});