How to make STYLY Mobile AR scene/experience manual

With the June 2020 update, all STYLY users will be able to create AR scenes.

This article explains how to create an AR scene using STYLY and how to experience an AR scene.

About STYLY Mobile

What is STYLY Mobile?

AR_sample from DIscont on Vimeo.

Until now, STYLY has been developed as a platform for delivering VR spaces. However, after the reopening of Shibuya PARCO in November 2019, STYLY has evolved into an XR platform capable of also delivering AR scenes.

With this, STYLY can now create and deliver both VR and AR scenes.

STYLY Mobile is a smartphone application that allows you to experience AR scenes delivered by STYLY.

By reading markers called “STYLY markers” using STYLY Mobile, you can create and deliver AR Scenes, which can then be loaded by other users. In the future, users using STYLY Mobile will also be able to experience VR scenes created and delivered through STYLY.

STYLY: STYLY is an XR creative platform that provides artists with a place to express themselves in space.

 

STYLY Mobile official page
https://styly.cc/ja/mobile/

STYLY Mobile app download link

iOS
https://apps.apple.com/jp/app/styly/id1477168256

Android
https://play.google.com/store/apps/details?id=com.psychicvrlab.stylymr&hl=ja

Features of STYLY Mobile

Creating an AR scene in STYLY follows the same process as creating a VR scene in STYLY.

After creating scenes in STYLY Studio by positioning 3D objects, illustrations, and other images, users can instantly deliver their developed scenes by pressing the publish button.

Users can also import their scenes and prefabs created in Unity to STYLY for further use.

Scenes created in STYLY can be displayed in both VR and AR. This allows artists to create experiences that transcend the boundaries of VR and AR.

A sample scene created by STYLY

Load the STYLY markers below to experience a sample AR scene created for STYLY Mobile.

Creating an AR scene with STYLY

(1) Prepare the materials needed to create an AR scene.

STYLY allows users to create scenes using default assets (materials). Users can also create their original scenes by importing and using their own assets (3D Objects and Images).

First of all, let’s prepare some materials to create an AR scene.

(Please refer to the following article to learn more about the types of assets that can be uploaded.

Users should utilize Unity if they wish to create an interactive scene.

Users can also refer to the following guides and articles for a detailed explanation of how to upload interactive scenes and prefabs from Unity to STYLY.

How to upload your Unity scenes and prefabs to STYLY

(2) Create/edit your AR scene in STYLY Studio

Creating a STYLY scene

After accessing STYLY Studi, create a new scene.
Choose the AR Template to create an AR scene.

Editing an AR scene in STYLY Studio

STYLY Studio allows users to upload assets, such as 3D models and images, and position these assets.

Create your AR scene using a combination of assets that exist by default, materials from Google Poly, or assets you’ve uploaded yourself.

Users can refer to the following articles for more information on how to use STYLY Studio.

<Tips> The AR template

(1) The AR Template Grid is designed to make it easier to create AR scenes.

 When loading a scene in STYLY Mobile, the AR Template Grid is automatically hidden.

(2) “Sample” is a sample object that shows the position of the AR scene. Delete it if necessary.

The Publish button

<Tips>The Origins of an AR Scene

When STYLY Mobile detects a horizontal plane, the floor surface you tap on matches the origin (0,0,0) in STYLY Studio.

<Tips>About Skybox

The real scene will be disabled if a “Skybox” is present in the scene.

“Skybox” should not be utilized when creating an AR scene.

(Always check and delete “Skybox” before importing your scene from Unity.)

Publishing your AR scene using STYLY Studio

Press the “Publish” button to publish your scene in the STYLY Gallery when you’ve completed developing it. Doing so will put your scene in the “Published” state, allowing any users, including you, to experience the scene freely.

If the scene is not tagged with “#AR,” you can’t export STYLY markers. When publishing a scene, make sure that the “#AR” tag is added to the scene.

(3) Creating STYLY markers

Open your published STYLY scene in STYLY Gallery.

(You can click on the URL when you publish, or you can go to My Page in the STYLY Gallery to find the scenes you’ve published)

STYLY markers will pop up when a scene with the “#AR” tag is opened, as shown in the image below.

Load the displayed STYLY markers using STYLY Mobile to experience the published AR scene.

(If the markers do not appear, check and make sure the scene has the “#AR” tag added to it.)

Users can download the STYLY markers by pressing the download button in the upper right corner of the pop-up. Users can also press the “Share” button in the upper right corner to generate a URL that will allow any users to launch the scene directly from STYLY Mobile.

(4) Experiencing an AR scene using STYLY Mobile

Launch STYLY Mobile, load the STYLY marker and press the start button. The scene will appear on the plane detection screen.

Tap anywhere on the screen to place the scene.

Once you have created a STYLY marker, the latest scene will always be loaded using the same STYLY marker even when the scene has been updated.

(1) This is a frame for horizontal detection. The AR scene is displayed around the point where this frame is placed.

(2) The center point in the frame matches the origin (0,0,0) in the STYLY Studio.

Frequently Asked Questions

The following is a list of frequently asked questions about STYLY Mobile.

Questions Answers
Is STYLY Mobile compatible with Android or iOS? STYLY Mobile is available for both Android and iOS.
AR scenes created in STYLY can be experienced in both operating systems.
What programming languages can I use with STYLY Mobile? For security reasons, STYLY does not allow users to use a programming language to create scenes.
Instead, users can use a visual scripting tool called PlayMaker to create interactive scenes.
Can I create an interactive scene in STYLY Mobile? Users can use a visual scripting tool called PlayMaker to create interactive scenes.
Can I use features such as People Occlusion and Face Tracking in STYLY Mobile? Currently, STYLY does not support those features.
However, in the future updates, STYLY may allow users to utilize the latest features from ARKit and ARCore.
Is it safe to use STYLY Mobile for commercial use? Currently, STYLY Mobile is being regularly updated and prepared for future commercial usages. At present, please kindly give the development team some more time to ensure that only the best experiences are delivered.

What to consider when creating an AR scene

  • The real world’s sceneries will be disabled when a “Skybox” is placed in a scene.
    When creating an AR scene, consider removing the Skybox from the scene.
  • When opening a scene in STYLY Mobile, the collider will not be generated automatically.Users should set up the collider in Unity in case a collider is needed.
  • Users will have to utilize the Video Player component provided by Unity to create a local. Video files specified from the file system as linked in the Inspector will not play on Android devices. This is a bug in Unity. Therefore, users should upload their videos to a separate server and redirect the URL to it in case they would like to add videos in their developed scenes.

Afterwords

STYLY Mobile will continue to be updated continuously with new features and functions, opening up new opportunities for users.
We hope you’ll keep an eye out for more updates to STYLY Mobile in the future.