タイトルで述べたように、easeljs は私にとって非常に新しいものですが、フレームワーク Easeljs を使用して、キャンバスの私のケースのスプライトシートのようなオブジェクトにクリック イベントまたはイベント リスナーを追加する方法はありますか?
私はかなり多くの調査を行ってきましたが、まだ運がありません。
タイトルで述べたように、easeljs は私にとって非常に新しいものですが、フレームワーク Easeljs を使用して、キャンバスの私のケースのスプライトシートのようなオブジェクトにクリック イベントまたはイベント リスナーを追加する方法はありますか?
私はかなり多くの調査を行ってきましたが、まだ運がありません。
SpriteSheet は、Sprite (以前のバージョンでは BitmapAnimation) を描画する方法を記述した単なるデータ形式です。
これは、GitHub リポジトリ (github.com/CreateJS/EaselJS/) にあるhttp://createjs.com/Demos/EaselJS/SpriteSheet.htmlの例から取られた SpriteSheet の例です。
var data = new createjs.SpriteSheet({
"images": ["images/sprite.png"],
"frames": {"regX": 0, "height": 292, "count": 64, "regY": 0, "width": 165},
"animations": {"run": [0, 25, "run", 1.5], "jump": [26, 63, "run"]}
});
それができたら、スプライトを定義できます。
var sprite = new createjs.Sprite(data, "run");
stage.addChild(sprite);
// In earlier versions (0.6.0 and below), you can not specify a start frame/animation
sprite.gotoAndPlay("run");
これにより、スプライトがステージに追加され、その「実行」アニメーションが再生されます。マウスクリックを追加するには、次を使用します。
sprite.on("click", handleClickFunction);
// Earlier versions (0.6.0 and below) require the use of addEventListener, which still exists in 0.7.0, but is less friendly
sprite.addEventListener("click", handleClickFunction);
マウスの動作の詳細については、EaselJS Web サイトのチュートリアルを参照してください。 http://createjs.com/tutorials/Mouse%20Interaction/