Complete the STYLY Studio Onboarding, and learn the basic functions of STYLY

An onboarding function has been added to STYLY Studio.
By completing this tutorial, users can learn the basic functions of STYLY.

How to run the Onboarding Scene

When an user runs STYLY Studio for the first time and hasn’t created a scene yet, a scene named ‘STYLY ON Bording’ will show up in the Scene list.
When this scene is selected, the Onboarding Scene will activate.

Or by clicking the button below, STYLY Studio will run automatically, and the onboarding scene will be copied to the account logged in.

Adding the Onboarding Scene to STYLY Studio

If you do not have an account, please register first, then click the button.

You can register your account from here.

Complete 5 steps in the Onboarding Scene

There are 5 steps included in the Onboarding Scene, and by completing each step one by one, users can learn the basic functions of STYLY.

When you want to undo an operation, you can use Ctrl + Z (⌘ + Z) to undo the previous one.
If you get lost while moving the scene, you can click the Reset Position button on the right to reset the point of view to the default position.

Navigation -Basic operations-

Navigation

Navigation

You can use either a mouse or a trackpad with STYLY.

Mouse Trackpad
Zoom in/out Mouse wheel Pinch
Rotate Left click+Mouse movement Left click+Swipe
Move Right click+Mouse movement
Wheel button center click+Mouse movement
Right click+Swipe

Undo:Ctrl + Z (⌘ + Z)
Reset Position:Click the Reset Position button on the right
hint:Click the Hint button in the hierarchy window

Once you get familiar with the operations, follow the ‘follow this line’ line, as instructed.

STEP01 -Moving an object-

Moving an object

Moving an object

Move the crocodile in the scene to the white circle.
To move an object in STYLY, follow the directions below.

  1. Select the object in the hierarchy window. (Or, you can simply click the object within the scene)
  2. Check if the edit mode of the object is set to ‘move’.
    (If it is set to a different mode, click the toggle button on the right, or press the W key to change the mode)
  3. Click the arrow tip, and move the object.
Moving an object

Moving an object

If you successfully move the crocodile to the white circle, the step is complete and fireworks will go up.
Let’s move on the next step.

STEP02 -Rotating an object-

Rotating an object

Rotating an object

When you move on to STEP02, there will be no animal on the white circle.
Click on the ‘Giraffe’ thumbnail in the hierarchy window.
A giraffe will appear in the scene. In STYLY, you can click the thumbnail in the hierarchy window to show/hide an object.

Rotating an object

Rotating an object

Let’s rotate the giraffe in the scene.
To rotate an object in STYLY, follow the directions below.

  1. Select the object in the hierarchy window. (Or, you can simply click the object within the scene)
  2. Check if the edit mode of the object is set to ‘rotate’.
    (If it is set to a different mode, click the toggle button on the right, or press the E key to change the mode)
  3. Click the circle, and rotate the object.

STEP03 -Scaling an object-

Scaling an object

Scaling an object

As in STEP02, click the ‘elephant’ thumbnail in the hierarchy window, and activate the object.

Let’s change the scale of the elephant in the scene.
To scale an object in STYLY, follow the directions below.

  1. Select the object in the hierarchy window. (Or, you can simply click the object within the scene)
  2. Check if the edit mode of the object is set to ‘scale’.
    (If it is set to a different mode, click the toggle button on the right, or press the R key to change the mode)
  3. Click the circle, and change the scale of the object.

STEP04 -Importing default assets-

Importing default assets

Importing default assets

In STEP04, we learn how to add new assets to the scene.

Click the asset button at the top of the hierarchy window, and open the asset menu.
Then, choose ‘3D Model’.

3D modelを選択

Select 3D model

Once you open the 3D Model menu, select the ‘3D Models’ tab, and search for a lion 3D model.
Click on it when you find it. A Lion will be added to the scene.

ライオンを選択

Select Lion

As you did in STEP01, move the lion to the white circle.

ライオンを白いサークルまで移動させる

Moving the lion to the white circle

STEP05 -Other Tips-

In STEP05, you can learn other tips.
After you read what’s written on the board, click the STYLY logo at the bottom of the board.
The next Tips will be displayed.

Adding other assets

Other tips -様々なアセットの追加-

Other tips -Adding other assets-

In STYLY Studio, you can import and place 3D models, images, or video files into your scene.
You can learn details about what you can upload to a STYLY scene in this article.

Camera function

Other tips -カメラで撮影-

Other tips -Using the camera-

STYLY Studio has a camera function, and by using this, you can take pictures of a scene in the WebEditor.
By creating a video from the scene, you can show the appeals of your scene effectively.
You can learn more details about the camera function in this article.

STYLY Gallery

Other tips -STYLY Gallery-

Other tips -STYLY Gallery-

STYLY Galleryis a gallery website where users can view published STYLY scenes.
There are scenes published from artists from all over the world, and currently there are more than 8000 scenes.

Creating a new scene

Other tips -新しいシーンの作成-

Other tips -Creating a new scene-

When you want to create a new scene, click the button at the upper left, and open the scene menu.
Then select ‘Create Scene’, type in the title, and click ‘Create’ to create the Scene.
You can learn more details about how to create and publish a scene in this article.

Congratulations !

Congratulations !

Congratulations !

Once you read all of the Tips, the sky colour will invert, and the onboarding is complete.

Conclusion

After you complete the onboarding, create a new STYLY scene for yourself.
If you are unsure on what kind of scene you want to create, you could look for hints in the STYLY Gallery.

Also, there are many hints and tips on creating a VR scene on STYLY Magazine.

I hope you utilize these documents, and create your original STYLY scene.