From SkecthFab 3D Model to Unity + Vuforia

One of the complaints that I usually get from people that want to create contents but unable to do so is “I do not know how to create 3d models”.

Here is my proposed solution, you can use 3D Models from SketchFab for your Unity + Vuforia AR. In this video I have made, you will learn to import Animated SketchFab 3D models straight into Unity for use with your Vuforia AR. This tutorial will work with most models that has simple animations. If you want to import a model with multiple animations, you need a different method

Getting Yourself Started with Vuforia with Unity 2019 above (2020 updates)

So, why is this sudden post? Err well, if you install the latest versions of Unity, you will notice that setting up Vuforia will be a little bit different. We will need to use Unity’s Package Manager. So to update this new knowledge, here’s the new tutorial for how to get started with Vuforia. From now on, I will be trying to use Camtasia Studio this time to easily explain things. Leave your comments on how you like it, and how I can improve

Vuforia: Putting 2D Image on your Image Target

In order to complete this tutorial, you need:

  1. An Image, you can download one at www.pixabay.com
  2. You need to have completed the previous tutorial on Vuforia Basics

From the previous tutorial, we have added boxes to our image target.

Now lets import the image we needed to Unity, Drag and Drop the image you needed to the Assets window.

Next, lets right click one of the Image Targets we already have. Under 3D Obeject, select Plane

A Huge plane will appear. Don’t worry, we will resize this once done. But for now drag and drop the image we imported to the plane.

The plane will now have the image we imported. It will look something like this

Resize, rotate and move the plane as needed until it fit on your Image Target.

We no longer need the Cube. So let’s delete the cube. You will get something like this:

We are done! So lets press Play and test it out. You should now have an image and

Publishing Your Android App to Play Store – XZIMG Augmented Vision Tutorial 6 of 7

Filling Up Store Listing Information

The Store Listing window appears. Firstly fill in your app’s short description and long description

Next, scroll down the page. Add the icon and screenshot

Scroll down a little more, and add the Feature Graphic

Scroll down a little more, under Categorisation, select your Application type and Category. The selection depends on whether you are building an AR App for education, games or etc. Select the apropriate settings for your app

Adding Tags to your app to make search easier

Click on Manage Tags

The Tags window will appear. Search for the appropriate tags suitable for your app. In this example, my AR is an Entertainment. Press Add to add tag

Confirmation window appears, press Add

Once you have added the relevant tag or tags, press the back arrow to go back to Store Listing

Scroll down all the way down to Contact details, fill in your email. On privacy policy, fill in the url to your privacy policy. Then, click Save Draft

We are done with this part. A green checkbox will appear beside Store Listing

A green checkbox will also appear beside App releases

In the next tutorial we will do our final push to the finish line

Vuforia Basics + Creating a multiple image target Android AR 2/2

Setting up Vuforia in Unity

In the File menu, click Build Settings

The Build Settings window appears. Click Player Settings

Player Settings window appears. Under XR Settings, select Vuforia Augmented Reality

Right Click on the Hierarchy window. Under Vuforia Engine click AR Camera

A Import Vuforia Engine Assets appears. Click Import

AR Camera will be added to Hieararchy

While AR Camera is selected, in the Inspector window select Open Vuforia Engine configuration

Vuforia Configuration appears

Login to your Vuforia Developer Portal. Under License Manager, click on the app we created in the previous tutorial

Click the license key to copy it

Paste the copied license key to the License Key slot in Vuforia Configuration

Importing our downloaded Database

Double click the database we downloaded

Import Unity Package window appears. Click Import

———————- Repeat for each Image Target start here ———————–

Creating our Image Target

Adding an Image Target

Right Click on the Hierarchy window. Under Vuforia Engine click Image

The Image Target and its preview appears

Select the image for the Image Target

Next, we will learn to select image for the Image Target. Click the ImageTarget

With the Image Target selected, in the Inspector window, click the Image Target and choose your wanted image.

Adding a Cube so that we can test the target

With the Image Target still selected, Right Click on the Image Target, Under 3D Object click Cube

Resize and Move the Cube so that it is on top of the Image Target’s preview. It should look something like this now

