EaselJS - Stage mouseover

Question

I recently discovered EaselJS, and I am trying to make a very simple canvas shooting game.

My canvas has 500px width and 500px height.

When the user's mouse goes into the canvas, a target moves along with the mouse, and it should be possible to shoot targets (which are bitmaps).

This should work very similar to some of the advertising games we see on many websites out there - "Use your mouse and touch X to win!" and the like.

However, I am stuck trying to do something very simple - Getting the target sprite to follow the user's mouse cursor.

I apologise in advance if there is something very trivial that I am forgetting or doing wrong. Here is my (Javascript) code:

<script>
window.onload = function()
{
  init();
}

function init() 
{

var canvas = document.getElementById("my_canvas");
var stage = new createjs.Stage(canvas);

//background picture
var background_sky = new createjs.Bitmap("sky.png");
stage.addChild(background_sky);

//target sprite picture
var target_sprite = new createjs.Bitmap("target.png");
stage.addChild(target_sprite);

target_sprite.x = 150;
target_sprite.y = 150;

stage.enableMouseOver(20);

stage.on("mouseover", function(e) 
{
   target_sprite.x = e.stageX;
   target_sprite.y = e.stageY;      
   stage.update();
});

stage.update();

}
</script>

If I am not mistaken, the previous code should make the target_sprite move to the mouse's coordinates, whenever the mouse enters the canvas area.

But it's not working.

The pictures are drawn, the mouseover event fires, but the target sprite only sometimes moves around - and to an unexpected (random?) position.

If I move the mouse to the target_sprite's location, it moves to the bottom left (recursively). And I'm not attaching a mouseover handler for the target_sprite - only for the stage.

Is it possible to attach a mouseover handler for the stage like this?

What could I be doing wrong?

Answer 1

I think you should use stagemousemove event instead of mouseover