The cursor: default, pointer, grab, grabbing

Phaser 3
1

One makes objects interactive with setInteractive().

  1. Apparently this code can only be executed once on an object? Afterwards have to set
    this.setInteractive({ draggable: false, cursor: "pointer" })

  2. doesn’t seem to work (?)
    this.input.cursor = "grab"

  3. this does work but it doesn’t seem proper (default / scene scope…) ?
    scene.input.setDefaultCursor("grabbing")

More on this here, but it seems dated:
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/cursor/

  1. Additionally I wonder why my cursor resets when clicking:
    tree-pointer-change-to-default-why
2

No good way for this, I guess. Try

var input = this.input;

input.on('dragstart', function () {
    input.manager.setCursor({ cursor: 'grabbing' });
});

input.on('dragend', function () {
    input.manager.resetCursor({ cursor: true });
});
3

I think that may be best as long as you avoid setting per-game object cursors (e.g., in setInteractive()), which would override the default cursor.

4

Hi,

i got a similar problem.
I’m using this code on interactive elements:

            this.on('cell.over', function (cellContainer, cellIndex, pointer) {
                this.scene.input.setDefaultCursor('url(images/system/cursor_hero.png), pointer');
                this.glow( cellContainer );
            }, this)

It works. But in network-manager i see each time the cursor is changed to this image, a new request to my website:
image

Can i set an CSS-Class for this cursor style?
I cant find any solution to give the page a default cursor style for each different cursor state.
Currently i only apply this via css:

html, body {
    cursor: url(/images/system/cursor_normal.png) 0 0 , default;
}

The same way i want to say “use this image if cursor change to ‘grabbing’ or ‘moving’ or what ever”

:slight_smile:
Is this somehow possible?

Thx!
Greetings.

5

You could do

canvas.normal { cursor: url(normal.png); }
canvas.pointer { cursor: url(pointer.png); }

const { classList } = this.game.canvas;

classList.remove('normal');
classList.add('pointer');

But I don’t if that will change the network activity at all. On a dev web server with caching disabled I think multiple requests are normal.