As an Associate of Unity Asset Store, this website earns from qualifying purchases & contains affiliate links: check the footer for more info.

Business Card (AR and Non-AR) — Unity Asset

Business Card (AR and Non-AR) — Unity Asset that implements app template of Gallery, Video Player, Menu for Restaurants & Gaming, Visiting Card & Interactive Tool for Communication with Customers on Business Negotiations or Just for Fun.

Unity Asset Store — Download Button

Features of Business Card

By default, all tested platforms support and run Non-AR Mode.
If AR Mode is available, user can see a button to activate AR Mode.

  • Multiple Business Cards are Loaded Dynamically into the only reusable Game Object on the scene. Target Business Card can be selected with:
    • Non-AR Mode: Toggle Group System like in this video (UI is generated automatically based on the count of Business Cards).
    • AR Mode (AR Foundation: ARCore, ARKit): Multiple Image Tracking (Several AR Image Markers). It provides AR Onboarding UX with Transparent Video Manuals & AR States.
  • Business Card Data Array provides separate Data for Each of Business Cards (all data can be set in Unity Editor): Texts, Links, Images, Videos.
  • UI Layouts: Horizontal, Vertical.
  • Mobile Optimizations: TextMesh Pro, Object Caching, etc.

Package Contains

  • 2 Unified Demo Scenes for Both Modes (AR and Non-AR):
    • Portrait and Landscape Orientations.
  • Menu Scene with AR Safety Tutorial.
  • Video Player.
  • Permission Scene with Camera Permission Request using free Native Camera.
  • Loading Screen to switch scenes seamlessly.

Check the Map of Unity Assets to choose the product that best suits your needs.

Horizontal UI Layout of Business Card (asset uses AR Foundation engine instead of Vuforia)

Limitations

Asset doesn’t operate with Native Code and relies on Video Player by Unity (component/class).
Any Video Limitations are related to this component.

Advantages of AR Menu

AR Business Card allows you to implement an absolutely awesome user experience. Augmented Reality allows amplifying surrounding reality with virtual objects, using just a smartphone or tablet:

  • Interaction with the real world;
  • Gameplay based on real objects;
  • Minimizing costs for business demos.

Use Case of AR Business Card

AR for Business Cards can help you in a meeting with a potential client for an unusual presentation of a service or product. This technology clearly and interestingly presents your information. Present your modern company with advanced interactive features.

Using simple game mechanics, it’s possible to tell to any person about the company, product or service interactively in awesome way with AR.

You can use images on corporate T-shirts as AR Marks (or AR Markers), thereby the app “understands” that around the logo of a company virtual objects must be placed in a plane of a human chest.

The main thing about AR Business Card is that everything happens in real-time and clients instantly see the information.

Tutorial

This tutorial is relevant for Business Card (AR and Non-AR) 3.0+.
Tutorial for the previous version can be found only in the asset folder.

Getting Started with Business Card (AR and Non-AR)

Folders & Files in the package by default:

  • Makaka Games;
  • StreamingAssets;
  • XR.

Steps

If you have any issues with the first launch then just Reach Support with Invoice Number and Get Help.

If you read this tutorial from PDF, first check the latest docs online to get actual information.

  1. Create New Unity Project with Unity 2022.3.20 & “3D” Template.
  2. File > Build Settings > Windows, Mac, Android, iOS, WebGL > Switch Platform.
  3. Next Packages must be manually installed with Git & Unity Package Manager. This way, you will install the latest versions in the repositories. If you have any issues with the latest versions, you can install the tested versions indicated below using this instruction.
    1. Native Camera 1.4.3.
  4. Download and import Business Card into Unity.
    1. Warning Windows:
      1. Click “Import” to overwrite the Project Settings with predefined ones.
      2. Click “Install/Upgrade” for Package Manager Dependencies.
      3. Click “No” when enabling the backends for the new input system.
  5. Next Packages are provided with Unity Package Manager, and they are already installed for this Asset by default. If packages are missing (Warning Window did not appear) then install them again with Package Manager (advanced settings enabled: “Pre-release Packages”):
    1. TextMesh Pro 3.0.8:
      1. Always Required: Window > TextMeshPro > Import TMP Essential Resources;
    2. AR Foundation 5.1.2;
    3. Apple ARKit XR Plugin 5.1.2;
    4. Google ARCore XR Plugin 5.1.2;
    5. Input System 1.7.0;
  6. WebGL Only: As for the Videos, you can only play Videos by URLs. Since WebGL is sensitive to the build size, then Remove all Local VideoClips from the Unity Project:
    Project window > Search by Type > Video Clip.
    Learn More about Video Types below.
  7. Reopen Unity Project.
  8. Open Scene: Makaka Games > Business Card > Scenes > Menu.
  9. AR Only: Prepare AR Markers for Multiple Image Tracking to Point Device Camera on it:
    1. Open Reference Image Library: Makaka Games > AR > AR Foundation – Base > Image Tracking > Textures > ReferenceImageLibrary.
    2. You can use the default AR Markers, but if you need your own (e.g. Logo) then indicate here a unique contrast image with clear lines for better recognition. Specify size as you’d expect to find it in the user’s real-world environment.
    3. Print or Open AR Markers on any Display (Laptop/Smartphone).
  10. Test in the Unity Editor or Build.

