Augmented Reality Callouts
Objective: Create a callout for an AR Horse muscle when muscle is displayed.
Create a new Canvas, renaming to Screen_UI. Set up is shown below using Screen Space — Camera with a plane distance of 10. The default plane distance is 100 and is too far to be visible. Assign the AR_Camera as the Render Camera for the Canvas component. Set UI Scale mode to scale with screen size with a resolution of 1920 x 1080.
To the Screen_UI, add a child UI > Image, which is renamed Label. Add a Line Renderer component and a C# script, CalloutLabel.
Next add a UI > Text as a child of Label, changing the text field to the appropriate muscles name. Set the font size to around 46. The hierarchy should now appear as below.
The CalloutLabel script needs access to the LineRenderer, _line, and is assigned in the Label inspector as shown above. It also uses a property to define TargetObj game object variable. The Target_obj will be created later as part of the HorsePrefab. The line width is assigned in void Start(). The _line’s visibility is controlled by enabling and disabling _line based upon the showMuscle variable from the UIManager script.
The UIManager has been modified to be a singleton so that it can be easily accessed though the public Instance variable.
The UIManager needs access to the animator within the HorsePrefab, _anim, which is done using a tag. The Screen_UI is assigned to the _cameraCanvas in the inspector for the UIManager. In void Awake() _instance, part of the singleton code above, is set to this script, and the _cameraCanvas is disabled. The showMuscle bool will be assigned using the GetAnimState() method, which is called within void Update() if _anim is not null.
The UIManager has three methods. Two for the forward and next buttons to trigger animations. GetAnimState() is used to set the showMuscle and enable and disable the _cameraCanvas, which controls the callout Label and _line.
Create an empty object and name it HorsePrefab. Drag the Horse prefab from GameDevHQ Filebase to be a child of this object. Add a sphere as a child of the the Horse and name it Target_obj. This prefab object should have the hierarchy below.
Positioning the prefab for AR is tricky. If you double click on the AR Camera and zoom in something similar to that shown below will be seen. Center the Horse in the middle bottom of the pink square, and centered on the lenses.
The settings for the image above are shown below. To retain the rotation settings, the Horse must be a child of the tracked image prefab, i.e. HorsePrefab. Note the reduced scale required for AR. Note that the required tag is set to Horse.
The Target_obj position and scale is similar to that shown below.
Once the HorsePrefab is created drag it into the Assets Prefab folder and delete the object. Now assign the new prefab to ARTrackedImageManager on the AR Session Origin, as shown below.
Now build and deploy to an Android device. The muscle callout should appear only when the muscle is visible.
