How To Create a Custom Cursor

This lesson will show you how to create a custom cursor that you can use in LiveCode. To use custom cursors you can set the cursor property.

If you want to modify one of the existing LiveCode custom cursors then take a look at the stack revCustomCursors by executing the following script in the message box:

go stack "revCustomCursors"

Create The Cursor Image

Create The Cursor Image

Create a 16x16 pixel image in your favorite image editing application. You can have black, white or transparent pixels.

Export as PNG

Export as PNG

Export your image as a 32-bit PNG, a PNG with transparency.

Import Into LiveCode

Import Into

Import your icon PNG file into LiveCode.

Set the defaultCursor

Set the defaultCursor

Set the defaultCursor to the id of the image you just imported. I created a button with the script you see here.

Try it

Switch to run mode and click the button. Your cursor should change to your imported icon.

4 Comments

Robert Cailliau

This is fine, but how does one set the pixel that is active?
It seems to always be the top left pixel, but I want it in the centre, as it is with, e.g. , the beachball.

Panos Merakos

Hello Robert,

The active pixel of the custom cursor is the value of the "hotSpot" property of the image you create the cursor from.

Kind regards,
Panos

Robert Cailliau

Thank you Panos, perfect. I should have spotted that...!
Add it to the Dictionary API page.

Panos Merakos

Thanks Robert - will do :)

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.