Category Archives: Digital Media Contents

DMC1 _ 3D Camera

In this class, we learned how to make 360 degree 3D camera app.

First take a simple video with 3D camera. We had a short class tour.

And bring the video to your computer. And I downloaded the movie texture assets.

So go to unity, import the ‘Easy movie texture Video’ unity package.

스크린샷 2016-06-19 오전 10.21.47.png

And also import cardboard sdk, demo package.

스크린샷 2016-06-19 오전 10.23.10.png

Drag your video to streaming assets folder.

And drag the demo_sphere to the hierarchy.

스크린샷 2016-06-19 오전 10.24.47.png

스크린샷 2016-06-18 오전 10.48.54.png

And double click the sphere. In Media Player inspector, write classTour to ‘Str File Name’.

스크린샷 2016-06-18 오전 11.22.09.png

Bring Cardboard Main camera and delete main camera.

Also we will going to add a Medai Player Sample Sphere GUI script.

I can see the video in 360 degree! So nice~

KakaoTalk_Photo_2016-06-19-10-32-00_30.png

DMC1 _ Lionflakes

Last time, we made another ar project.

Professor gave us a sheet of paper named ‘lionflakes’.

KakaoTalk_Photo_2016-06-18-22-02-34_87.jpeg

Prepare scissor and glue. We cut along the outer strong lines and glue it each side.

KakaoTalk_Photo_2016-06-18-22-02-36_29.jpeg

KakaoTalk_Photo_2016-06-18-22-02-37_71.jpeg  Looks like this.

Now let’s go to our unity, make a new project.

스크린샷 2016-06-13 오전 10.32.37.png

First, go to build setting and switch the platform.

스크린샷 2016-06-13 오전 10.34.42.png

Also make sure to uncheck portrait and portrait upside down.

스크린샷 2016-06-13 오전 10.34.29.png

And import the vuforia unity package.

스크린샷 2016-06-13 오전 10.35.11.png

I went to our class website and downloaded the lionflakes assets.

스크린샷 2016-06-13 오전 10.43.04.png

Delete the main camera.

스크린샷 2016-06-13 오전 10.46.39.png

And drag ‘ar camera’ from vuforia prefabs.

In the inspector, we have to fill out the ‘App License Key’. So let’s go to vuforia website and bring the key.

스크린샷 2016-06-13 오전 10.46.51.png

Copy this key, and paste it to unity.

스크린샷 2016-06-13 오전 10.48.37.png

And we will going to create a database named ‘arClassMultiTarget’.

스크린샷 2016-06-13 오전 10.49.14.png

Click ‘Add Target’.

스크린샷 2016-06-13 오전 10.49.57.png

We will choose ‘Cuboid’ type. The dimension is like this.

스크린샷 2016-06-13 오전 10.52.59.png

Now our flakesbox database has created. Let’s add a image.

If you double click the ‘flakesbox’, you can upload the image of each side.

스크린샷 2016-06-13 오전 10.53.11.png

스크린샷 2016-06-13 오전 10.56.45.png

스크린샷 2016-06-13 오전 10.57.00.png

If you double click the box, you can see the contrast of image.

스크린샷 2016-06-13 오전 11.01.13.png

Now let’s download our database, and make sure to select Unity Editor.

스크린샷 2016-06-13 오전 11.00.34.png

When you download the database, always organize clearly so that you can find the files easily.

스크린샷 2016-06-13 오전 11.02.42.png

Let’s import the package, and bring the assets also.

스크린샷 2016-06-13 오전 11.05.20.png

Load and activate your database.

스크린샷 2016-06-13 오전 11.19.25.png

And bring MultiTarget prefab from the vuforia prefabs.

스크린샷 2016-06-13 오전 11.20.38.png

Choose your database.

스크린샷 2016-06-13 오전 11.21.39.png

And transform its rotation.

스크린샷 2016-06-13 오전 11.23.47.png

Create a 3D cube, and rename it ‘wireframe’.

스크린샷 2016-06-13 오전 11.24.25.png       스크린샷 2016-06-13 오전 11.24.35.png

Change its texture to wireframe texture.

스크린샷 2016-06-13 오전 11.29.04.png

And bring a bowlspoons model to the scene.

