Changing cursor to custom image

cocos2d-x JavaScript
#1

Hello,
I am developing a shooting game using cocos2d-html5 and I would like to change the cursor to a target. Can we do this with cocos2d-html5?
Thanks

#2

you could hide the mouse cursor, then add a sprite to follow the mouse position

you could change the cursor css, “cursor: url(image/pencil.cur);” but i think cursor is not centered around mouse position, in another word, the origin is at top left?

#3

Thanks, I will try to add a sprite to follow the sprite position. If that doesn’t work well, I will use CSS. I will post something as soon as I have something working.
Cheers

#4

Can you post how you hid the cursor in your game? That would be helpful, thank you.

#5

I just wanted to follow up with the answer in case anyone else searched for this in these forums.

You can hide the cursor, or change it by calling to the canvas tag via CSS. For example this will hide your cursor:

cc.canvas.style.cursor = "none";

There are also settings for crosshair, pointer, wait, etc. as well as the ability to use a custom cursor. Below are the options, some additional info here:
http://www.w3schools.com/cssref/pr_class_cursor.asp

URL - A comma separated of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used
auto - Default. The browser sets a cursor
crosshair - The cursor render as a crosshair
default - The default cursor
e-resize - The cursor indicates that an edge of a box is to be moved right (east)
help - The cursor indicates that help is available
move - The cursor indicates something that should be moved
n-resize - The cursor indicates that an edge of a box is to be moved up (north)
ne-resize - The cursor indicates that an edge of a box is to be moved up and right (north/east)
nw-resize - The cursor indicates that an edge of a box is to be moved up and left (north/west)
pointer - The cursor render as a pointer
progress - The cursor indicates that the program is busy (in progress)
s-resize - The cursor indicates that an edge of a box is to be moved down (south)
se-resize - The cursor indicates that an edge of a box is to be moved down and right (south/east)
sw-resize - The cursor indicates that an edge of a box is to be moved down and left (south/west)
text - The cursor indicates text
w-resize - The cursor indicates that an edge of a box is to be moved left (west)
wait - The cursor indicates that the program is busy
inherit - Specifies that the value of the cursor property should be inherited from the parent element