Pixi.js: Issue when changing cursor on interactive object

[alamboley]

Hello,

I'm using v5.2.4, issue is live on Firefox and Chrome (didn't test other browser).

// I change the cursor this way:
this.renderer.plugins.interaction.cursorStyles.default = "url('assets/cursor.png'), auto";
this.renderer.plugins.interaction.cursorStyles.pointer = "url('assets/cursor-over.png'), auto";


// the game is a point and click, so for some custom objects I change the cursor:
this.renderer.plugins.interaction.cursorStyles.default = "url('assets/cursor-" + id + ".png'), auto";
this.renderer.plugins.interaction.cursorStyles.pointer = "url('assets/cursor-" + id + ".png'), auto";

My issue is on an interactive Sprite, once pointerdown, I change the cursor but until I didn't leave the interactive area, the cursor isn't updated. Like if I need to change target for update.

Any ideas?

[andrewstart]

The cursorStyles dictionary is a map of [key: cursor mode; value: what to do when entering that mode], so if the cursor mode is already "pointer", then changing the value of the "pointer" mode won't change anything.

However, the dictionary is also freeform - you could have an "inspect" mode that is something like

this.renderer.plugins.interaction.cursorStyles.inspect = "url('assets/cursor-inspect.png), auto";

and it will be used automatically on rollover by any DisplayObject with a cursor property of "inspect".
Because the styles are triggered by rollover, changing the value of the default mode dynamically probably isn't what you want to do, as it would only be updated when rolling out of an object.

If you want to do something fancier than how cursors normally work in the DOM (cursor rendered via PixiJS, or cursors based on pointer up/down or an interaction blocked state, for example), then the cursor modes can be functions, e.g.

this.renderer.plugins.interaction.cursorStyles.pointer = () => { /* called _only_ when entering the "pointer" mode */ }

If you do this, then the InteractionManager won't modify the CSS cursor of the canvas element so that you have full control over cursor rendering and can do an uninterrupted set of default/over/down states.

As they may be useful for you, other things that you can do with the (rollover) cursors:

• Objects are treated as a bundle of CSS for the Canvas element's style property.

this.renderer.plugins.interaction.cursorStyles.timeMachine = {
    cursor: "wait",
    filter: "sepia(1)"
};

• If a cursor value is a string and the cursorStyles dictionary does not have a value for it, it is applied to the Canvas element as a cursor CSS value.

mySprite.cursor = "url('assets/cursor-inspect.png), auto";

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.