Business Card Data: Texts, Links, Images, Videos

In the running App, you can choose a specific Business Card from multiple predefined cards in Unity Editor, which are Loaded Dynamically by:

  • clicking on the different Toggles at the bottom of the screen (for Non-AR experience).
  • pointing your smartphone at different AR Image Markers (for AR experience).

The Business Card consists of 3 Panels:

  • Panel Menu provides the Name of the target Business Card (Name ID) and 4 Menu Items: the main control elements of the Business Card. By clicking on the Menu Items, the Business Card shows target Menu Item Data (Texts, Link, Image/Video) on other Panels.
  • Panel Info provides the Header, Description and Link (button that runs system browser and opens the target link) when selecting a target Menu Item.
  • Panel Media shows Image or Video when selecting a target Menu Item.

Customizing Data

To customize the data that Business Card shows, in the Demo Scene you can find the Business Card Game Object with BusinessCardControl.cs script that exposes Business Card Data Array in Unity Editor.

Business Card Data Array provides separate Data for Each of Business Cards:

  • Name ID (Name of the target Business Card displayed on the Panel Menu),
  • Menu Item Data Array (Menu Item Data for each of 4 Menu Items).
    • There is also additional Menu Item Data under index 0 that is displayed when the target Business Card is shown for the first time and No Menu Item is selected on the Panel Menu.

Menu Item Data Array:

  • Header,
  • Description,
  • Link,
  • Icon Sprite (icon for the target Menu Item on the Panel Menu),
  • Icon Color (it’s activated when the target Menu Item is Selected on the Panel Menu),
  • Media (you can choose what type of data will be displayed on the Panel Media):
    • Video URL (with Path to File),
    • Video Clip,
    • Image.

Video Player

Video Player is the customized Video Player by Unity (component/class) which has:

  • Time Slider;
  • Play/Pause button.

Video Types

Video Player can use the next Types of Videos:

  1. Local VideoClips.
  2. Videos by URLs (with Paths to Files like this video).
    URLs without paths to files (like YouTube links) are not supported.

Testing and Building

By default, all tested platforms support and run Non-AR Mode.
If AR Mode is available, user can see a button to activate AR Mode.

iOS, Android: AR & Non-AR

You can learn more about Image Tracking in AR Foundation here.

Test AR Mode in the Unity Editor with AR Foundation > XR Simulation using Navigation Controls to imitate translational and rotational motions of smartphone: such way you can observe AR Objects from all sides.

You can forcibly test the case when AR is Not Supported by checking the next flags in the Hierarchy window on AR Foundation Support Checker (Game Object):

  • Is Checked In Editor On Init;
  • Is AR Unsupported In Editor Test;
  • Is AR Unsupported Not In Editor Test.

Use Fullscreen of Game View in Unity Editor while testing to get a seamless experience.

Testing Multiple Images with Smartphone

Real Testing on Real Device will be different from Testing in Unity Editor.

ARCore (Android) Behavior

ARCore Requirements: Supported Devices & Augmented Images.

ARCore API assumes that AR Images are static in the environment (2), so once they are recognized successfully, they will always appear in the list of anchors (updated list) (1) until the session is reset.

