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で使用する

必要要件

Unityのバージョン「Unity 2017.4.x」に対応しています。さらに、以下のコンポーネントがインストールされているか確認してください。

Unity Download Assistant

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

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

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

STYLY WebEditor画面

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

これら異なる種類のアセットでも、アップロードのプロセスは同じです。使用したいアセットをプレハブ化し、STYLYへアップロードするだけです。注意：もしPlayMakerで付けたアクションがSTYLY上でうまく作動しない場合は、一度ブラウザ上のキャッシュを取り除いてみてください。また、STYLYはC#で記述されたスクリプトは対応しておりません。

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

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

UNITY PLUGIN FOR STYLYのダウンロードとインポート

UNITY PLUGIN FOR STYLYを使えば、Unity上で作ったプレハブをSTYLYにアップロード可能です。 UNITY PLUGIN FOR STYLYのダウンロード手順を紹介します。まずは以下のリンクか、もしくはSTYLYのトップ画面のメニューから[DOWNLOAD]メニューからダウンロードページにアクセスしてください https://styly.cc/ja/download/

STYLYトップページ

UNITY PLUGIN FOR STYLY (BETA) ダウンロード手順1

DOWNLOADページに移動したら、UNITY PLUGIN FOR STYLY (BETA) の[DOWNLOAD]ボタンをクリックして、ダウンロードします。ダウンロードが完了したら、UnityのプロジェクトにUNITY PLUGIN FOR STYLY (BETA)をインポートします。

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

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

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

先ほどダウンロードした「STYLY.unitypackage」を選択して、[開く(O)]ボタンをクリックします。

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

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

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

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

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

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

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

STYLY WebEditorへログインします。次に[API Key]メニューを選択します。 API Keyが表示されますので、コピーします。

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」を選択するのは前章と同じです。