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.

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.

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.

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

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

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

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

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 description

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

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.

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.

“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”.

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

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.

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 Environment.

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

Select your favorite [Skybox] and click it.

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.

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).

Click the Assets button.

Click Environment.

Click Floor.

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

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

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 3D Object.

Click 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.

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.

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).

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.

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

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.

• ［Ｗ］key: Move
• ［Ｅ］key: Rotate
• ［Ｒ］key: Enlargement / reduction

Move

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.

Rotation

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

Enlargement / reduction

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

How to operate by directly entering numerical values

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.

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.

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

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.

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

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.

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)

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.

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.