This means 2 things:

  1. AR Foundation will never mark the Tracked Image as removed, and it will never mark the Tracking State for the Tracked Image as None.
  2. If you try to test 2 Different Images via your monitor (desktop/laptop) and you will switch images with CMD+Tab (macOS) or Alt+Tab (Windows), so Images will be in the same position on the monitor, then ARCore will not understand that.
ARKit (iOS) Behavior

You can learn more about ARKit Requirements for Image Tracking here.

  1. Tracking State for the Tracked Image can be set as None when the camera stops seeing it.
  2. 2 images can be successfully tested on the monitor in the same position, as it described above for ARCore.

macOS, Windows: Non-AR

You can test immediately in the Unity Editor from the box, but to Make a Build, you need to Uncheck the Next Flags in the Edit > Project Settings > XR Plug-in Management > Windows/Mac settings:

  • Initialize XR on Startup.

WebGL: Non-AR

On WebGL, Video Playing is supported only by URL with Path to File like this video.
Learn the Article called WebGL and Unity about Building and Testing Unity games and apps for WebGL.


Tested with Devices

  1. Mobile Platforms:
    • AR & Non-AR: iOS on iPhone XS Max;
    • AR & Non-AR: Android on Samsung Galaxy A71;
    • Non-AR: WebGL in Google Chrome: Video Playing is supported only by URL with Path to File like this video.
  2. Desktop Platforms (Non-AR):

Support

First, read the latest docs online.
If it didn’t help, get the support.

Changelog

Check the current version of Business Card on Asset Store.
The latest versions will be added as soon as possible.

3.0:

Features:

  • Multiple Business Cards are Loaded Dynamically into the only reusable Game Object on the scene. Target Business Card can be selected with:
    • Non-AR ModeToggle Group System like in this video (UI is generated automatically based on the count of Business Cards).
    • AR Mode (AR Foundation: ARCore, ARKit): Multiple Image Tracking (Several Image Targets).
  • Button: Start AR. By default, all tested platforms support and run Non-AR Mode. If AR Mode is available, user can see a button to activate AR Mode.
  • Non-AR Desktop Support:
    • Windows,
    • macOS.
  • Non-AR WebGL Support (Video Playing is supported only by URL) for:
  • Video Playing by URL with Path to File like this video:
    • URLs without paths to files (like YouTube links) are not supported.

Improvements:

Changes:

  • Deprecated: Drag-And-Drop mode.

2.9:

Improvements:

2.8:

Features:

  • Vertical/Portrait Layout (Click Mode);
  • Custom Highlighted Color for each Selected Menu Item (can be set in Editor).

Improvements:

2.7:

Improvements:

2.6:

Features:

  • AR Onboarding UX with Transparent Video Manuals & AR States;
  • Using of Native Camera to check Camera Permission before the Demo Scene.

Improvements:

  • Unity 2021.1.28;
  • Modern Standards of Project Settings (based on New Unity Project).

2.5:

2.4:

2.3:

  • Unity 2019.3.12.

2.2:

  • Unity 2019.2.6;
  • Layout of Menu Scene — iPhone XS.

2.1:

  • Minor Improvements.

2.0:

  • Unity 2019.1;
  • Video Player:
    • Play/Pause Button;
    • Clickable Time Slider;
  • Menu with Mode Choosing;
    • Click (New Demo Scene);
    • Drag-And-Drop;
  • Custom Highlight Color for Panel Media on pointer enter in Drag-And-Drop Mode;
  • Separate Settings for each Menu Item to display on Content Panels (Media, Info):
    • Header & Description Texts,
    • Sprite Custom (Secondary Image to view on Panel Media),
    • Video Clip,
    • Link (system browser would be open when button clicked),
    • Draggable Color & Scale;
  • Optimizations:

1.2:

  • Fix icon size when dragging.

1.1:

  • Unity 2017.2 version;
  • Prefabs.

1.0:

  • Drag-And-Drop Mode.
Unity Assets

Support for Unity Assets

I am Andrey Sirota, Founder of Makaka Games and full-time Publisher on the Unity Asset Store. First, read the latest docs online. If it didn’t help, get the support.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment moderation is enabled. Your comment may take some time to appear.

Back to top button