Use target highlight prefabs with line renderers to create a line from user to selected target.
Selected targets can be highlighted in different ways – e.g. using a prefab to spawn a cursor on the target’s game object, blink the game object or HUD of the target in a color or play schematics. Using a prefab to highlight targets allows you to use additional visual cues via cursor prefab components.
In this tutorial, we’ll use a Target Selection Cursor: Line component to create a line between the user and target.
This tutorial is based on the 3D RPG Quickstart tutorials, but can be used for any kind of project.
Cursor Prefab #
All we need to do is make some changes to the cursor prefab that is used by the 3D RPG Quickstart tutorials.
You can find the Cursor prefab in Assets/Tutorial Assets/Prefabs/ – open it for editing (e.g. via double click on the prefab).
Line Renderer #
We’ll start with adding a Line Renderer component to the root Cursor game object. A line renderer is used to show a line in the game world.
Use the component menu to add a Line Renderer component.
We’ll now set up a few points for our line (they’ll be automatically adjusted in-game by the cursor component) and other line-related settings.
Positions #
Extend the Positions to get the list of added points, we’ll add a few to have a total of 5 points, we’ll need to change the Size for this.
- Size
Set to 5.
I’ll now list the Index and the X, Y and Z position used:
- Index 0
Set to X=0, Y=0, Z=1. - Index 1
Set to X=0, Y=4, Z=0.75. - Index 2
Set to X=0, Y=5, Z=0.5. - Index 3
Set to X=0, Y=4, Z=0.25. - Index 4
Set to X=0, Y=0, Z=0.
The line setup should now look like this:
Line Width #
The line is currently pretty thick – this is managed by the Width curve. You can e.g. have different widths along the line by adding multiple keys on the curve graph.
We’ll simply change the width to 0.2 by editing the added key. You can do this by right/context clicking on the small red dot on the red line in the graph:
Right/context click on the key and select Edit Key…
- Value
Set to 0.2.
Line Visuals #
We’ll continue with the remaining visual settings for the line.
- Use World Space
Enable this setting.
It also works fine with this disabled, but in this case the line can be influenced by the scale of the game object (e.g. coming from the combatant it’s mounted to).
Expand the Materials setting and change the Element 0 material.
- Element 0
Select CursorMaterial (or any other material you want).
Like with any other visual element in your scenes, the material handles the look and used shader of the line.
That’s it for the Line Renderer.
Target Selection Cursor: Line #
All that’s left to do is add the cursor component using the Line Renderer.
Use the component menu to add a Target Selection Cursor: Line component.
- Line Renderer
Select the Line Renderer component we just added to the same game object. - User Offset
Set to X=0, Y=1, Z=0.
Offset added to the line from the user’s position. - Target Offset
Set to X=0, Y=1, Z=0.
Offset added to the line from the target’s position. - Adjust Inline Positions
Enable this setting.
This’ll adjust the positions of the inner points (i.e. excluding index 0 and the last index of the line).
They’ll be adjusted according to the position placement along the Z-axis used as a scale from 0 to 1 on how far it is from the target (0 being at the target, 1 at the user).
And that’s it for the cursor prefab.
Save the changes and exit editing the prefab.
Target Highlight #
The Cursor prefab is already set up as a Prefab target highlight in the 3D RPG Playground tutorials, but in case you didn’t do that, here’s how this is done.
Open the Makinom editor and navigate to Battles > Target Settings.
Target Selection > Target Highlight #
Click on Add Highlight.
- Highlight Type
Select Prefab. - Prefab
Select the Cursor prefab. - On Child
Select Path.
The 3D RPG Playground places the cursor on a child object we define via a path. - Find Child
Set to: Cursor
This is the child object that’s used. - Local Space
Enable this setting. - Ignore Scale
Enable this setting.
Save Changes #
And that’s it – click on Save Settings to save the changes.
Testing #
Hit play and test the new line target selection highlight.
Great – there’s now a line connecting user and target!
You can further adjust the line to your needs, e.g. using a different material/shader, add more points on the line to make it ’rounder’, etc.
