Custom Image Cursor for Containers

I don’t see any ability to set a custom cursor image other than to do this:

let c1 = new PIXI.Container();
c1.interactive = true;
c1.buttonMode = true;
c1..defaultCursor = "url('./img/cartoon-pointer-96x96.png'), auto";

This works to display a custom image on mouse over of the container but is a poor choice for several reasons:

• it doesn’t use any app code that may be performing loading and so this image may or may not be ready as the app loads
• cannot set the anchor point within the image (so the image for the cursor can’t be set to a particular spot within the image)
• the image cannot be scaled if one is honoring a responsive WebGL environment
• cannot apply any shaders on the cursor

I suppose this isn’t so much of an issue as it is for a RFE since it is clearly not a show stopper. But it really would be nice to have since it would allow an app to maintain a consistent look-and-feel for the app cursor(s) as well.

😃

Arron

[andrewstart]

Given that your example has defaultCursor, I am guessing that you are using an older version of Pixi. Since version 4.3.0, you would set cursor modes globally, and then an individual container would be set up to use a specific mode:

const interaction = myRenderer.plugins.interaction;
interaction.cursorStyles["pointer"] = "url('./img/cartoon-pointer-96x96.png'), auto";
let c1 = new PIXI.Container();
c1.interactive = true;
c1.cursor = "pointer";

However, you can also use callbacks instead of CSS:

const cursor = new PIXI.Sprite();
const interaction = myRenderer.plugins.interaction;
interaction.cursorStyles["default"] = (mode) => {
    //mode parameter is the cursor mode, giving you the option of one callback for all mode changes with a switch statement, or separate callbacks for each mode
    cursor.texture = PIXI.Texture.fromFrame("defaultCursor");
}
interaction.cursorStyles["attack"] = (mode) => {
    cursor.texture = PIXI.Texture.fromFrame("attackCursor");
}
interaction.on("pointerover", () => {
    //mouse is now on stage
    cursor.visible = true;
});
interaction.on("pointerout", () => {
    //mouse left stage
    cursor.visible = false;
});
interaction.on("pointermove", (event) => {
    //update cursor position on each move
    cursor.position.set(event.data.global);
});
let c1 = new PIXI.Container();
c1.interactive = true;
c1.cursor = "attack";

[ArronFerguson]

Andrew, thanks for your response and your time. I was using Pixi version 4.3.4 but there is no such property cursorStyles of the interaction object of this version of Pixi and so this causes an error.

Just downloaded 4.5.4 and there is that property (so no errors) but when I assign my container’s cursor to anything other than ‘default’, ‘wait’, or any of the predefined cursor types, no image shows up. I’ve tried:

cursor.texture = sprites.arron.texture;
cursor.texture = PIXI.Texture.fromImage("./img/cartoon-pointer-96x96.png");

No errors, but no image used as a cursor either. Did a console.log and the texture seems to be there and is loaded. Is there any sort of requirements for the image used as a cursor? A certain set of dimensions? File format? Transparency, no transparency? Indexed vs. True color?