스크린샷 2016-06-13 오전 11.35.55.png

And add texture inside and outside.

스크린샷 2016-06-13 오전 11.37.39.png

스크린샷 2016-06-13 오전 11.38.12.png

So if you test, you can see your bowl with spoon will rotate around your lionflakes.

스크린샷 2016-06-13 오전 11.40.14.png

I exported to my iPhone! So nice~

KakaoTalk_Photo_2016-06-18-22-02-38_71.png

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!!

 

DMC1 _ Making ‘start’ button, move to other scene

Last time, we’ve learned how to move to other scene, and made start butt0n.

First, I downloaded the script here.

http://db.tt/83pvo3oF

스크린샷 2016-05-23 오전 10.18.41

Now go to unity, create a new project.

스크린샷 2016-05-23 오전 10.26.19.png

After making a new project, we will make 3 scene.

  1. startscene
  2. scene1
  3. scene2

And create a new folder named ‘scenes’, and drag three scenes to that folder.

스크린샷 2016-05-23 오전 10.26.39.png

스크린샷 2016-05-23 오전 10.27.43.png

And also make scripts folder, and bring those scripts there.

스크린샷 2016-05-23 오전 10.30.56.png

Now let’s create a terrain and move your main camera’s location.

Then we’ll create a ‘text’. Go to GameObject > UI > Text.

스크린샷 2016-05-23 오전 10.39.55.png

스크린샷 2016-05-23 오전 10.40.03.png

You can change the font, and transform its size.

If you select overflow in Horizontal and Vertical Overflow, your font can get bigger whatever you want.

스크린샷 2016-05-23 오전 10.57.42.png

스크린샷 2016-05-23 오전 11.01.04.png

Now we will add a background music. Create a audio folder, and I downloaded a music in asset store. In Gameobject, click Create empty. And change its name ‘audio’.

Inside audio’s inspector, add a component ‘audio source’.

And choose the music you want, and check ‘Loop’.

스크린샷 2016-05-23 오전 11.08.53.png

Next, we will make a start button. Create UI > button.

스크린샷 2016-05-23 오전 11.31.33.png

Make a start button, and customize yourself.

스크린샷 2016-05-23 오전 11.33.42.png

You can make button transparent. Write ‘0’ in alpha.

스크린샷 2016-05-23 오전 11.35.27.png

Now we will add a script.

If you double click the loadonclick.cs script, you’ll see this.

스크린샷 2016-05-23 오전 11.39.47.png

Now drag the loadonclick.cs script to the ‘canvas’ inspector.

스크린샷 2016-05-23 오전 11.42.18.png

Go to Button inspector, you can find ‘On Click ()’. Select Canvas, and choose LoadScene function.

스크린샷 2016-05-23 오전 11.47.23.png

스크린샷 2016-05-23 오전 11.48.00.png\

If we click the start button, player goes to the scene1.

스크린샷 2016-05-23 오전 11.50.01.png

Next, we’ll import a character package. Uncheck roller and third person, and import.

Now save the startscene, and go to the scene 1.

Delete the main camera, and bring ‘fps controller’ into your scene.

Create a terrain, and make a cube. Add a box collider in cube. Check trigger.

스크린샷 2016-05-23 오후 12.11.48.png

And you have to select the tag ‘player’.

스크린샷 2016-05-23 오후 12.18.25.png

Change the color of light. And test whether you can walk around.

스크린샷 2016-05-23 오후 12.10.34.png

Now make it same in scene2. When we collide with scene1’s cube, player will go to the scene2. Drag a move code into the scene1’s cube, and write scene2.

스크린샷 2016-05-28 오후 5.41.00.png

스크린샷 2016-05-28 오후 5.41.10.png

스크린샷 2016-05-28 오후 5.41.24.png

Now I can move around scene1 and 2 freely.

스크린샷 2016-05-28 오후 6.03.19.png

I made a start scene in my maze, but I clicked start button, but it doesn’t move on T.T..

I don’t know the reason, I will ask professor on next class.

 

DMC1 _ Augment Reality

We are starting a new project. AR(Augment Reality)!