Select your Image Target, and Move your Image Target to the side a little bit. This will help later when we have more Image Target, so that it does not overlap each other. You will see later on when you have multiple Image Targets.

Test the Image Target

Press Play and show your image to the camera. It should work now and you will see your cube appears on top of your image.

Repeat this for all your image targets

———————- Repeat for each Image Target ends here ———————–

How it looks like once done

You will now have something like this

Enabling multiple Image Target tracking simultaneously

Select AR Camera

While AR Camera is selected, in the Inspector window select Open Vuforia Engine configuration

In Vuforia Configuration, change the Max Simultaneous Tracked Images to whatever number you need. For an example, I changed it to 3

Final Test – Lets allow see them all together

Press Play and you will see that multiple Image Targets work now.

Thanks for following my tutorial. Do follow my blog and comment below if you have anything to ask or add.

How To Install Unity with Mobile (iOS and Android) Build Support and Vuforia

Download and install Unity Hub

Go to unity3d.com/get-unit/download

You will see two options. One is to install Unity only, second is to use Unity Hub. Download and install Unity Hub

Why Unity Hub?

Unity Hub allows you to manage and install addons and plugins easier. It will also help maintain multple versions of Unity. Why? Later on in your development life you will realise that unfortunately different people uses different versions of Unity for development. With the hub you can install their versions too, and access their project without screwing up your own project that uses your version of Unity

Installing the latest Unity in Unity Hub

Start up Unity Hub, you will see something like this. Press Add

Add Unity Version window appears, select the latest release of Unity and click Next

You will be asked which components to install. Scroll down and select Vuforia Augmented Reality Support

Then, make sure the options other options shown below are selected. Then, click Next

Unity will begin downloading and installing. Once done, it will look like this picture below.

That’s all on how to install Unity for Mobile Development with Vuforia Support

Publishing Your Android App to Play Store – XZIMG Augmented Vision Tutorial 5 of 7

Filling in App Content settings

Click on App Content

App Content window appears. Click Start

The first question is Target Age. Select your Target Age Group and click Next

The next question is whether the app could unintentionally appeal to children. you may select Yes or No. If Yes a ‘Not designed for children’ label may be shown next to your app on Google Play. In this example, I chose No.

Select your answer and click Next

A summary will appear, read it and if it is correct, click Submit

Success. Now a green checkmark appears beside App Content

Vuforia: Playing Sound when image detected and stop sound when image lost. The simplest way (2021 Updated)

Prerequisite

  1. A sound, you can find some free sounds from here http://soundbible.com/

Lets Start!

Drag and Drop the sound to your ImageTarget

Playing sound on Image Detected

While your ImageTarget is selected, on the Inspector window drag and drop AudioSource to the On Target Found() Object slot

Click the function selector and select AudioSource > Play()

Stopping sound on image lost

While your ImageTarget is selected, on the Inspector window drag and drop AudioSource to the On Target Lost() Object slot

Click the function selector and select AudioSource > Stop()

Final check

Default Trackable Event Handler should now look like this

Done, lets test it!

When image is detected, you sound will play and when image is lost, the sound will stop.

I have multiple Image Targets and sound to implement. How?

Its okay you now know all you need to know to do this. All you have to do is repeat these steps from “Let’s Start” to the end for each of your Image Target.

That’s all, happy creating

Publishing Your Android App to Play Store – XZIMG Augmented Vision Tutorial 1 of 7

Introduction

In the previous tutorial post, I have taught you how to publish a test app to Android. In this tutorial we will cover the topic that is a must for developer creating apps for Android, which is Publishing your Android App to Play Store.

  • This tutorial will be broken down to 7 parts. They are:
    • 1 : Getting your app ready and publishing it as Android App Bundle (.aab)
    • 2: Registering Google Play Console account and uploading the aab
    • 3: Setting the Content Rating
    • 4: Setting the Pricing and Distribution
    • 5: Setting App Content description
    • 6: Setting Store Listing
    • 7: Final Steps and Publish!

Prerequisite

