CreateJSにはマウスイベントを管理する機能が備わっています。簡単なインタラクションの実装例を通して学習していきましょう。

マウス座標

ステージ上のマウス座標はstage.mouseXとstage.mouseYプロパティーから取得することができます。

// マウス座標を取得する
var mx = stage.mouseX;
var my = stage.mouseY;

マウスに追随してシェイプを移動させてみましょう。マウス座標はリアルタイムで変動するので、tickイベント内で処理するといいでしょう。

// ステージを作成
var stage = new createjs.Stage("myCanvas");

// オブジェクトの作成
var shape = new createjs.Shape();
shape.graphics.beginFill("DarkRed");
shape.graphics.drawCircle(0, 0, 40);
stage.addChild(shape);

// tick イベントを登録する
createjs.Ticker.addEventListener("tick", handleTick);

function handleTick(event) {
  // マウス座標を取得する
  var mx = stage.mouseX;
  var my = stage.mouseY;
  // シェイプをマウスに追随させる
  shape.x = mx;
  shape.y = my;

  // 画面を更新する
  stage.update();
}

次の記事へ