「STYLY」の機能と操作を30分で学べるチュートリアル

NEWVIEWのデザインプラットフォーム「STYLY」の基本的な機能と操作を30分で学べるチュートリアルです。
「STYLY」はアセットと呼ばれる素材を取り込み、3D上に配置することで簡単に3D空間をデザインできるツールです。クリエイターでんすけ28号のスタジアムを作りながら学んでいきましょう。

 ※こちらのページにてSTYLYの推奨動作環境をご確認ください。

 

0.STYLYアカウント登録方法

STYLYにアクセスします

[CREATE YOUR VR SPACE FOR FREE]ボタンを押下します。

STYLYアカウント登録方法_01.png

①:Screen name、②:Email Address、③:Passwordを入力します。
Screen name:スクリーンネーム(※この名前がVRを公開する際のURLに含まれます。後々変更できませんのでご注意ください。)

STYLYアカウント登録方法_02.png

次に、[Sign up]ボタンを押下します。

STYLYアカウント登録方法_03.png

STYLYアカウント登録完了です。

STYLYアカウント登録方法_04.png
 

1.まずSTYLY Editorを起動します。

STYLYアカウント登録完了後の方はそのままのページで、ページを開いていない方は、下のボタンを押してSTYLY Editorのページを開いてください。

1.STYLY Editorの起動_01.png

[Home]を選択し(デフォルトで選択済み)、[Launch STYLY Editor]ボタンを押下します。

※次の画面の表示までに少し時間がかかる場合があります。

 

2.シーンの新規作成

2.シーンの新規作成_01.png

シーンと呼ぶ3D空間のフィールドを作成します。

[Create Scene]を押下してください。

2.シーンの新規作成_02.png

Please enter title...と入力されている白い入力フォームにシーン名を入力します。

2.シーンの新規作成_03.png

シーン名を入力したら、[Create]ボタンを押下してください。STYLYのエディタ(作業画面)が開きます。

 

3.STYLYエディタ画面説明

エディタ画面の説明をします。こちらはエディタの初期設定画面になります。画面上のパネル、ツールの配置と機能をまずは覚えましょう。

3.STYLYエディタ画面説明_01.png

(1)トップボタン

①:Scenes(シーンマネージャーボタン)
シーンマネージャー画面を開きます。

②:Assets(アセットリストボタン)
アセットリスト画面を開きます。

③:Publish(パブリッシュボタン)
パブリッシュ画面を開きます。

(2)ヒエラルキー

シーンに配置したアセットが一覧表示されます。
ここからアセットを選択し、アセットの削除・移動・回転・拡大・縮小ができます。

