DMC1 _ Making virtual buttons in AR

Last time, we learned how to make virtual buttons.

First, download assets in our class website.

스크린샷 2016-06-04 오후 6.40.45.png

Now let’s create a new project.

스크린샷 2016-05-30 오전 10.31.05.png

And change the platform to iOS.

스크린샷 2016-05-30 오전 10.32.10.png

Go to the Player Settings, set your company name. And make sure to uncheck ‘Portrait’ and ‘Portrait Upside Down’.

스크린샷 2016-05-30 오전 10.34.41.png

스크린샷 2016-05-30 오전 10.33.32.png

And in Other Settings, set the Bundle Identifier.

스크린샷 2016-06-04 오후 6.46.11.png

Now our build setting is done, next we’ll going to import vuforia package.

스크린샷 2016-05-30 오전 10.43.51.png스크린샷 2016-05-30 오전 10.37.15.png

Now first thing we have to do is delete the main camera.

스크린샷 2016-05-30 오전 10.48.28.png

And we will bring the AR Camera. (vuforia>prefabs)

스크린샷 2016-05-30 오전 10.49.53.png

Next we have to fill out ‘App License Key’, so go to vuforia website. Copy your license key, and paste to the unity.

스크린샷 2016-05-30 오전 10.52.20.png

스크린샷 2016-05-30 오전 10.52.35.png

And then go to target manager page.

스크린샷 2016-05-30 오전 10.53.47.png

Click ‘Add Database’.

스크린샷 2016-05-30 오전 10.54.34.png

스크린샷 2016-05-30 오전 10.54.56.png

And we will add a target. Select single image, and browse the woodtag.jpg in our asset folder. Width is going to be 50.

스크린샷 2016-05-30 오전 10.55.50.png

Now we got our woodtag target. The target image should be under 2MB.

스크린샷 2016-05-30 오전 10.57.13.png

Download the database, and select ‘Unity Editor’ platform.

스크린샷 2016-05-30 오전 10.57.45.png

And bring the unitypackage to the virtualbuttonDL folder. Organization is important.

스크린샷 2016-05-30 오전 10.58.56.png

Now let’s import the package. And also bring the texture, materials and teapot prefabs.

스크린샷 2016-05-30 오전 10.59.58.png

Create a model folder, and drag teapot inside to that folder.

스크린샷 2016-05-30 오전 11.41.03.png

And in hierarchy, create an event system. (UI > Event System)

스크린샷 2016-05-30 오전 11.55.29.png

And in vuforia prefabs, bring ‘Image Target’ prefab, and place in 0,0,0.

스크린샷 2016-05-30 오전 11.57.03.png

And select our database.

스크린샷 2016-05-30 오전 11.58.44.png

And go to AR Camera, and make sure to face in top view. Rotation 90/0/0.

스크린샷 2016-05-30 오후 12.03.11.png

And add component in image Target. Search virtualButton Event Handler script.

스크린샷 2016-05-30 오후 12.06.54.png

The size is 5. And each of the element will be red/blue/yellow/green/brass.

스크린샷 2016-05-30 오후 12.08.34.png

Next, bring your teapot and drag it inside the image target.

스크린샷 2016-05-30 오후 12.16.04.png

And go to AR Camera, load database and check activate.

스크린샷 2016-05-30 오후 12.15.55.png

And test it.

스크린샷 2016-05-30 오후 12.20.39.png

Nice! And we will going to make buttons activate!

Create empty named ‘buttons’. Bring virtualButton prefab inside the buttons folder, and transform its size. And change its name red button. And drag the folder inside the Image Target folder.

스크린샷 2016-05-30 오후 12.26.17.png

And we will going to add component ‘virtual button behaviour’ script.

스크린샷 2016-05-30 오후 12.29.26.png

And duplicate three more buttons. To modify the position, you have to pull them out of the folder. Make them in right position, and drag them into the image target folder.

And the name should be red, blue, yellow, green. (lower case) The default color is brass.

스크린샷 2016-05-30 오후 12.35.07.png

스크린샷 2016-05-30 오후 12.44.19.png

Now we can change teapot’s color by clicking buttons!

Now I’m going to export to my iPhone!

스크린샷 2016-06-04 오후 8.13.53.png

KakaoTalk_Photo_2016-06-04-20-20-47_63.pngKakaoTalk_Photo_2016-06-04-20-20-43_68.png

KakaoTalk_Photo_2016-06-04-20-24-49_28.png

KakaoTalk_Photo_2016-06-04-20-24-50_13.png

So nice!!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s