An issue with input.useHandCursor = true

[toto88x]

Hi,

 

I have some sprites with useHandCursor = true, this way when my mouse is over them, my cursor becomes a hand. This works, except in one case described below.

 

1- I put my mouse over a sprite -> the hover works

2- I click on the sprite, which give velocity to the sprite and make it move -> the hover works, thanks to using game.stage.canvas.style.cursor = "default"

3- Once the sprit stop moving, I hover it -> the hover does not work. But if I hover it a second time, it works.

 

Here's a working example (click on a star, wait for the start to stop moving, then hover it).

 

How can I fix that? I want to simply show a hand everytime I'm over a star. 

Thanks! :-)

[jpdev]

Hi toto88x,

 

The problem is, that the useHandCursor only checks and changes the cursor when you move the mouse onto a star.

If the mouse is already on a star and the cursor has been set to default (by the listener-event) it won't change back to star.

 

So we do the check manually in every update function.

 

Change your code to not set useHandCursor, instead use this expanded update functions:

 

 

  function update() {

    var touchingStar = false;

    stars.forEachAlive(

      function(s){

        if (s.x > 300) s.body.velocity.x = 0;

        if (Phaser.Rectangle.contains(s.body, game.input.x, game.input.y)) {

          touchingStar = true;

        }

      });

    if (touchingStar) {

      game.stage.canvas.style.cursor = "pointer";

    } else {

      game.stage.canvas.style.cursor = "default";

    }

  }

 

 

What this does:

It checks if the mouse is over any of your stars. if it is, at the end of the function we set the cursor to pointer, if not then to default.

[toto88x]

Awesome, this works perfectly, thanks! :-)