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: Settings

1. 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. Player Settings -> Other Settings -> Identification -> Package Name

   Set the Package Name to samsung.com.fileprovidersample

   

3. 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: Importing sample app package (GettingAREmoji.unitypackage)

1. Import package

   Run GettingAREmoji.unitypackage, then Import

   

   

2. Check imported sample application

   a. Assets -> Scenes -> GettingAREmojiSample Scene

   b. Click Canvas

   

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

1. Import package

Run GLTFImporter.unitypackage, then Import

2. Check imported packages

Step 5: Integrate glTF Importer to sample application

1. Go to 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 application

   a. Write below code 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 below code 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 application 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. File -> Build Settings -> Build and Run

2. Launch sample application in 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 the AR Emoji thumbnail is showing

   e. Click Get File and Load Model

   f. Confirm the AR Emoji model is showing

   

Step 7: Create your AR Emoji

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

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. You can customize looks, clothes, or accessories of your AR Emoji

   b. Press Next once you complete

   

5. Done and 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