Tutorial to learn how to create and publish scenes

In this article, we will introduce how to create and manage scenes, the basic operation method of STYLY Studio, and the procedure to publish the created scene.
By reading this article, anyone can easily learn how to create a VR / AR space and publish their own VR / AR space to the whole world.
Let’s create your own VR / AR space, publish it to the world, and share it using SNS.

STYLY Studio TOP

How to create and manage new scenes

Introducing how to create and manage new Scenes. Scene means VR / AR space.
On the MY SCENES screen, you can create, rename, copy, and delete Scenes.
When you start STYLY Studio from the STYLY top page or STYLY GALLERY, the MY SCENES screen opens first.
If you are starting STYLY Studio for the first time, you need to create a new Scene.

Now let’s create a Scene. Click the [Create] button at the top right of the MY SCENES screen.

MY SCENES screen New Scene  button at the top right of the screen

MY SCENES screen New Scene button at the top right of the screen

Next, select VR Scene Template or AR Scene Template, enter the Scene name (Scene name can be changed) in the Title form, and click the [Create] button.
This will launch STYLY Studio.

Scene creation screen Enter the title at the upper of the screen

Scene creation screen Enter the title at the upper of the screen


Scene creation screen Enter the title at the bottom of the screen

Scene creation screen Enter the title at the bottom of the screen

About the scene manager in STYLY Studio

You can also manage scenes and create new ones within STYLY Studio.
You can start the scene manager by selecting the Scenes tab from the menu tab described later.

Scene manager screen detailed explanation


Scene manager screen scene creation

Scene manager screen menu description

Menu tab There is a Scenes tab / Create Scene tab. If you select the Scene tab, you can check public / private, check / edit the scene name, and delete / copy the scene. You can create a new Scene by selecting the Create Scene tab.
Thumbnail You can check the thumbnail image of the Scene.
Public / Private You can check the public status of the scene. If it is Draft, it means that it is private, and if it is Public, it means that it is public.
Scene name You can check the Scene name.
Edit button You can show / hide the Scene name change button, copy button, and delete button.
Scene name change button You can change the Scene name.
Copy button You can copy the scene.
Delete button You can delete the scene. Please note that once deleted, it cannot be restored.
Close button Return to STYLY Studio. It cannot be used if no Scene has been created.
Back button Go to the STYLY Studio home screen.

How to use STYLY Studio

Introducing how to use STYLY Studio.
Explains how to change the work viewpoint, explain the STYLY Studio screen, insert assets, and operate assets.

Zoom / move / rotate the work viewpoint

Introducing how to change the work viewpoint on the STYLY Studio screen.

Zoom in / out of the work viewpoint

Zoom in / out

You can zoom in and out on the work viewpoint by operating the mouse (trackpad).

Operation method Common to Windows / Mac

Device used Method of operation
Mouse Mouse wheel
Trackpad pinch
Two-finger vertical swipe
(Depending on trackpad settings)

Translation of work viewpoint

Move

The work viewpoint can be translated up, down, left and right.

Operation method Common to Windows / Mac

Device used Method of operation
Common to mouse / trackpad

Right click + WASDQE
W: front, A: left, S: back, D: right, Q: bottom, E: top
* Press the Shift key at the same time to increase the speed of moving the viewpoint.

Arrow key
↑: Top, ↓: Bottom, ←: Left, →: Right
* Press the Shift key at the same time to increase the speed of moving the viewpoint.

Mouse only Wheel button
Center click + mouse move

Revolution of work viewpoint

Orbit

You can revolve the work viewpoint by operating the mouse (trackpad). Revolve around Your Position.

Operation method Common to Windows / Mac

Device used Method of operation
Mouse Left click + move mouse
Trackpad Left click + drag

Rotation of work viewpoint

Rotate

You can rotate the work viewpoint by operating the mouse (trackpad).

Operation method Common to Windows / Mac

Device used Method of operation
Mouse Right click + move mouse
Trackpad Right click + drag

What is Your Position?

Your Position is the position that will be your first point of view when you experience the VR / AR space.
It will be a viewpoint that you can see by wearing the HMD with STYLY VR APP.
Also, Your Position can be moved.

STYLY Studio screen Your Position

STYLY Studio screen description

Introducing the screen list of STYLY Studio.
There are four main menus.
Let’s take a closer look at the four menus.

STYLY Studio screen menu explanation

Top button

STYLY Studio screen top button

Menu description

Scenes button Open the scene manager screen.
Assets button Opens a screen for selecting the assets to insert in the Scene.
Assets include 3D models, images, music, videos and more.
Help button You can display information such as shortcut keys that are useful when editing Scenes.
Play Mode button Start Play Mode.
Publish button Open the Publish screen for publishing the Scene.

Hierarchy menu

Hierarchy menu is a menu that manages lights called assets, Skybox (celestial sphere), 3D models, etc.
In the newly created Scene, the following 5 assets are inserted by default.
Describes the assets that are inserted by default.

STYLY Studio screen hierarchy menu

Directional Light is a light source that illuminates the entire space like the sun.

[Ground] Default is the floor / ground.

