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

現在（2023年1月11日 時点）本記事内の操作方法に不具合があるため調査を進めております。

チュートリアルの代わりとして、STYLY Studioの基本操作を学べるマニュアルがありますので、こちらをご活用ください。

• シーン作成・公開方法を学べるチュートリアル
• 取り込めるアセットを理解しよう

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

 

チュートリアルシーンの起動方法

STYLY Studioが起動したら、右上の「CREATE」をクリックしてください。

シーンのテンプレート選択画面でチュートリアルシーンを選択し、シーン名を入力するとチュートリアルシーンが起動します。

チュートリアルシーンで5つのステップをクリアする

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

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

Navigation -操作方法-

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

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

Undo（取り消し）：Ctrl + Z (⌘ + Z)

Reset Position：画面右端のリセットポジションボタンをクリック
Help：ヒエラルキーウィンドウのヘルプボタンをクリック（ショートカットキー等の操作方法が表示）

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

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

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

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

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

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

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

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

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

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

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

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

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

STEP04 -アセットの配置-

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

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

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

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

STEP05 -Other Tips-

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

様々なアセットを追加

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

カメラ機能

※現在はヒエラルキーウィンドウのPlay modeボタンを押してください。
STYLY Studioにはカメラ機能が備わっており、この機能を使うとSTYLY Studio上でシーンを撮影することができます。
作成したシーンを動画にすることで、より魅力的に見せることができます。
カメラ機能については、こちらの記事で詳しく紹介しています。

STYLY Gallery

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

新しいシーンの作成

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

Congratulations !

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

まとめ

オンボーディングを終えたら、さっそくSTYLYシーンを作成してみましょう。
どんなシーンをつくればよいかわからないときは、STYLY Galleryを覗いてみましょう。
また、STYLY MagazineにはVR空間を作るうえでのヒントがたくさん掲載されています。
これらをうまく使って、STYLYシーンの作成に挑戦してみてください。