Made in UE V4.11.1
Interaction with the environment is one of the core components of any game, and for the point and click adventure, the heart of interaction is the hotspot. It is a zone in the environment or on screen that the player will literally point and click to, and along with general navigation is the main form of player input into the game world.
Here we will discuss how to create one of the first components of a classic hotspot; the mouse roll over. Our goal will be to create a simple system for displaying the name of an object on screen, and changing the cursor to indicate what type of interaction will be performed by clicking that object. Displaying the name can be handled with several different methods, using widgets or 3D widgets, but for our purposes we will be using the HUD system. I’ll be using a new project, starting with the Top Down blueprint template and working within the default “TopDownExampleMap”. Let’s get started.
I’ll create a new folder and rename it to “HotspotTutorial”, and this is where I will be keeping all of the assets for this mechanic. I’ll be making a new blueprint class within that folder, selecting “Actor”, and then renaming that to “hotspot”. Opening the new blueprint, let’s set up an object to mouse over. In the components tab, click “add component”, then scroll down and select “cube”, and then rename it to hotspot. This will give us our object to be moused over, but you can use any shape or model you see fit. Cubes work well because they can be placed over models in scene and hidden during gameplay, but how you will approach models and scene construction are outside of the scope of this tutorial.
Setting up events
With our model created, we can get into the event graph and set up some scripts. We will want to specify the events that will trigger this mechanic, and for a rollover there are only two; when the cursor is over the hotspot and when it has left the hotspot. With the component hotspot selected, we’ll right click in the event graph and add the events “OnBeginCursorOver” and “OnEndCursorOver”.
Changing the cursor
We want to change the mouse cursor on the mouse over and on ending the mouse over, so next add a pair of “set current mouse cursor” to the blueprint. Add “get player controller” as well, and use that as a target for both set mouse cursors. Each set mouse cursor has it’s own drop down to select which cursor to use, and for the end cursor over, we want to go back to the default cursor, so in that drop down, select “Default”. For begin cursor over, we want to be able to set a custom cursor on a per hotspot basis, so drag the pin away from current mouse cursor, and promote it to a variable. Rename the variable to “Mouse over cursor”, and make it public so it can be set in the details window in the level.
You can test the blueprint now by a hotspot to the scene, and setting the variable “mouseover cursor” to which ever you like from the drop down. I made two hotspots, renaming one to “Hotspot_cube1” and the other to “Hotspot_cube2”, and setting the mouse over cursors for each to “Hand” and “Grab hand closed” respectively. Testing the game, the cursor changes to the assigned mouse over cursor when hovering above each cube, and changes back to default upon exit, which is exactly what we want.
Displaying the object’s name
The next thing we will do is set up a system for displaying the name of the object. We’ll start by creating the HUD which will actually display the name on screen.
Next go to Edit → Project Settings, and under “Maps and Modes” find “Default Modes”, and expand the “Selected GameMode” list. Under “HUD Class”, change it to your newly created HUD blueprint.
We only want this HUD to display when the mouse is over the hotspot, so let’s get the hotspot talking to the HUD. In the HUD blueprint, create a new custom event, calling it “Mouse Over”. This event will carry information from the hotspot to the HUD about when to display and what to display. On this new event under its details tab, add two new inputs; a string called “Object name” and a boolean called “Show HUD?”. These two variables will be specified by the hotspot and sent to the HUD through this event, and will tell the HUD what text to draw on screen, and when to draw it. To get the HUD to display, add “Event Receive Draw HUD” to the blueprint. We only want the text to draw when “Show HUD?” is true though, so add a branch, and for its condition, link the node “Show HUD?” from the mouse over event.
Back in the Hotspot blueprint, create a new public string variable called “Object Name”, which will be set per hotspot. This string will then be sent to the HUD and displayed on screen.
Add “Cast to MyHUD” to the blueprint, wiring it in after set cursor after “OnBeginCursorOver”. Right click and add “Get HUD”, and for that’s target connect it to the “Get Player Controller”. The return value for Get HUD can then be wired in as the target for Cast to MyHUD.
Next, call the custom event we made in the HUD. Right click, search for “mouse over”, and add it to the blueprint. Make a copy of this so that you have one for EndCursorOver as well. Wire one “mouse over” to the BeginCursorOver chain and one to the EndCursorOver chain. The target will be the “As My HUD” node from the Cast To MyHUD. For each of these events, you link the object name node to “get object name” as set in the hotspot, which will send that name to the HUD. For “Show HUD?”, mark the one in the BeginCursorOver chain as true, and the one in the EndCursorOver as false, which will tell the HUD to start and stop displaying the text.
Back in the HUD blueprint, if “Show HUD?” is true, we want to draw the text, so after the branch, add “Draw Text”, making sure to select the one under HUD, not canvas. You can then pull the “Object Name” node from the mouse over event into the “Text” node on Draw Text.
Lastly we want to set the location on screen for the text to draw, and the easiest way to do that is to link it to the cursor’s location on screen. To do this, simply add a “Get Mouse Position”, using the return value from “Get Player Controller” as the target, and then link the Location X and Location Y nodes to Screen X and Screen Y. I’ll also change the Text Color to white and the Scale to 2, just to make them easier to see in game for testing purposes, but you’ll have to refine their appearance to meet your needs.
Now that the HUD and the hotspot are set up, we have a fully useable system for roll overs. Test this by adding some hotspots to your scene, changing the variables “Object Name” and “Mouse Over Cursor” in the details tab for each hotspot.
With everything is functioning as expected, that’s it for this tutorial. We’ve gone over how to change the mouse cursor and how to display an object’s name using HUDs, and this should serve as a good basis for making your own point and click style hotspot roll overs.
I hope you’ve enjoyed this tutorial and thanks for reading.
-Nick Born, Developer with Ore Creative