Context Sensitive Mouse Cursor Tutorial for Unreal Engine 4

I couldn’t find any documentation or tutorials on doing something like this so I figured out a method myself and I thought I’d share it. If you know a better method please share! This will guide you through creating a context mouse that displays a chance of success if required.

Step 1 — Prepare Assets

Create or download your mouse cursor icons. There are some good resources on Deviant Art and the UE marketplace, or you can just google image search and find some icons. If you download them, you’ll probably need to edit them in a photo-editing tool. Make sure they’re png’s with transparent backgrounds set at the correct size. Standard is 24x24 or 32x32. I do not own the ones show in the pictures, I just downloaded them to use as placeholders so I don’t feel comfortable distributing them. Import the textures by clicking Import and navigating to the folder where you’re textures are stored.

Step 2 — Create Enum

Create an Enumeration list of your contexts by clicking Add New in the Content Browser and finding it under Blueprints dropdown. I named mine E_CursorModes. For our purposes, lets add a None(I specify this because if you don’t have it, it adds some annoying issues when setting up a map with the values.), Default, Attack, and Talk. You can add contexts you need here that you want to have a custom cursor.

Step 3 — Create Interface

Create a Blueprint Interface by right clicking in the content browser or Add New button and clicking on Blueprint Interface under the blueprint menu dropdown. Name it ContextMouseInterface, or whatever you’d prefer.

Name/rename the starter function to SetMouseContext, and give it these inputs:

• Context — E_CursorModes (or whatever the name of your enum you created in Step 2)
• Show Chance — Boolean
• Chance — Integer (or float, depending on how you’re showing your chance. I use integers so I don’t have to convert)

If you don’t need the Show Success chance functionality just add the Context — Enum input.

Step 4 — Create Mouse Widget

Create a user widget by right clicking in the content browser and selecting User Interface > Widget Blueprint. Name it ContextMouse or whatever you’d prefer.

Open it up in the editor and delete the Canvas Panel. Your hierarchy should look like the image below. The Overlay panel allows overlapping content, if you’re not using the Success Chance stuff, then you can just use the Size Box > Image hierarchy.

1. Set the size box Width and Height Override to 32x32.
2. Change the image brush to your default image so you can see it.
3. Add Textbox, set text to 99% and lower the font. I’m using Font Size 12. Name is SuccessChance and set isVariable next to name.

If you’re using larger or smaller assets, feel free to change the size box dimensions, but make sure it’s square. I wrapped mine in an overlay because I added a text box that shows additional information. Here’s what mine looks like.

Now you want your pointer to be pointing at the middle of the widget so click on the image, then in the details panel under render transform, change the translation to X:16, Y:16. It will look like like this:

Now adjust the translation of the textbox till it looks correct depending on where you want to place it. I set mine to X:46, Y: 6 to get the results shown above.

Step 6 — Add mouse widget functionality

Click on the Widget Event Graph.

We need to add the interface so Click on Class Settings up top, and in the details panel under Implemented Interfaces press Add and type in the name of your interface you created.

Press Compile. Under the My Blueprint tab, there should be a submenu for Interfaces with our Interface Set Mouse Context function. Right click and press Set Mouse Context. It should add it to the graph:

Next, create a MAP under Variables named CursorMap, set it to E_CursorMode: Texture2D. Save and Compile. Under default value add listings and set them to your modes and add the textures you want.

Now, create a new function by clicking the plus icon on the function submenu under My Blueprint tab. Name it ChangeCursor. Set it up like so:

Breakdown:

For our inputs we are basically copying the structure of the interface function. Our Enum, a boolean for Show Chance,and our chance percentage. Essentially we are using the context to get the texture we want and set it. Then we show or hide the SuccessChance based on the boolean. Pretty straightforward.

Back on the event graph, just wire the nodes up.

Step 7 — Set up Player Controller

Open your player controller in the editor. On your begin play event, use the Create Widget node, and select your Mouse Cursor widget you created. then drag off the return value and promote it to variable: CursorRef. Next, create Set Mouse Cursor Widget node. This will replace the cursor you choose with your widget. Drag your return value from the reference into the Widget pin. For the Enum dropdown, you can use default, however this will replace the default mouse which you might not want. I set mine to Eye Dropper since I won’t ever use it.

Now in your player controller defaults detail panel, search for “Mouse”, under default mouse cursor set it to whatever you set it to in the node. For me it’s eye dropper.

If you play your game, you should see your new default cursor

Now, for the last step in the Player Controller, add the ContextMouseInterface like we did with the widget and implement it. Then drag a Cursor Reference in to the graph and drag off it and send an interface Message, then hook up all the pins. Make sure it’s got that envelope on the right hand corner.

Step 8 — Send interace message from actor on cursor over.

This last step is pretty easy. Whatever actor you want to update the mouse, just use the Set Mouse Context message on the player controller on BeginCursorOver. Change the enum to the context you want and plug in the show chance stuff if required.

Then reset it on EndCursorOver

Here’s an example from my project where I hover my cursor over an NPC. If it’s hostile, it shows the attack cursor with a chance to hit, if it’s not hostile and the player has Dialog(I’m using the DlgSystem, check it out!) then it shows the Talk cursor.

Results:

I believe that’s everything. Hope someone finds it useful one day!