STYLY Studio Manual – Making a Wearable “AR Human Template”

In this article, we will explain the specific process for creating a wearable* “AR human template” for the STYLY mobile app in STYLY Studio. For guidelines on how to deliver a more engaging and comfortable experience, please refer to the Production Guidelines linked to at the end of the article.

*The AR human template referred to here is not AR that augments not only specific body parts such as the face or feet, but which enhances the space around the person (the subject). In other words, the target of the augmented experience has a range of several meters centered on the person.

 

This article describes two types of AR human template production methods. One is created mainly using the template provided by STYLY, and the other is created mainly from your assets.

By reading to the end, you will be able to create an AR human template and try it out on Instagram.

Create an AR human template with Modifier

The creation of AR human templates is done using a STYLY Studio feature called “Modifier.”

A Modifier is a feature in STYLY Studio that allows you to add effects such as animation and interaction to your assets.

The effect itself is called a Modifier.

Previously, STYLY Studio required Unity or PlayMaker to add such functions, but now anyone can easily add movements and animation to objects in the browser.

For a general overview of Modifier and its specific functions, please refer to our previous articles.

 

 

Creating with a template

We have several AR human templates already created on STYLY Studio. You can replace the existing assets that make up the templates to customize your production.

It is a good idea to create your own expression while using these templates.

For example, you can keep the composition displayed in the template and replace only the assets, or you can keep the assets and change the composition.

In addition, because this is AR content that can be experienced by holding up a smartphone, first-time users may have difficulty understanding how the assets placed on STYLY Studio will appear on the other side of the screen (real environment) and how they should be staged to create a spectacular and interesting expression. In this case, the template’s presentation can be a useful reference.

How to copy a scene on STYLY Studio

1. First, please login to STYLY Gallery.

2.  

   

   Select LOGIN in the upper right corner of the STYLY Gallery screen if you don’t login to STYLY Gallery.

    

   

   You are logged in. (Your icon will be displayed)

3. Click on the Copy button below. *You must be logged in to copy to your account.

   

    

4. When the scene is added to the scene list on STYLY Studio, you finished copying.
   
   

   Copied scene is added.

Let’s open the scene. The following explanation will be based on the opened scene.

Key points for template structure and usage

First, we will explain the structure and key points of the template.

Template Structure

Templates are composed of two main types of elements: non-changeable base assets and changeable assets.

Assets with gray eyeball icons are required for any AR human template and cannot be modified. For assets that can be modified, you can select the gear symbol and use [Add modifier] to set the movement. The template already has these two types of assets in place.

 

Key points on how to use the template

The template provides a circle with 1m, 0.65m, and 0.2m notations. These circles are placed to balance the relationship between the subject and the surrounding space when placing assets.

 

Within the 0.65m notation (1.3m diameter) is “personal space.” This is a suitable range for placing person-centered assets.

Inside and outside the 1m notation (2m diameter) is “social space.” This is a suitable area for placing environmental assets. Use the circle as a guide for your production.

Finally, the circle within the 0.2m notation (0.4m diameter) at the very center is “intimate space.” This is not a good location to place assets, because the assets will overlap the person.

The template we will use for this article has already been arranged with this circle in mind. Based on the previous material, there are two important points to consider when using the template:

1. How the assets are placed
2. How to move the assets

Let’s keep these two perspectives in mind.
We will now try to create an AR human template using the template.

Create an “AR human template” using the template

After opening the template, you will see some assets placed. Let’s use Modifier to add animation to them.

This time, we would like to change the parameters of the animation already given. By checking a series of operations, we will give you an idea of how to explore your own expression while focusing on the template.

1. Screenshot after opening the scene you just copied.
   
   

   After opening the copied scene.

2. Select “Ring” and [gear symbol]→[Add modifier] to select the operation option for the asset.
   
   

   [gear symbol]→[Add modifier] to select the operation option.

3. Select “[Animation] Heartbeat” in the search box.
   
   

   Select “[Animation] Heartbeat.”

4. Check that the modifier has been added and check the current parameter values.
   
   

   Current parameter values.

5. Change and apply parameters. Here, set Beat duration to 2, Hold duration to 1, Amplitude to 0.1, and select “apply.”
   
   

   Change Beat duration to 2, Hold duration to 1, Amplitude to 0.1, then click “apply.”

6. Select “Ring,” [gear symbol]→[Add modifier], and add “[Style change] wood maple flat.”
   
   

   Select “Ring,” [gear symbol]→[Add modifier], and add “[Style change] wood maple flat.”

As a result of the operations we have done so far, we have been able to change the look and scale of the rings in the background.

You might say that the presentation pops more than the existing template.

In this way, you can make use of the existing template or refer to it to create your own unique expression.

 

Experience on STYLY Mobile

Click on the earth icon in the upper-left corner of the screen to release the template (you can choose “public” or “private”).

Successfully published scenes can be experienced on various devices. You can experience them on your desktop through STYLY Gallery and on your smartphone through the dedicated STYLY Mobile app.

To experience the wearable “AR human template” from your desktop

The STYLY Mobile app is activated by scanning the QR code displayed on the desktop version of STYLY Gallery with your smartphone.

If you have not installed STYLY Mobile, you will need to do so. (This QR code can be viewed at any time from STYLY Gallery.)

To experience the wearable “AR human template” from your smartphone

1. After launching STYLY Mobile, select a scene from My Page.
2. Select the “Download” button. Caption: Click the “Download” button.
   
   

   「ダウンロード」を選択

3. Select the “Play” button.

Follow the instructions under “Slowly move your smartphone toward a flat surface” to move your smartphone toward the subject and the surrounding space.

After awhile, the “Tap the screen to start” button will appear, and the experience is ready.

By arranging the subject’s attire and posing it to fit the AR human template, as well as the surrounding environment that serves as the background, it is possible to create attractive content.

Upload to Instagram

After selecting “Play,” you can set the screen to film mode by clicking on the “Settings” button in the lower-right corner of the STYLY Mobile experience screen.

Shooting it as a video file will save it to your camera roll so that it can be uploaded to Instagram.

 

 

 

 

 

 

この投稿をInstagramで見る

 

 

 

 

 

 

 

 

 

 

 

Lakeia 💕(@keiabeia___)がシェアした投稿

Creating with your own assets

The AR human template allows you to use not only existing assets placed on the template, but also your own 3D models created with modeling software or other software, as well as assets purchased on a website.

This section explains how to upload your own assets.

1. Select the upload icon in the upper-left corner of the screen.
   
   

   Icon on the upper-left corner of the screen.

2. Click “My uploads.”
   
   

   Click “My uploads.”

3. Then click “3D model.”
   
   

   Click “3D model.”

4. From “Select,” choose locally stored asset files.
   
   

   Click “Select.”

    

   

   Select locally stored asset files.

5. Make sure the asset file is selected, then click “Upload.”

   

   Make sure the asset is selected and choose “Upload.”

   
   
   

   Uploading.

   
   
   

   Upload complete.

In this case, we uploaded assets stored in local files, but you can upload assets directly from Unity. Please refer to the following article for the steps to upload from Unity.

How to upload to STYLY from Unity

See also the following article for guidelines on how to deliver a more engaging and pleasant experience with the wearable AR human template.

For questions about STYLY, bug reports, and improvement requests, please contact the STYLY FORUM
https://en.forum.styly.cc/support/discussions

Edited by SASAnishiki
Translated by passerby1