top of page

Creating a Clickable Button in Unity

Making your augmented reality projects interactive can help bring them to another level especially if you are creating your project for eLearning purposes. Making a button that opens a web page URL is one of the easiest ways to make an AR project interactive. With this you can link to instructional videos, websites, and more, it is really all up to you. The process is not very complicated although it is quite tedious to complete. Here are the steps:


1. Create a new Cube object to your scene

2. Position and size your cube

3. Apply a texture to your cube by dragging and dropping it onto your cube object in the scene tab

a. If you do not have a texture to create a new one:

i. Create a new Material in your assets folder tab

ii. Import the image you would like to have as a texture into your assets folder

iii. Drag and drop the new image into the Albedo setting in the textures window

4. Decrease the Z aspect of the scale of your cube until it is as small as it will go until the texture disappears

5. Create a new script in your assets library

6. In your script create functions to open a webpage:


public void openLinkdn(){

Application.OpenURL ("https://www.linkedin.com/company/pathways-educational- services-inc./");

Debug.Log ("LinkedIn Open");

btnName = null;

}


7. Create an update function:


void Update () {

btnName = null;

if (Input.GetMouseButtonDown(0)) {

Ray ray = Camera.main.ScreenPointToRay (Input.mousePosition);

RaycastHit Hit;


if (Physics.Raycast(ray, out Hit)){

btnName = Hit.transform.name;

switch (btnName) {

case "L":

openLinkdn ();

break;

}

}

}


8. Make sure the name of your button corresponds to the switch case

9. Back in the unity scene window, drag and drop your script into your image target

10. When running your app your button should now be clickable and open a new window in your browser when clicked


Featured Posts
Recent Posts
Archive
Search By Tags
Follow Us
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square
bottom of page