custom_mouse_cursor.rst 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. .. _doc_custom_mouse_cursor:
  2. Customizing the mouse cursor
  3. ============================
  4. You might want to change the appearance of the mouse cursor in your game in order to suit the overall design. There are two ways to customize the mouse cursor:
  5. 1. Using project settings
  6. 2. Using a script
  7. Using project settings is a simpler (but more limited) way to customize the mouse cursor. The second way is more customizable, but involves scripting.
  8. .. note::
  9. You could display a "software" mouse cursor by hiding the mouse cursor and
  10. moving a Sprite to the cursor position in a ``_process`` method, but this
  11. will add at least one frame of latency compared to an "hardware" mouse
  12. cursor. Therefore, it's recommended to use the approach described here
  13. whenever possible.
  14. If you have to use the "software" approach, consider adding an extrapolation step
  15. to better display the actual mouse input.
  16. Using project settings
  17. ----------------------
  18. Open project settings, go to Display>Mouse Cursor. You will see Custom Image and Custom Image Hotspot.
  19. .. image:: img/cursor_project_settings.png
  20. Custom Image is the desired image that you would like to set as the mouse cursor.
  21. Custom Hotspot is the point in the image that you would like to use as the cursor's detection point.
  22. .. note:: The custom image **must** be less than 256x256.
  23. Using a script
  24. --------------
  25. Create a Node and attach the following script.
  26. .. tabs::
  27. .. code-tab:: gdscript GDScript
  28. extends Node
  29. # Load the custom images for the mouse cursor.
  30. var arrow = load("res://arrow.png")
  31. var beam = load("res://beam.png")
  32. func _ready():
  33. # Changes only the arrow shape of the cursor.
  34. # This is similar to changing it in the project settings.
  35. Input.set_custom_mouse_cursor(arrow)
  36. # Changes a specific shape of the cursor (here, the I-beam shape).
  37. Input.set_custom_mouse_cursor(beam, Input.CURSOR_IBEAM)
  38. .. code-tab:: csharp
  39. public override void _Ready()
  40. {
  41. // Load the custom images for the mouse cursor.
  42. var arrow = ResourceLoader.Load("res://arrow.png");
  43. var beam = ResourceLoader.Load("res://beam.png");
  44. // Changes only the arrow shape of the cursor.
  45. // This is similar to changing it in the project settings.
  46. Input.SetCustomMouseCursor(arrow);
  47. // Changes a specific shape of the cursor (here, the I-beam shape).
  48. Input.SetCustomMouseCursor(beam, Input.CursorShape.Ibeam);
  49. }
  50. .. note::
  51. Check :ref:`Input.set_custom_mouse_cursor() <class_Input_method_set_custom_mouse_cursor>`.
  52. Demo project
  53. ------------
  54. Find out more by studying this demo project:
  55. https://github.com/guilhermefelipecgs/custom_hardware_cursor
  56. Cursor list
  57. -----------
  58. As documented in the :ref:`Input <class_Input>` class (see the **CursorShape** enum), there are multiple mouse cursors you can define. Which ones you want to use depends on your use case.