Augmented reality (AR) is a live direct or indirect view of a physical, real-world environment whose elements are augmented (or supplemented) by computer-generated sensory input such as sound, video, graphics or GPS data.

To download an AR software development kit, go to the website vuforia.com.

Click a register button and create an account.

After you create an account, go to the Downloads – SDK tab.

And click ‘Download for Unity’.

스크린샷 2016-05-16 오전 10.47.13.png

And also download this file.

http://db.tt/mXvO4uLj

This is the file which is going to be a tag image. (rock)

So the files you need is like this.

스크린샷 2016-05-16 오전 10.51.35.png

Inside the rocks zip file, there’s rocks.jpg.

스크린샷 2016-05-16 오전 10.51.46.png

Now we’re ready to begin! Let’s create a new project.

스크린샷 2016-05-16 오전 10.56.34.png

And before we start, we are going to change our platform to iOS.

스크린샷 2016-05-16 오전 10.58.27.png

Go to assets, and import the package you downloaded. (vuforia SDK)

스크린샷 2016-05-16 오전 11.00.05.png

And we are going to download ‘cute kitten’ in asset store.

스크린샷 2016-05-16 오전 11.02.21.png

We are going to delete the Main Camera.

스크린샷 2016-05-16 오전 11.16.46

And go to Assets > Vuforia > Prefabs. Find the AR Camera. Drag it to the scene.

I’ve set the position 0,0,0.

스크린샷 2016-05-16 오전 11.18.53.png

Inside the inspector of AR Camera, there’s a space for App License Key. We have to fill that space. Go to the vuforia website again, and get free license key.

스크린샷 2016-05-16 오전 11.22.25.png

Copy the license key, and we’ll going to paste in unity.

스크린샷 2016-05-16 오전 11.23.12.png

스크린샷 2016-05-16 오전 11.23.43.png

And go back to vuforia website, go to target manager tab.

스크린샷 2016-05-16 오전 11.25.26.png

Click ‘Add Database’.

스크린샷 2016-05-16 오전 11.25.54.png

Create a database and add target also.

스크린샷 2016-05-16 오전 11.28.10.png

Check ‘Single Image’, and browse a rocks.jpg file.

스크린샷 2016-05-16 오전 11.29.39.png

The rate is five stars. This means your picture is proper in AR. The picture should have lots of details and high contrast.

스크린샷 2016-05-16 오전 11.30.06.png

Now download database, select Unity Editor.

So we’ve got another unity package.

스크린샷 2016-05-16 오전 11.32.58.png

Import your custom package. Inside the vuforia > prefabs, there’s ‘ImageTarget’.

Drag it into your scene. The position is 0,0,o.

스크린샷 2016-05-16 오전 11.38.14.png

Drag your kittenNPC also into your scene.

스크린샷 2016-05-16 오전 11.40.40.png

And in Hierachy, drag kittenNPC into the image target. Now kitten became a child.

스크린샷 2016-05-16 오전 11.42.28.png

In AR Camera inspector, find Databade Load Behaviour script.

Load arClassDemoDB and check activate.

스크린샷 2016-05-16 오전 11.44.20.png

스크린샷 2016-05-16 오전 11.45.05.png

And go to image target. Find image target behaviour script.

Select your arClassDemoDB database.

스크린샷 2016-05-16 오전 11.46.14.png

스크린샷 2016-05-16 오전 11.46.46.png

Wow! Now click play button and see how it works!

Unfortunately, mine has an error in this step. When I click a play button, the unity program is suddenly shut down. T.T

So I decided to export to Xcode directly, and it worked!!

스크린샷 2016-05-16 오전 11.48.53.png

KakaoTalk_Photo_2016-05-23-02-18-13.png

KakaoTalk_Photo_2016-05-23-02-18-24.png

KakaoTalk_Photo_2016-05-23-02-17-59.png

KakaoTalk_Photo_2016-05-23-02-17-42.png

So cute!

I made different version of this.

스크린샷 2016-05-23 오전 3.10.18.png

KakaoTalk_Photo_2016-05-23-03-21-57_23.png

I suceeded to operate, but there’s a strange thing.

When I recognize the character, the character gets smaller like falling down.

After it gets smaller it disappears.. I don’t know why this is happen, so I should solve this problem in next class.