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!

--

--

--

An Engineering Manager consultant who is seeking additional skills using Unity 3D for game and application development.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Getting Started with React.js

Introduction to List Methods in Python

Pods/Flipper(React-Native Compiler Error )

Hosting an Angular application on GitHub Pages using Travis CI

PWA Service Worker Tips — Angular Material Icons

Four Important Lessons I Learned When I Worked on a Large Web Development Project

Project Number 4: A Single-Page JavaScript Application

Bootstrap in Create React App Typescript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chris Nielsen

Chris Nielsen

An Engineering Manager consultant who is seeking additional skills using Unity 3D for game and application development.

More from Medium

Journal 138 — Unity App Development, AR Demo Asset Bundle Option

A Series On Creating Immersive Audio in Unity with Custom Wwise Scripts

Diverging from Base Enemy Class

Automate Player Input with Unity Test Runner and NSubstitute