⑤:Directional Light(シーン上だと⑤')
⑥:[Ground] DefaultGround(シーン上だと⑥’)
⑦:[Skybox] Default(シーン上だと⑦’)

(3)VRスタートポジション

⑧:VRでシーンを再生した際の初期位置

(4)シーンギズモ

⑨:シーンギズモはカメラが現在向かっている方角を示しています。
また赤・緑・青のコーンをクリックすることで、それらの方角を前方とする角度にカメラの視点を素早く切り替えることができます。

(5)サイドボタン

⑩:リセットポジション
カメラの位置をStart Positionまで戻します。

⑪:ショートカットボタン
エディタで使用できるショートカット集を閲覧できます。

 

4.視点を変更してみる

4.1.遠近の視点移動

マウスホイールを前後に動かすことによって、視点の遠近を変更することができます

<Windows>
マウスホイールを前後に操作

<Mac>
トラックパッドで2本指 or マウスを上下移動

4.2.上下左右の視点移動

<Windows>
マウスホイールボタンを押し込みながら、マウス移動。またはマウス右ボタンを押し込みながら、マウス移動

<Mac>
右クリックを押しながら、トラックパッド or マウスを移動

4.3.回転(上下左右)

<Windows>
「Alt」+マウス左ボタンを押し込みなら、マウス移動

<Mac>
optionボタンを押しながら、トラックパッド or マウスを移動

 

5.デフォルトアセットの削除

デフォルト(初期設定)時に設定されているアセット(素材)を削除することができます。空の状態で作品を作りたい方は、手順に沿って削除ください。

5.デフォルトアセットの削除_01.png

ヒエラルキーから[Ground]DefaultGround、[Skybox]Defaultのアセットを削除する。

[Ground]DefaultGroundを選択し、[✕]ボタンを押下する。

[Skybox]Defaultを選択し、[✕]ボタンを押下する。

 

6.アセット(素材)の配置

Assets(アセットリストボタン) を押下します。

6.アセットの配置_02.png

[3DModel]ボタンを押下します。

アセットの配置_03.png

[My Models]を選択します。

アセットの配置_04.png

アセット[Stadium Prefab]を選択します。

6.アセットの配置_05.png

同じ手順で人物のアセット(素材)をシーンに配置してみてください。

アセットの配置_05.png
 

7.アセット(素材)の移動・回転・拡大・縮小

7.1.移動

7.アセットの移動・回転・拡大・縮小_01.png

移動したいアセット(素材)を選択(①ヒエラルキーから選択、②直接アセットを選択)します。

選択したアセット(素材)が黄色になります。

キーボードの「W」キーを押下、または③[<>]ボタンを押下し、moveに切り替えます。

7.1.移動_02.png
  • 赤:X軸(横)
  • 緑:Y軸(横)
  • 青:Z軸(奥行)

マニュピレーターの三色の矢印は3D空間に置ける方向を表しています。

この矢印をクリック&ドラッグすることで任意の方向にアセットを移動させることができます。

 

7.2.回転

移動したいアセットを選択(①ヒエラルキーから選択、②直接アセットを選択)する

「E」キーを押下、または③[<>]ボタンを押下し、rotateに切り替えます。

7.2.回転_01.png
7.2.回転_02.PNG

球体マニピュレーターの赤・緑・青の線をドラッグすることで、3D空間における軸(X・Y・Z)を支点とした回転が可能です。

たとえば緑の線をドラッグすることで、Y軸を支点とした横回転となります。

 

7.3.縮小・拡大

移動したいアセットを選択(①ヒエラルキーから選択、②直接アセットを選択)する

「R」キーを押下、または③[<>]ボタンを押下し、scaleに切り替えます。

マニピュレーター中央の白い箱を右にドラッグすることでアセットが拡大、左にドラッグすることで縮小されます。

また、赤・緑・青の箱をそれぞれドラッグすることでその方向に対しての拡大・縮小が行えます。

移動・回転・拡大・縮小機能を使用して好きなようにアセットを配置してみてください。

 

8.動画の挿入

8.動画の挿入_01.png

Assets(アセットリストボタン) を押下します。

[Video]ボタンを押下します。

YouTube動画の挿入は①URLから動画を追加する方法と、②キーワードから検索する二種類の方法があります。

①URLから追加

URLからYoutube動画を追加する方法は簡単です。YouTubeサイト内で事前に動画を探し、追加したい動画ページのURLを保持しておきます。
これを次の図のボックス内に入力して、Insert Videoボタンを押します。その後動画のアクセサリーを選択すると、動画がシーンに追加されます。

8.動画の挿入_04.jpg

②キーワード検索から追加

Youtube動画をキーワード検索から追加することも可能です。まず、下のボックスに検索キーワードを入力してください。

8.動画の挿入_05.png

関連した動画が一覧で表示されます。

8.動画の挿入_06.png

「Play on Youtube」をクリックすると、新しいブラウザウィンドウが立ち上がり、ブラウザ上で動画を視聴することができます。動画が決まったら「Insert this video」をクリックします。

8.動画の挿入_06.png

アクセサリーを指定します。通常YouTube動画は16:9サイズのため、Simple video frame 16×9を選択します。

8.動画の挿入_08.png
8.動画の挿入_09.png

シーンにビデオが配置されました。

サイズ、位置を調整してください

完成です。VRで見てみましょう!

HOWTOinfo STYLY.cc