UnityからSTYLYにプレハブをアップロードする方法

2018年05月10日 2019年02月19日

本記事では、Unityで作成したプレハブをSTYLY上で使用するための方法をご紹介します。

STYLYでは、3DModel、Particle system（Shuriken）、Light、UI要素、Shader（Amplifed Shaderを使ったもの等）、PlayMakerなどを用いて作成したアセットをプレハブ化してアップロードすることができます。

Unity上でアニメーションやインタラクティブな機能を付与したアセットや、色を付けたLightのアセットなどをSTYLYで使用できます。自分だけの新しい表現方法を追求したい方はぜひチャレンジしてみてください。

1 必要要件
2 アップロード可能なアセットの種類
3 STYLYへアップロードするための準備
4 UnityからSTYLYへのアップロード
5 アップロードしたプレハブをSTYLYで使用する

必要要件

STYLYは「Unity 2019.3.6f1」に対応しています。さらに、以下のコンポーネントがインストールされているか確認してください。

Unity Download Assistant

Windows Build Support (Windowsをお使いの場合、デフォルトでインストールされます。）
Mac Build Support (Macをお使いの場合、デフォルトでインストールされます。)
Android Build Support
WebGL Build Support
iOS Build Support

アップロード可能なアセットの種類

STYLY plugin for Unityを使えばSTYLYに次の種類のアセットを入れ込むことができます。

STYLY Studio

3DModel（Mecanimでアニメーションを付けたものも可能）
Particle system（Shuriken）
Light
UI要素
Shader（Amplifed Shaderを使ったもの等）
PlayMakerを用いたアセット

これら異なる種類のアセットでも、アップロードのプロセスは同じです。
使用したいアセットをプレハブ化し、STYLYへアップロードするだけです。

※注意：
もしPlayMakerで付けたアクションがSTYLY上でうまく作動しない場合は、一度ブラウザ上のキャッシュを取り除いてみてください。また、STYLYはC#で記述されたスクリプトは対応しておりません。

STYLYへアップロードするための準備

UnityからSTYLYへアップロードするための準備として、STYLY plugin for UnityをUnityへインポートします。

STYLY plugin for Unityのダウンロードとインポート

STYLY plugin for Unityを使えば、Unity上で作ったプレハブをSTYLYにアップロード可能です。

STYLY plugin for Unityのダウンロード手順を紹介します。まずは以下のリンクか、もしくはSTYLYのトップ画面のメニューから[DOWNLOAD]メニューからダウンロードページにアクセスしてください

STYLT VR APP/STYLY Plugin for Unity DOWNLOAD

STYLYトップページ

DOWNLOADページに移動したら、ページ下部の[STYLY plugin for Unity DOWNLOAD]ボタンをクリックして、ダウンロードします。

STYLY plugin for Unityをクリック

ダウンロードが完了したら、UnityのプロジェクトにSTYLY plugin for Unityをインポートします。

Unityプロジェクトを開きます。[Assets]メニュー > [Import Package]メニューに進んで、[Custom Package…]メニューをクリックしてください。

Custome Package

先ほどダウンロードした「STYLYPlugin」を選択して、[Open)]ボタンをクリックします。

すべてのチェックボックスにチェックしたまま、[Import]ボタンをクリックします。

インポート後、メニューに[STYLY]が追加され、Projectに[STYLY_Plugin]フォルダが作成されていれば完了です。

UNITY PLUGIN FOR STYLY (BETA) インポート手順4

STYLYアカウントとSTYLY_Pluginを接続する方法

自身のSTYLYアカウントのAPIキーを取得する必要があります。
APIキーの取得方法を紹介します。

アカウントのアイコンをクリック

STYLY Studioへログインし、アカウントのアイコンをクリックしてください。

「Account」をクリック

ポップアップが表示されたら、「Account」をクリックしてください。

AccountタブでAPIキーをコピー

AccountタブにAPIキーがあるので、右のコピーボタンをクリックしてください。

STYLYアカウントとSTYLY_Pluginを接続する手順2

Unityプロジェクトの[STYLY]メニューに進み、[Asset Uploader Settings]をクリックします。

STYLYアカウントとSTYLY_Pluginを接続する手順3

Emailフォームには、アカウントのメールアドレスを入力します。 API Keyには、先ほどコピーしたキーを張り付けてください。これでSTYLYアカウントとSTYLY_Pluginを接続が完了しました。

キャッシュサーバーの設定

STYLYにアップロードする前に、アップロード時間を改善するためにまずローカルキャッシュサーバーを設定します。

Macユーザーの場合：上部メニューバーの「Unity」タブに移動し、「Preferences」をクリックします。

Windowsユーザーの場合：上部メニューバーの「Edit」タブに移動し、「Preferences」をクリックします。

どちらも次の図の画面が現れるはずです。

Cache Server画面のドロップダウンメニューからLocalを選択します。キャッシュ設定はこれで完了です。

UnityからSTYLYへのアップロード

プラグインの準備ができたら、次の手順でSTYLYへアップロードできます。

アップロード対象のファイルサイズの確認方法

プレハブのファイルサイズを確認する方法を紹介します。アップロードには、特にサイズが大きい場合、数分〜それ以上の時間を要しますので、STYLYにアップロードする前にプレハブのファイルサイズを確認しましょう。

アップロードファイルサイズ確認画面

ファイルサイズを確認するには、確認したいプレハブを右クリックし、[STYLY] > [Check File Size]ボタンをクリックしてください。アップロードするプレハブは20MB以下を推奨しています。

UnityからSTYLYにプレハブをアップロードする方法

ファイルサイズ確認したら、Unityで作成したプレハブをSTYLYにアップロードしましょう。

プレハブアップロード画面

アップロード方法を紹介します。アップロードしたいプレハブを右クリックします。 [STYLY] > [Build And Upload Prefab Asset]をクリックします。アップロード処理が実行されます。

UnityからSTYLYにプレハブをアップロードする方法手順2

アップロードの処理が成功すると、ポップアップメッセージ[Upload succeeded.]が表示されますので、[OK]ボタンをクリックしてください。アップロードエラーが表示された場合、エラーが起こった詳しい状況（動作手順やスクリーンキャプチャ）を下記に問い合わせお願いします。エラー問い合わせ先

日本語：https://www.facebook.com/groups/stylyusers/
英語：https://www.facebook.com/groups/STYLY.VR/
メール：info@styly.cc

複数プレハブのアップロード（追記 2018/11/03）

STYLYはプレハブの複数アップロードに対応しました。最新版のSTYLY.unitypackageをダウンロードし、上記と同じ手順でインポートしてください。 Projectシーン内のアップロードしたいプレハブを複数選択してから、右クリックしてください。「STYLY」→「Upload or scene to STYLY」を選択するのは前章と同じです。