[Skybox] Default is a celestial sphere that covers the entire screen.

Your Position is the position that will be your first point of view when you experience the VR / AR space.
It will be a viewpoint that you can see by wearing the HMD with STYLY VR APP.
Also, Your Position can be moved.

Transparent Floor is necessary for warp movement in VR.

Menu description

Top bar You can show / hide the hierarchy menu.
Image icon You can show / hide assets on the Scene.
Copy button You can copy assets.
Delete button You can delete assets.

Feature Description

Focus your work perspective on assets Double-click an asset in the Hierarchy menu to focus your work perspective on the asset on the Scene.
Copy to Scene by dragging and dropping You can copy by dragging and dropping the asset from the Hierarchy menu to the Scene.

Scene gizmo

The scene gizmo shows the direction the camera is currently heading.
You can also quickly switch the camera’s viewpoint to an angle with those directions as the front by clicking the red, green, and blue cones.

STYLY Studio screen scene gizmo

“Persp” is displayed below the scene gizmo, which means that the scene is displayed in perspective.
Click “Persp” to switch to “Iso” and display the scene in parallel projection.
If you want to restore it, you can switch to “Persp” by clicking “Iso”.

Persp / Iso

In visual projection, objects of the same size that are far from the viewpoint are drawn small, and objects that are close to the viewpoint are drawn large.
On the other hand, in parallel projection, objects of the same size are drawn in the same size regardless of the distance from the viewpoint.

Side button

STYLY Studio screen side button

Menu description

global button
* Displayed only when an asset is selected in the hierarchy menu

The global button changes the reference axis for rotating and scaling the selected asset.
When it is On, the rotation and enlargement / reduction operations are performed based on the direction of the entire scene.
When Off, rotation and enlargement / reduction operations are performed around the direction in which the selected asset is heading.

move / rotate / scale button
* Displayed only when an asset is selected in the hierarchy menu
You can switch asset operations (move, rotate, scale).
reset position button Return the camera viewpoint to Your Position.

Insert asset

Insert assets into the Scene and create your own original Scene.
This chapter introduces asset types and explains how to work with assets.
Now, I would like to create a scene by following a simple procedure.

Asset type

Click the Assets button on the top button to display the asset list.
The asset list includes My upload, 3D object, 2D object, Environment, Particle, Filter, Function, External media.

Asset lists

Asset lists

Menu description

My uploads There are items uploaded directly to STYLY by yourself or via Unity.
3D object You can choose any of the 3D objects that come standard with STYLY.
2D object There is a “2DUI Set” which is a 2D button asset for mobile and web.
Environment You can choose Skybox, Floor, Light, or Scene.
Particle You can use existing Particles.
Filter There are filters that add visual effects to the entire scene.
Function You can add functions that have an effect on the entire scene.
External media YouTube and HoloStream videos can be embedded.

 

Insert asset

I will show you how to insert an asset.
Select an asset from the asset list and insert it into the Scene.
This time, let’s create a simple Scene by inserting the assets of Skybox, Ground, and 3D objects into the Scene.

Change the Skybox

Introducing how to change the Skybox.
Click the Assets button.

Click the Assets button on the STYLY Studio screen

Click Environment.

Asset list screen Click Enviroment

Asset list screen Click Enviroment

Click Skybox.
Skybox allows you to insert celestial sphere assets into your Scene.

Asset list screen Click [Skybox]

Asset list screen Click [Skybox]

Select your favorite [Skybox] and click it.

Select  [Skybox]

Select [Skybox]

Skybox has switched.
Since one Skybox is applied to one Scene, it has been replaced with the Skybox set by default.
Just changing the Skybox will greatly change the world view, so please try various Skyboxes.

STYLY Studio screen after changing Skybox

Change the Ground

Next, let’s insert a Ground in the Scene.
Deletes the ground that is inserted by default.
Delete [Ground] Default Ground in the hierarchy menu (click the trash can button).

STYLY Studio screen [Ground] Delete Default Ground

Click the Assets button.

Click the Assets button on the STYLY Studio screen

Click Environment.

Asset list screen Click Environment

Asset list screen Click Environment

Click Floor.

Asset list screen Click Floor

Asset list screen Click Floor

If you scroll down, you will see an asset called [Ground].
Select your favorite [Ground] and click.

Asset list screen Click [Grounds]

Asset list screen Click [Grounds]

Ground has been inserted.
I was able to create the sky and the ground.
Let’s insert a 3D object here.

STYLY Studio screen After inserting Ground

Insert a 3D object into a Scene

Let’s insert a 3D object into the Scene.
This time, we will insert a 3D object from Google Poly.
First, click the Assets button.

Click the Assets button on the STYLY Studio screen

Click 3D Object.

Asset list screen Click the 3D Object button

Asset list screen Click the 3D Object button

Click Model.

 Modelボタンをクリック

You can narrow down the categories with the category button.
Also, in the search form, you can enter keywords to search and the search result screen will be updated.

Use the category buttons to narrow down the categories.

Use the category buttons to narrow down the categories.

Find your favorite 3D object and insert it into your Scene.
This time, enter “animal” in the search form and try searching.
The animal 3D object will then appear on the search results page.

