Menu

Unity3D – AR Augmented Reality using Vuforia | GUI Setup – GUI Buttons| Free Demo Project | Part 2

0 Comments


In this part, we’ll be setting up GUI for our project. We’ll setup two types of GUIs,

  1. Fixed GUI (On Camera GUI)
  2. Movable GUI (World space GUI)
AR Vuforia – GUI Types
Left: Fixed
Right: Movable

Links to the scripts, assets, animator controllers used in the project and full demo project itself are given below, so don’t worry.

Background:

I assume that you’ve your basic Vuforia – AR setup already done. If not, click HERE to learn how to setup Vuforia AR.

Steps:

  • Download a free 3D character model that i used in this demo project HERE
    • Or download any 3D Character model, or any model having animations
  • Download the animator controller HERE that i used in this project and import it
    • Or create a new Animator Controller and make some animation states and transitions among them based on an Integer parameter “State”
AR Vuforia – Animator Controller

Note: You may also need to assign each animation state, see screenshot below

AR Vuforia – Animator Controller – assign animation states
  • Create a C# Script, named “PlayerInput.cs”
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerInput : MonoBehaviour {

	public void UpdateState () {
		if(GetComponent<Animator> ().GetInteger ("State") == 7)
			GetComponent<Animator> ().SetInteger ("State", 0);
		else
			GetComponent<Animator> ().SetInteger ("State", GetComponent<Animator> ().GetInteger ("State") + 1);
	}
}

You can also download this script HERE and import it in your project.

  • Drag your 3D Character in scene and place it as a child of your AR Image Target
  • Assign the script “PlaterInput.cs” and Animator Controller “Devil” to this GameObject
  • Make this button call function “UpdateState” in “PlayerInput.cs”
Steps (Fixed GUI):
  • Make a GUI canvas and inside this canvas, create a button
  • Run it on PC (with a camera) or run it on a mobile device and bring Image Target in front of the Image Target, you’ll see the 3D Character, now you can use your GUI to switch animation states
  • You’re done!
Steps (Movable GUI – On top of Image Target):
  • Make a GUI canvas and inside this canvas, create a button
  • Make this canvas a child of Image Target and Change its Render Mode to “World Space”
  • Change its position and size and rotation so that, the button is a little above and it faces the top of Image Target

AR Vuforia – Movable GUI Buttons
  • Run it on PC (with a camera) or run it on a mobile device and bring Image Target in front of the Image Target, you’ll see the 3D Character, now you can use your GUI to switch animation states
  • You’re done!

Watch this tutorial step by step on YouTube HERE

Download full demo project (with scripts and assets) HERE

Tags: , , , , , , , , , , , , , , , , , ,

Leave a Reply

avatar
  Subscribe  
Notify of
F