search

Valks-Games / io-game

Synchronizing various RPG elements over the network with sockets.
MIT License
20 stars 3 forks source link

Custom Cursor #40

Open valkyrienyanko opened 4 years ago

valkyrienyanko commented 4 years ago

Describe the feature you want added:

Cursor RPG Art?

steviegt6 commented 4 years ago

What kind of style are we going for?

valkyrienyanko commented 4 years ago

Anything will go for now.

steviegt6 commented 4 years ago

Alright. What size should it be? (In pixels.)

valkyrienyanko commented 4 years ago

I don't know much about cursors, use your own discretion.

steviegt6 commented 4 years ago

Okay.

steviegt6 commented 4 years ago

Untitled Will this do?

steviegt6 commented 4 years ago

(It's hard to see cause it's white)

steviegt6 commented 4 years ago

https://user-images.githubusercontent.com/27323911/67734938-bc9d3580-f9bf-11e9-933b-275b92ce5456.png

valkyrienyanko commented 4 years ago

I've tried both p5.js cursor function and the traditional CSS way and neither way work for custom cursors. Nothing is showing up, but when I do something like cursor: move; it works.

#defaultCanvas0 { /* p5.js Canvas */
  position: absolute; top: 0; right: 0; left: 0; bottom: 0;
  cursor: url(../assets/test.png);
}
steviegt6 commented 4 years ago

Try:

cursor: url('path-to-image.png'), auto;
steviegt6 commented 4 years ago

You can also try hiding the cursor and making an image follow where the cursor would normally be.

valkyrienyanko commented 4 years ago

Oh hey auto fixed it.

valkyrienyanko commented 4 years ago

I also found out that all png have to be 32 x 32 in size.

Larger sizes don't seem to work.

valkyrienyanko commented 4 years ago

Your white sword is very hard to see on the green canvas. I tried taking a screenshot but it would not screenshot the cursor with the image.

steviegt6 commented 4 years ago

Untitled Is that better?