Click Lion.

Enter your search terms in the search form and click the Search button.

Enter your search terms in the search form and click the Search button.

The selected asset has been inserted into the Scene.
However, Lion’s assets are embedded in the ground, so let’s operate the assets, move and rotate them to your favorite position, and change them to your favorite size.
Next, I will introduce how to operate assets (move, rotate, scale).

STYLY Studio screen After inserting 3D object

How to operate assets (move / rotate / enlarge / reduce)

Introducing how to operate assets (move / rotate / enlarge / reduce) using Lion assets.
Select the asset you want to work with.
The selected asset will turn yellow.
To select an asset, click Asset in the Hierarchy menu or click Asset on Scene.

STYLY Studio screen 3D object operation method

When you select an asset, the asset will display a manipulator.
A manipulator is an arrow in three directions: red, green, and blue.

STYLY Studio screen manipulator

You can switch between move, rotate, and scale from the move / rotate / scale button on the side menu.
Alternatively, you can switch using the shortcut keys below.

  • [W]key: Move
  • [E]key: Rotate
  • [R]key: Enlargement / reduction

Switching the STYLY Studio screen operation method

Move

Move STYLY Studio screen

You can move assets by switching to move mode and dragging the manipulator.
You can also use Ctrl + Z to return the asset to its previous state.

Undo moving assets with Ctrl + Z

Rotation

STYLY Studio screen rotation

You can rotate the asset by switching to rotation mode and dragging the manipulator.

Enlargement / reduction

STYLY Studio screen scaling

You can zoom in and out by switching to zoom mode and dragging the manipulator.

How to operate by directly entering numerical values

STYLY Studio screen manipulator numerical input

You can edit the numerical value directly by clicking the numerical value part of the manipulator.
After entering the numerical value, click the [Enter] key to complete.
It supports all move / rotate / enlarge / reduce modes.
If you want to return the operation, click the [Ctrl] key + [Z] key to return the operation.

List of useful shortcut keys

In addition to the above operation methods, the following is a list of useful shortcut keys that can be used with STYLY Studio.

Help button

Help button

Asset manipulation
  • [W] key: Switch the operation method of the asset to the move mode (when the asset is selected)
  • [E] key: Switch the asset operation method to rotation mode (when the asset is selected)
  • [R] key: Switch the operation method of the asset to the enlargement / reduction mode (when the asset is selected)
  • [Ctrl] key + [Z] key: Return to the previous operation
  • [Ctrl] key + [Y] key: Return to before executing Undo
Viewpoint operation
  • [F] key: Focus on the target asset (when the asset is selected)
  • Drag the right mouse button: Rotate view point
  • Drag the left mouse button: Orbit view point
  • Drag the mouse wheel: Move view point
  • Scroll the mouse wheel: Zoom in/out view point
  • [Q] or [W] or [E] or [A] or [S] or [D] key with dragging the right mouse button: Move view point
Hierarchy menu operation
  • [Shift] key + [D] key: Copy asset (when asset is selected)
  • [Del] key: Delete asset (when asset is selected)
  • Asset selection + double click: Focus on the target asset

How to publish / share the created Scene

How to publish a scene

I will show you how to publish the created Scene.
Click the Publish button to go to the Publish screen.

STYLY Studio screen Click the Publish button

As a thumbnail image when publishing a scene, the work viewpoint when the Publish button is pressed is the thumbnail image.

Publish screen

Enter the title name (Title) and description (Description), set the tags, and click the Publish button.
Only English (half-width alphanumeric characters) can be entered in the input form.

Publish screen After clicking the Publish button

Publish screen After clicking the Publish button

Click Open in Gallery.
The Scene you created will be published on the STYLY GALLERY site.

STYLY GALLERY site MyScene page

The scene I made has been published on the gallery site.
Now, various people can see the scene.
Next, I’ll show you how to share Scene.

How to share a scene

How to share on SNS

I will show you how to share a scene on SNS.
If you want to share on Twitter, click the Twitter icon to tweet.
If you want to share on Facebook, click the Facebook icon to post.

STYLY GALLERY site sharing method

STYLY GALLERY site sharing method


STYLY GALLERY site sharing method

STYLY GALLERY site sharing method

Create a STYLY marker

Open the published Scene with STYLY GALLERY.
(The URL will be displayed at the time of publishing, so you can click it or search for the Scene you published from My Page of STYLY GALLERY)

Click "Play in AR"

Click “Play in AR”

You can display the STYLY marker by clicking the Mobile icon.
You can experience the scene by loading the displayed STYLY marker with STYLY Mobile.

STYLY Mobile App Marker

STYLY Mobile App Marker

You can download the STYLY marker (PNG image data) by pressing the download button on the upper right of the popup.
You can also issue a URL that can directly launch STYLY Mobile by pressing the share button on the upper right.

How to experience Scene

There are three ways to experience Scene.

  • VR (only for those who have an HMD)
  • Web Player
  • STYLY Mobile

Please refer to the following article for how to experience the STYLY scene.

In addition, please refer to the following article for the operation method on the VR scene of STYLY Mobile.