[Solved] How to get the Mouse Position in HTML5 target?

What is the proper way to get the stage mouse coordinates in HTML5?

I was using this code (which I am calling in each frame):

currentMouseX = Std.is(Lib.current.stage.mouseX, Float) ? Lib.current.stage.mouseX : 0;
currentMouseY = Std.is(Lib.current.stage.mouseY, Float) ? Lib.current.stage.mouseY : 0;

It works great for the Flash target, but in HTML5 is lagging a lot, like over 1 second or something. I’ve tested both in Chrome and Firefox. I have to mention that there is a lot going on, so it’s part of a big code base

I’ve been optimizing this game for a week now. In Flash, never went below 60 FPS, even when it was not optimized. For the HTML5 target, it had ~20-25 fps, then after I did a lot of changes, now goes to ~45 fps. Then I realized that I could use the -Ddom flag, and now has about 57 fps. Awesome!

However, the mouse is still lagging a lot. I’m 100% sure it’s not the game itself, because I did a test like this:

mySprite.y = currentMouseY;

And the object moves very smooth in the x direction, but very laggy on the Y (which is me moving the mouse).

One thing I have to mention: I’m not using any MouseEvent.MOUSE_MOVE listeners.

Ok, I’m getting closer. I tested using a mouse event:

Lib.current.stage.addEventListener(MouseEvent.MOUSE_MOVE, stageMouseMove);
private function stageMouseMove(e:MouseEvent):Void {
	currentMouseX = Math.floor(e.localX);
	currentMouseY = Math.floor(e.localY);

and that didn’t fixed it. However, I noticed that the mouse coordinates do not update ONLY if the mouse is over a Tile and/or Tilemap. It works fine if the mouse is over a Sprite, TextField, etc

Is this expected behavior or somehow the Tilemap doesn’t pass any mouse events?

Ok, so I finally figured it out.

It seems that Tilemap and Tile do not listen to mouse events. So I ended up adding a black rectangle with very low opacity (almost invisible) over the Tilemap.

I used blackRectangle.alpha = 0.01 because it needs to have the visible attribute set to true in order to work, and it’s low enough that you can’t really see it with the naked eye.

The Tilemap API is meant to behave similar to Bitmap in this regard. You need to wrap a Tilemap in a Sprite in order to cause it to hit test.

I should double-check that this is how it works, if not, this is a minor bug we’ll want to fix.

If you need a hit-test area, try using graphics.beginFill with an alpha of 0 and draw a rectangle, we should respect that for hit-testing, while not rendering it. I think alpha = 0 on a visible object should also trigger hit testing but not render