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.

Step 1: Create a Unity sample project

Run Unity and create empty 3D sample project.

Step 2: Configure the Settings

1. Go to Build Settings.

   a. File -> Build Settings

   b. Platform -> Android

   

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

2. Go to Player Settings -> Other Settings -> Identification -> Package Name.

   Set the Package Name to samsung.com.fileprovidersample.

   

3. Go to Player Settings -> Publishing Settings.

   Browse keystore : fileprovidersample.jks

   a. Add keystore with browser (included Docs folder of GettingAREmoji.unitypackage).

   b. Keystore password : 123456

   c. Key

   • Alias : keyalias

   • Password : 123456

   

Step 3: Import the sample app package (GettingAREmoji.unitypackage)

1. Import the package.

   Run GettingAREmoji.unitypackage, then Import.

   

   

2. Check the imported sample app.

   a. Go to Assets -> Scenes -> GettingAREmojiSample Scene.

   b. Click Canvas.

   

Step 4: Import the glTF Importer package to load AR Emoji model in Unity (GLTFImporter.unitypackage)

1. Import the package.

Run GLTFImporter.unitypackage, then Import.

2. Check the imported packages.

Step 5: Integrate the glTF Importer to the sample app

1. Go to the sample scene.

   a. Click Assets -> Scenes -> GettingEmojiSample.unity.

   

   b. Click Canvas.

   

   c. Check ButtonBehaviour (script) in Inspector.

   

2. Define GLTFComponent in your application.

   a. Open Assets -> Scripts -> ButtonBehaviour.cs.

   b. 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;
   

   c. Confirm GLTF Component property appears in inspector (compare to Step 1).

   

3. Add loadGLTF API in your app.

   a. Write the code below in OnClickLoadModel() of ButtonBehaviour.cs to load selected model:

   private void OnClickLoadModel()
   {
       m_Text.text = "";
       m_Text.text = "OnClickLoadModel";
       if (!isGetFile)
       {
           m_Text.text = "\nisGetFile : " + isGetFile + "\n";
           return;
       }
       //add below code
       if (filePath != null)
       {
           StartCoroutine(gLTFComponent.loadGLTF(filePath));
       }
   }
   

   b. Write the code below 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");
           //add below code
           gLTFComponent = o.GetComponent<UnityGLTF.GLTFComponent>();
       }
   

4. Copy GLTFComponent prefab into your app to use GLTF Component property of Step 2.

   a. Click Assets -> Prefabs.

   b. Drag GLTFComponent prefab to your Scene.

   

Step 6: Build and run

1. Go to File -> Build Settings -> Build and Run.

2. Launch the sample app in your device.

   a. Click Get List and confirm AR Emoji lists saved in device.

   b. Select one of them.

   c. Click Get Preview and Load Preview.

   d. Confirm if the AR Emoji thumbnail is showing.

   e. Click Get File and Load Model.

   f. Confirm if the AR Emoji model is showing.

   

Step 7: Create your own AR Emoji

You can create your own AR Emoji with the following steps:

1. Run Camera application.

2. Click AR Emoji and the + button.

3. Take your selfie as guideline and choose your gender.

4. Edit your AR Emoji.

   a. Customize looks, clothes, or accessories of your AR Emoji.

   b. Press Next, once done.

   

5. Check your AR Emoji.

   a. Click Done button, once you complete editing.

   b. Check your AR Emoji in Mask mode.

   c. Click Studio button and check your AR Emoji in AR Emoji Studio.