The cursor: default, pointer, grab, grabbing

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…) ?

More on this here, but it seems dated:

  1. Additionally I wonder why my cursor resets when clicking:

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 });

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.


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:

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”

Is this somehow possible?


You could do

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


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.