question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom Image Cursor for Containers

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:21 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
andrewstartcommented, Aug 19, 2017

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";
1reaction
ArronFergusoncommented, Aug 21, 2017

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Custom Image Cursor for Containers · Issue #4238 · pixijs/pixijs
This works to display a custom image on mouse over of the container but is a poor choice for several reasons:.
Read more >
Colored Containers cursor
Classic shaped cursors are so outdated. In this cursor pack, the cursor and pointer are made from different colorful shapes. Colored Containers Cursor....
Read more >
Custom Cursors & Image Hovers | Can I Recreate It? - YouTube
In this episode of Can I Recreate It In Elementor, we take a look at MTG, a interior design company in France. Learn...
Read more >
How to Make a Custom Mouse Cursor with CSS and JavaScript
In this article, I will be explaining how to make a custom mouse cursor. By the end of this article you will learn...
Read more >
Creating a custom mouse cursor with CSS - LogRocket Blog
Learn how to use CSS to create custom cursors to engage your users and create a memorable, immersive experience for them on your...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found