How do i make a custom cursor to be on top of a UMG Widget?

Development Programming & Scripting UI
, , , , ,
1

Hello, i created a custom cursor using the Canvas on my GameHUD. I also create an UMG Widget, but to my surprise the Canvas layer is behind the UMG layer. How do i set that custom cursor to be on top?

2

You have 2 options:

  1. Use Slate (or UMG) and its SCanvas layout to draw and position your custom cursor.
  2. Use source build solution for custom hardware cursor. I shared one on forum: [ TUTORIAL / C++ Advanced ] Custom hardware cursor loading for Win and Mac - Community & Industry Discussion - Unreal Engine Forums
3

Thank you, i will try it out ! :slight_smile:

4

@TimeGS, can you tell about a first option wider?

5

SCanvas lets you to draw any widget at defined coordinate on the screen. So you create cursor image inside SCanvas slot (do that after you create all widgets so cursor will be on top) and every frame do following steps:

  1. Check for mouse cursor coordinates and if they change do next step.
  2. Change SCanvas cursor image slot’s Position attribute to new mouse coordinate

Also make sure to recreate cursor slot every time you create new widget so new widget will not overlap your cursor

6

Another way to create cursor, you can :

1.Create a new widget called Mouse Cursor(or anything else).

2.Put your cursor image into Root Canvas, define a size to it

3.Align image to center of canvas (Anchor ->Center, Pivot → X=0.5 Y=0.5, Position= 0,0 )

4.Call “Create Widget” node & “Add To Viewport” node once in other BP such as HUD BP or Character BP when game start.

5.Don’t forget to set ZOrder in AddToViewport node to a large number that always greater than your amount of widgets exist at same time.

6.Save this widget reference to a variable.

7.Set widget’s position to mouse position use “Set Position In Viewport” in Event Tick.

Advantages:

You don’t need to create cursor image in every widget. (Less work and easy to modify)

You can use HUD BP to set cursor position, apply HUD class to Game Mode so that you could assign custom cursor to specific level.

7

Thanks for this. For anyone wondering, this is how it looks:

http://i.imgur.com/Dx3J9oz.png

  • used the top left as the anchor.
8

Thanks, this works great but of course there is quite a bit of lag.

For my game this isn’t that much of a show-stopper so this solution works great as-is.