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

Haxe
#1

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

#2

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.x--;
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.

#3

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?

#4

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.

#5

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