表示モード

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

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

ポイントイベント ​

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

トリガー名内容
onPointDown画面に指が触れた。マウスのボタンが押された
onPointMove画面に触れた指が移動した。ボタンが押された状態でマウスが移動した
onPointUp画面から指が離れた。マウスのボタンが離された

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

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

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

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

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

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

プロパティ意味
ev.point.x,
ev.point.y		最後にonPointDownが発生した座標。座標系の原点はエンティティの座標
ev.startDelta.x,
ev.startDelta.y		最後にonPointDownが発生した座標から、現在のポイント座標までの移動量。ただしonPointDownイベントでは利用できない
ev.prevDelta.x,
ev.prevDelta.y		最後にonPointMoveが発生した座標から、現在のポイント座標までの移動量。ただしonPointDownイベントでは利用できない

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

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

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

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

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

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