You need a few things in order to put your app to the Play Store. If you are not a graphics guy, you would need to ask a friend with such knowledge to help with the graphics part.

  • A privacy policy for your app. You can get one from https://www.websitepolicies.com/. Websitepolicies.com will provide you a public link to your policy. This is what you will need later.
  • Graphics for Play Store
    • 2 Screenshot of your application (Don’t know how to screenshot? Learn Here)
      • JPEG or 24-bit PNG (no alpha)
      • Minimum dimension: 320 px
      • Maximum dimension: 3840 px
    • 1 High Resolution Icon for your apps
      • 32-bit PNG (with alpha)
      • Dimensions: 512 px by 512 px
      • Maximum file size: 1024 KB
    • 1 Feature Image
      • JPEG or 24-bit PNG (no alpha)
      • Dimensions: 1024px by 500px
  • Descriptions for your App
    • 1 Title (The name of your app)
    • 1 short description of your app (80 characters max)
    • 1 long description of your app
  • Note: All your descriptions must not contain:
    • User testimonials
    • Excessive details
      • OK : “This is an AR app on cats, for cat lovers”
      • Don’t: “this is an AR app on cats, brown cats, blue cats, silver cats, cat food , cat drinks, cats getting drunk in a bar and starting a fight, and many other cats”
    • Misleading references to other apps or products
    • Repetitive, excessive, irrelevant keywords, keyword spamming
  • Avoid including these:
    • Sexually suggestive images
    • Profanity and vulgarity
    • Graphic violence
    • Depictions of illegal drug use

Preparing for our App for deployment

Go to File > Build Settings > Player Settings

Change the App icon

Drag and drop your created app icon into Assets folder in Unity

Drag and Drop the icon to the Default Icon in the Project Settings

Creating a Keystore

Under Publishing Settings, Click Keystore Manager

In the Keystore Manager, Click the Keystore menu and select Create New > Anywhere

A save file window appears, save this keystore file somewhere safe.

Do not, i repeat do not lose this keystore file. Backup it multiple times! Without this keystore you will permanently unable to update your application. Both in Unity and in Play Store.

Next, we need to fill in the details as explained by the picture example below

Click Add Key

A keystore created confirmation window appears, click Yes

The key has now been set, under Project Key, click the Alias menu and select our newly created key value

Building our Google Play App Bundle

In the Build Settings window, select Build App Bundle (Google Play), then click Build

A save file window appears, select a folder to put the built file in. In my example, i put it in a new folder named AAB. Click Save

Once done, you will have an aab file in your folder

This is the end of Phase 1, in Phase 2, we will upload our app into the Play Store

Building a test build of our project on Android

Prerequisite

To follow this tutorial, you need to complete the previous tutorial on building our application on PC

Switch the Build Settings to Android

Go to File and select Build Settings

The Build Settings window appears, under Platform, select Android and click Switch Platform

Unity will start to switch the application to Android format

Once the switch is completed, under Platform the Unity icon will now appear at the Android instead of the PC

Customizing the Android player settings

Press Player Settings

Player Settings window will appear. Change Company Name, and Product Name to your own name

Check that App Orientation is Potrait

Press Resoultion and Presentation to expand its settings

Under Resolution and Presentation, make sure the Default Orientation is Potrait

Adjusting Other Settings

Press Other Settings to expand its settings

It will expand into a looong settings to something like this

Changing our Package Name

In the Package Name slot, change the Package Name to the format of com.yourcompanyname.product. For an example I used com.mycompanyyeah.test1.

Important Note! Pay Attention yeah:

  1. Your Company Name and Package Name, should be the same as previously entered at the Company Name and Package Name slot
  2. No spaces are allowed!

Set Scripting Backend to IL2CPP

Make sure the Scripting Backend is IL2CPP

Set Target Architecture

Check ARMv7 and ARM64. ARM64 is compulsory as now Play Store will only accept app that support ARM64. ARMv7 is selected so that we can support older devices.

Press Build Button to Build our apk

Select where to save the .apk

A window appears, lets put our apk to the desktop

The APK will start building

Our test APK will appear. Copy it to your Android Phone and install it

Don’t know how to install an APK? Click this link and read the tutorial here

Testing our AR on Android

Run our installed Test App and scan our Image Target. It should work now. Yeah!