Mouse cursor png

[Daria K]

Hello, I have this weird problem, I am trying to add a specific cursor png for my game. I couldn't find any solutions on how to do it with phaser, so I did it with css for the specific div, but somehow it works for the first three seconds, but when I hover a button in the game the png disappears, on reload it shows up again, and when I hover a button it disappears again? Is there a way to do this with phaser? Am I missing something?

Thanks!

[VitaZheltyakov]

Use code:

//------------------------ Изменение курсора при ховере ----------------------//
function hover(element){
	// Курсор меняем только для десктопа
	if (Phaser.Device.desktop) {
		element.events.onInputOver.add(function() { this.game.canvas.style.cursor = "url('images/cursors/hand.png'), pointer"; }, this);
		element.events.onInputOut.add(function() { this.game.canvas.style.cursor = "url('images/cursors/arrow.png'), default"; }, this);
	}
};
//----------------------------------------------------------------------------//

//---------------------- Сброс ховер-эффекта ---------------------------------//
function hoverReset(){
	if (Phaser.Device.desktop) this.game.canvas.style.cursor = "url('images/cursors/arrow.png'), default";
};
//----------------------------------------------------------------------------//

 

[ShimShamSam]

If you use Element.requestPointerLock, the mouse is hidden by default. Then you can listen to the mousemove event and use the e.movementX and e.movementY events to manually move whatever sprite you want to represent the mouse. The added benefit is now the user's cursor can't accidentally move outside your game's canvas. Though, depending on the type of game, this may not be desirable.