表示モード

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

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

ポイントイベント ​

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

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

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

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

javascript
rect.touchable = true;
rect.pointDown.add(function() {
  rect.cssColor = "red";
  rect.modified();
});
rect.pointUp.add(function() {
  rect.cssColor = "gray";
  rect.modified();
});
rect.touchable = true;
rect.pointDown.add(function() {
  rect.cssColor = "red";
  rect.modified();
});
rect.pointUp.add(function() {
  rect.cssColor = "gray";
  rect.modified();
});

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

javascript
rect.pointDown.add(function (ev) {
  var x = ev.point.x;
  var y = ev.point.y;
  ...
});
rect.pointDown.add(function (ev) {
  var x = ev.point.x;
  var y = ev.point.y;
  ...
});

追加した引数 ev にイベントの情報が格納されています。この変数には以下のプロパティがあります。

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

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

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

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

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

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

javascript
var scene = new g.Scene({ game: g.game });
scene.loaded.add(function() {
  scene.pointDownCapture.add(function(ev) {
    var size = 20;
    var 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);
  });
});
var scene = new g.Scene({ game: g.game });
scene.loaded.add(function() {
  scene.pointDownCapture.add(function(ev) {
    var size = 20;
    var 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);
  });
});

sample11