Development (Basic)

In order to experience the entire app creation process, loading the character model files and rendering the character file in the app will be demonstrated by a given instruction. Participants can make their own app with a simple sequence of operation, and source coding work will be minimized for this simple version of code lab. Based on this simple version of code lab, the character file import process will be learned and users can make their own app with AR Emoji SDK after this code lab work-through.

1. Create Unity Sample Project

Run Unity and create empty 3d sample project

New Project Window
2. Settings

Step 1: Build Settings

  • File -> Build Settings

    Platform -> Android

    Build Setting – Switching to Android platform

    Specific package name and keystore is necessary for testing. In the next steps, it’s explained in detail.

Step 2: Player Settings -> Other Settings -> Identification -> Package Name

  • Set “Package Name” to “samsung.com.fileprovidersample”

    Other Settings – Package Name

Step 3: Player Settings -> Publishing Settings

  • Browse keystore : fileprovidersample.jks

    • Add keystore with browser (Included Docs folder of GettingAREmoji.unitypackage)

    • Keystore password : 123456

    • Key

      • Alias : keyalias

      • Passward : 123456

      Publishing Setting - Keystore
3. Importing Sample App Pacakge (GettingAREmoji.unitypackage)

Step 1: Import package

  • Run “GettingAREmoji.unitypackage” -> Import

    Import GettingAREmoji package

Step 2: Check imported sample application

  • Assets -> Scenes -> GettingAREmojiSample Scene

  • Click Canvas

    Verify GettingAREmoji sample
4. Importing glTF Importer package to load AR Emoji model in Unity
(GLTFImporter.unitypackage)

Step 1: Import package

  • Run “GLTFImporter.unitypackage” -> Import

    Import GLTFImporter package

Step 2:Check imported packages

Verify GLTFImporter package
5. Integrate glTF Importer to sample application

Step 1: Go to sample scene

  • Click Assets -> Scenes -> GettingEmojiSample.unity

    Load GettingEmojiSample scene
  • Click Canvas

    UI canvas
  • Check ButtonBehaviour (script) in Inspector

    Check script

Step 2: Define GLTFComponent in your application

  • Open Assets -> Scripts -> ButtonBehaviour.cs

  • Define glTFComponent

    public class ButtonBehaviour : MonoBehaviour
    {
        public Button m_connectBtn;
        public Button m_getListBtn;
        public Button m_getFileBtn;
        public Button m_getPreviewBtn;
        public Text m_Text;
        public RawImage m_Image;
    
        public UnityGLTF.GLTFComponent gLTFComponent;
  • Confirm “GLTF Component” property appears in inspector (compare to Step 1)

    Check new "GLTF Component" property

Step 3: Add loadGLTF api in your application

  • Write below code (red) in OnClickGetFile() of “ButtonBehaviour.cs

    private void OnClickLoadModel()
        {
            m_Text.text = "";
            m_Text.text = "OnClickLoadModel";
            if (!isGetFile)
            {
                m_Text.text = "\nisGetFile : " + isGetFile + "\n";
                return;
            }
    
            if (filePath != null)
    	{
                StartCoroutine(gLTFComponent.loadGLTF(filePath));
            }
        }
  • Write below code(red) in Start() of “ButtonBehaviour.cs” to attach the GLTF Component

    void Start()
        {
            m_Text.text += "\nStart";
            jc = new AndroidJavaClass("com.unity3d.player.UnityPlayer");
            jo = jc.GetStatic<AndroidJavaObject>("currentActivity");
    
            m_Dropdown.onValueChanged.AddListener(delegate {
                DropdownValueChanged(m_Dropdown);
            });
    
            if (GameObject.Find("GLTFComponent"))
            {
                GameObject o = GameObject.Find("GLTFComponent");
                gLTFComponent = o.GetComponent<UnityGLTF.GLTFComponent>();
            }

Step 4: Copy GLTFComponent prefab into your application to use “GLTF Component” property of Step 2

  • Click “Assets -> Prefabs”

  • Drag GLTFComponent prefab to your Scene

GLTFComponent prefab
6. Build and Run

Step 1: File -> Build Settings -> Build and Run

Build and Run

Step 2: Launch sample application in device

  • Click “Get List” and confirm AR Emoji lists saved in device

  • Select one of them

  • Click “Get Preview” and “Load Preview”

  • Confirm the AR Emoji thumbnail is showing

  • Click “Get File” and “Load Model”

  • Confirm the AR Emoji model is showing

Check the result on the mobile device
Create your AR Emoji

If you want create your own AR Emoji, please make your AR Emoji with the following procedure.

Step 1: Run Camera application

Step 2: Click “AR Emoji” -> “+” button

AR Emoji App

Step 3: Take your selfie as guideline and choose your gender

Creating My Emoji

Step 4: Edit your AR Emoji

  • You can customize Looks / Clothes / Accessories of your AR Emoji

  • Press Next once you complete

Edit My Emoji

Step 5: Done and check your AR Emoji

  • Click “Done” button once you complete editing

  • Check your AR Emoji in Mask mode

  • Click Studio button and check your AR Emoji in AR Emoji Studio

Created My Emoji