Display image slideshow on an image target using vuforia
Augmented Reality has reduced the space between imaginary and real world. In this tutorial you will learn to Display Image Slideshow on an Image Target. The video below will help you for better understanding of this blog.
For better understanding make sure to read the previous blogs i.e. DISPLAY 3D MODEL ON IMAGE TARGET USING VUFORIA IN UNITY3D and DISPLAY IMAGE ON AN IMAGE TARGET OR MARKER USING VUFORIA .
Create a new unity project:
In augmented reality creating a new unity project requires some of the things to be done. For creating a new unity project you need to write project name and then click on create project.
Adding new image:
For adding a new image target you need to go to vuforia engine. After going to vuforia engine click on image and re position it. Now go to vuforia portal. For opening vuforia developer portal make sure that you are sign in. Click on develop and after that go to click on target manager. For adding the target click on single image. Now choose the image by clicking on the browse button, then add certain width and rename it. Then click on add.
Scene Setting:
Now we have to set scene for augmented reality. For that you have to delete main camera and add AR camera and image. As you can see this warning sign, go to build settings then go to player settings. Go to the bottom click on XR settings and check the vuforia augmented reality.
Downloading the database:
Now download that data base. Click on unity editor then click on download. When it is downloaded drag it to the unity timeline put it in assets. Make sure that all the items are selected and click on import. Go to image target and select your database. Now you can see your image has loaded.
Making Buttons:
Right click on an image target and click on create empty. Now right click on game object then go to UI and select Canvas. Right click on canvas go to UI and then click on image. Now right click on image, go to UI and then click on buttons. We need two buttons one for next and one for previous. There fore, we will right click on image and go to UI . Then, click on button for the second button. We need two buttons one for next and one for previous. Therefore, we will again right click on image, go to UI and then click on button.
Changing positions:
Now go to canvas and change the render mode to world space. Drag AR camera to the event camera and change the positions of x, y and z axis to 0. We need to reduce its width and height. Now click on left, top, pos Z, right and bottom as 0. Now go to button and reduce its height.
We want one button on right and one button on left. So clicking on button and we want it on the right. Now click on right and set its Rect Transformation as 0. Now we need to do the same procedure with the second button. We will reduce the height and width of second button and then we will click on left because we want to show it on the left side. That’s why we will click on left and set its Rect Transformation as 0. Now go to canvas and rotate its x axis as 90 degrees and it is fix on the image. Go to image and delete this component (named as image script) and add a component Sprite Renderer.
Dragging images:
In order to display images we need to put them in resources folder.Now we will drag the images into the resources folder. We will drag the images into the resources folder. Now select these images . Go to default in Texture Type then click on sprite (2D and UI).
Importing Script:
Now we are going to import a script. You can download the script from here. After downloading script in unity and import it in assets and then open it.
You have to right the name of images in new string. We are naming and adding only three images. If you want to show more images you can just add them in the same pattern.
Naming Buttons:
Now going back to unity. Go to assets folder and dragging the script on in image. Now naming the one button as “next” and naming the second button as ” previous”. Dragging the next and previous buttons in slideshow (script). Now importing the arrow image to design next and previous button. in assets.
Display image slideshow on an image target:
Click the texture type and select sprite( 2D and UI) and click apply. Now select both buttons and drag them to the source image and check the preserve aspect. Now we have to rotate this button, click on the next button. Change the z axis in rotation as 180. Now extend the next and previous button and delete the text. We need to drag the first image which we want to display on sprite. Click on image and change the scale of x, y and z axis as 2.
Now move this button close to the image and also move second button close to the image. By clicking the next button we want to show the next image. So click on next button. Click on + in on click and drag image in on click. Now click on no function, then go to slide show and click on next (). For previous button click on no function, then go to slideshow and click on prev(). Now we don’t want to show this previous button on the first image. So, click on previous button and uncheck it.
Export Application:
From top menu click on file, then click on build settings. Check the platform is android if not switch it. And then click on add open scenes. Now click on player settings. Go to other settings. Change the package name according to your choice. Unchecked x86 and Android TV compatibility. Change the stripping level to low. Click on XR settings and make sure vuforia augmented reality is selected. And then you can insert the icon of your app. That’s all for settings now connect your android mobile with your computer and click on build and run. Now name it and save it.
