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

Once STYLY Studio is launched, click on “CREATE” in the upper right corner.

Select "CREATE"

Select “CREATE”

If you select a tutorial scene in the scene template selection screen and enter the name of a scene, a tutorial scene will be launched.

Select "Tutorial"

Select “Tutorial”

Complete 5 Steps in the Tutorial Scene

There are 5 steps included in the Onboarding Scene. 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).
If you get lost while moving in a 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.

STEP 1 -Moving an Object-

Moving an object

Moving an Object

Move the crocodile in the scene to the white circle.
Follow the directions below to move an object in STYLY.

  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, then the step is complete and fireworks will go up.
Let’s move on to the next step.

STEP 2 -Rotating an Object-

Rotating an object

Rotating an Object

When you move on to STEP 2 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.

Follow the directions below to rotate an object in STYLY,

  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.

STEP 3 -Scaling an Object-

Scaling an object

Scaling an Object

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

Let’s change the scale of the elephant in the scene.
Follow the directions below to scale an object in STYLY.

  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.

STEP 4 -Importing Default Assets-

Importing default assets

Importing Default Assets

In STEP 4, 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.
Choose ‘3D Model’.

3D modelを選択

Select 3D Model

Once you open the 3D Model menu, select the ‘3D Models’ tab and search for a 3D model of a lion.
Clicking on this 3D Model will add a lion to the scene.

ライオンを選択

Select Lion

Move the lion to the white circle using the directions described in STEP 1.

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

Moving the Lion to the White Circle

STEP 5 -Other Tips-

In STEP 5, you can learn additional tips for using STYLY.
After you read what’s written on the boards you can click the STYLY logo at the bottom of the board to continue on to the next Tips.

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-

In STYLY Studio, there is a camera function. You can use the camera function to take pictures of a scene in the STYLY Studio.
You can also record videos of your scene to help increase your scene’s appeal.
You can learn more details about the camera function in this article.

STYLY Gallery

Other tips -STYLY Gallery-

Other Tips -STYLY Gallery-

STYLY Gallery is a gallery website where users can view published STYLY scenes.
Currently there are more than 8000 scenes in the STYLY Gallery published from artists from all over the world.

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.
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 finish reading all of the Tips, the sky color will invert and your onboarding is complete.

Conclusion

Now that your onboarding is complete, try to create a new STYLY scene for yourself.

Feel free to take a look at the STYLY Gallery for ideas and tips if you are not certain about what kind of scenes you want to create.

Also, there are many ideas and tips on creating a VR scene in the STYLY Magazine.

Lets get started creating your own original STYLY scene.