Journal 137 — Unity App Development, AR Demo Add UI

Objective: To add animation scripts and UI callouts

In the previous article, I added the animations, but none of the UI and scripting was added. In this article, I will fix all the animation transitions, hook up the UI buttons, and add an example callout that pops up on the animation.

We can first make a new UIManager script and attach it to the Canvas.

In the UIManager script, we can have two functions to advance the animations and rewind them.

On the UI Canvas, we can update each button to refer to the UIManager script for the Next and Previous functions.

Now back in the animations, we need to be able to reverse the animations, so we need to go from horse-to-muscle and muscle-to-horse. We can do this by first copying the original animations.

Then change the animation speed to -1, which reverses.

As you see in the above script, there are several if-then conditions to check for each animation. It would be more efficient to use a state-machine with a simple integer value to change the animation.

This is the updated script.

Now, we can test this in a build.

Next, we want to update the UI to show a callout on the horse model. We can create a 3D sphere and place near the back of the horse where the muscle and bone animations change.

From there, we can create a new UI Canvas that is set to render with the ARCamera.

Then, we can create a UI Image with a UI Text object and move it to the right of the screen.

On the label, we can add a new component called the Line Renderer, which will draw a line between two positions.

In a new callout script, we will set the start and end width, and add a reference to this Line Renderer and the target object.

Now, let’s test this.

To finalize this, we want to only show the callout when the muscle anatomy shows, and otherwise the callout is inactive. Since the callout is inactive, we can’t add code there to turn the object itself active or inactive, because when inactive, the code won’t run. So, we can address this by changing the currentAnim variable into an auto property. Then, when we set the currentAnim value to 1, we can also enable or disable the callout.

Now, let’s see the results.

Thank you for your time!