[SOLVED] Custom cursor CSS

Help & Support
1

Hello,

I want to change style of my cursor but the problem is that I have no clue how to write the url location of the cursor.

It’s just a simple CSS script, like this:

html, body {
    /*cursor: pointer;*/
    cursor: url('../Assets/Materials/PlayerHUD/Texture/CrossHair.png');
}

The normal “cursor: pointer;” works fine but the cursor URL which is located in “Assets/Materials/PlayerHUD/Texture/CrossHair.png” doesn’t work.

I know -0 about CSS and HTML but really want to implement the custom cursor. Sorry for bothering about this.

2

Hi @JustVlaxx,

You can’t use asset paths like that. You have two options to make that work:

  • either host your cursor file to a remote server and use that remote absolute url
  • change the cursor using JavaScript in a PlayCanvas script and use the following method on your cursor asset to get the file url:

https://developer.playcanvas.com/api/pc.Asset.html#getFileUrl

3

Okay, so I get the fileURL but applying it to the cursor isn’t working directly:

var asset = this.app.assets.findByTag('ch');
var img = asset[0].getFileUrl();
document.body.style.cursor = img;

As well as:

var asset = this.app.assets.findByTag('ch');
var img = asset[0].getFileUrl();
var elementToChange = document.getElementsByTagName('body')[0];
elementToChange.style.cursor = img;

Neither of them seem to work, do I need to pass the URL to CSS, somehow, so that I can do:
pointer: url(img), default;

4

You are close, I think you only need to set the cursor to point to the url like this:

document.body.style.cursor = `url(${img}), default`;
2 Likes
5

Yeah, you are right. I might need to learn some CSS, HTML and JQuery if I want to mess with stuff like these.

This did solve it for me, thank you very much Leonidas!

1 Like