Custom mouse in twine

Authoring Twine
1

Twine Version: 2

I have been trying to create a custom cursor for my game, and I need some help. I need some help using the animated cursors from this zip file.
jellies.zip (23.6 KB) and I need help

2

Hi there!

Normally, you’d handle that in the StyleSheet with the rule:

* {
    cursor: url('Cursor-URL-here');
}

(this would apply the cursor to the whole project - if you want it to look differently for links/buttons/element, you’d need to add cursor to the relevant element too)

What have you tried so far?

3 
  cursor: url("https://i.ibb.co/qL9F4jsz/Regretevator-Fish-cursor-Sweezy-Cursors.png") 16 16, auto;
}

a:hover, 
button:hover, 
input[type="button"]:hover, 
input[type="submit"]:hover {
  cursor: url("https://i.ibb.co/vCHXSFnM/Regretevator-Fish-pointer-Sweezy-Cursors.png") 16 16, pointer;
}

and

.pointer,
.help,
.wait,
.copy,
.alias,
.move {
  cursor: url('images/jelly-cursor.png'), pointer;
}
4

Do you have an issue with both blocks of code? Or only the online one? Or only the local one?

5

both of them

6

aight. so a couple of things:

  • Harlowe doesn’t use regular elements in its HTML. You will want to use the Inspect Page function of your browser to find the correct ones to target.
    Ex: a links are actually tw-link
    code block 1 was tested with tw-link instead of a and it worked
  • Twine doesn’t deal well with local URLs of assets when testing/playing in-app. Better to export the file, then open the HTML file.
  • If there is still an issue:
    • check that the classes indicated in the code block 2 are being used in the project
    • check that the URL is correct vis-Ă -vis the HTML file + typos + upper/lowercase (it’s case sensitive)

That should be fixing the issues you have :crossed_fingers:

2 Likes