STYLY Studioオンボーディングをクリアして、STYLYの基本操作を身につけよう

STYLY Studioにオンボーディング機能が追加されました。
このチュートリアルをクリアすることにより、STYLYの基本操作を身につけることができます。

オンボーディングシーンの起動方法

STYLY Studioを初めて起動し、まだシーンを作成していない場合、シーン一覧画面に「STYLY On Bording」が表示されます。
これを選択するとオンボーディングシーンが起動されます。

以下のボタンをクリックするとSTYLY Studioが起動してログインしてるアカウントにオンボーディングシーンがコピーされて使用できるようになります。

オンボーディングをSTYLY Studioに追加する

※STYLYに登録していれば、上記ボタンよりオンボーディング機能にアクセスすることができます。
アカウント未登録の場合、新規登録を行ってから再度、本ボタンをクリックしてください。

アカウント登録はこちらから

オンボーディングシーンで5つのステップをクリアする

オンボーディングシーンには全部で5つのステップが用意されており、1つずつステップをクリアしていくことでSTYLYの基本操作を学ぶことができます。

操作を間違えて取り消したいときは、Ctrl + Z (⌘ + Z)を押すことで1つ前の操作を取り消すことができます。
また、操作しているうちに自分がどこにいるかわからなくなってしまった場合は、画面右端のリセットポジションボタンをクリックすると、シーンロード時の視点にリセットできます。

Navigation -操作方法-

Navigation

Navigation

STYLYでは、マウスあるいはトラックパッドを使って操作を行います。

  マウス トラックパッド
Zoom in/out(拡大/縮小) マウスホイール ピンチ
Rotate(カメラの回転) 左クリック+マウス移動 左クリック+スワイプ
Move(カメラの移動) 右クリック+マウス移動
ホイールボタン 中央クリック+マウス移動
右クリック+スワイプ

Undo(取り消し):Ctrl + Z (⌘ + Z)
Reset Position:画面右端のリセットポジションボタンをクリック
hint:ヒエラルキーウィンドウのヒントボタンをクリック

操作に慣れたら、「follow this line」と書かれた点線を追っていきましょう。

STEP01 -オブジェクトの移動-

Moving an object

Moving an object

シーンに配置されているワニを、白いサークルまで移動させてみましょう。
STYLYでオブジェクトを移動させるには、以下の手順に従ってください。

  1. ヒエラルキーウィンドウで移動させたいオブジェクトを選択します。(あるいはシーンでオブジェクトを直接選択)
  2.  オブジェクトの編集モードが「move」になっていることを確認してください。
    (異なるモードになっている場合は、画面右のトグルボタンを押すかWキーを押してモードを変更してください)
  3. 矢印の先端をクリックし、オブジェクトを移動させます。
Moving an object

Moving an object

ワニを白いサークルまで移動させると、クリアとなり花火が打ち上げられます。
次のステップに進みましょう。

STEP02 -オブジェクトの回転-

Rotating an object

Rotating an object

STEP02に進むと、白いサークルの上に動物が配置されていません。
ヒエラルキーウィンドウの「giraffe」のサムネイルをクリックしてみてください。
シーンにキリンが現れます。このように、STYLYではヒエラルキーウィンドウのサムネイルをクリックすることにより、オブジェクトの表示/非表示を切り替えることができます。

Rotating an object

Rotating an object

シーンに配置されているキリンを回転させてみましょう。
STYLYでオブジェクトを回転させるには、以下の手順に従ってください。

  1. ヒエラルキーウィンドウで移動させたいオブジェクトを選択します。(あるいはシーンでオブジェクトを直接選択)
  2.  オブジェクトの編集モードが「rotate」になっていることを確認してください。
    (異なるモードになっている場合は、画面右のトグルボタンを押すかEキーを押してモードを変更してください)
  3. サークルをクリックし、オブジェクトを回転させます。

STEP03 -オブジェクトの拡大/縮小-

Scaling an object

Scaling an object

STEP02同様、ヒエラルキーウィンドウの「elephant」のサムネイルをクリックしてオブジェクトをアクティブにしましょう。

シーンに配置されているゾウのスケールを変更してみましょう。
STYLYでオブジェクトのスケールを変更するには、以下の手順に従ってください。

  1. ヒエラルキーウィンドウで移動させたいオブジェクトを選択します。(あるいはシーンでオブジェクトを直接選択)
  2.  オブジェクトの編集モードが「scale」になっていることを確認してください。
    (異なるモードになっている場合は、画面右のトグルボタンを押すかRキーを押してモードを変更してください))
  3. ボックスをクリックし、オブジェクトのスケールを変更します。

STEP04 -アセットの配置-

Importing default assets

Importing default assets

STEP04では、シーンに新たなアセットを追加する方法を学びます。

ヒエラルキーウィンドウ上部のアセットボタンをクリックし、アセットメニューを開きます。
そして「3D Model」を選択します。

3D modelを選択

3D modelを選択

3D Modelメニューが開いたら、タブを「3D Models」に切り替え、ライオンの3Dモデルを探します。
見つけたらクリックしてください。シーンにライオンが配置されます。

ライオンを選択

ライオンを選択

あとはSTEP01と同様の手順で、ライオンを白いサークルまで移動させましょう。

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

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

STEP05 -Other Tips-

STEP05では、その他のTipsを紹介しています。
ボードに書かれた内容を読み終えたら、ボード下部に存在するSTYLYロゴをクリックしてください。
次のTipsが現れます。

様々なアセットを追加

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

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

STYLY Studioでは、シーンに3Dモデルや画像、動画などを配置することができます。
STYLYシーンにどのようなものを配置できるかは、こちらの記事で詳しく解説しています。

カメラ機能

Other tips -カメラで撮影-

Other tips -カメラで撮影-

STYLY Studioにはカメラ機能が備わっており、この機能を使うとWebEditor上でシーンを撮影することができます。
作成したシーンを動画にすることで、より魅力的に見せることができます。
カメラ機能については、こちらの記事で詳しく紹介しています。

STYLY Gallery

Other tips -STYLY Gallery-

Other tips -STYLY Gallery-

STYLY Galleryは、STYLY Studioでパブリッシュされたシーンを閲覧できるギャラリーサイトです。
世界中のアーティストが作成したVRシーンが集まっており、すでに8000を超えるシーンが存在しています。

新しいシーンの作成

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

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

新しいシーンを作成する場合は、画面左上のボタンをクリックしてシーンメニューを開きます。
そして「Create Scene」を選択してタイトルを記入し、「Create」を押すと新しいシーンが作成されます。
シーンの作成・公開方法については、こちらの記事で詳しく解説しています。

Congratulations !

Congratulations !

Congratulations !

すべてのTipsを読み終えると空の色が反転し、オンボーディング終了となります。

まとめ

オンボーディングを終えたら、さっそくSTYLYシーンを作成してみましょう。
どんなシーンをつくればよいかわからないときは、STYLY Galleryを覗いてみましょう。

また、STYLY MagazineにはVR空間を作るうえでのヒントがたくさん掲載されています。

これらをうまく使って、STYLYシーンの作成に挑戦してみてください。