Cubism 4 SDK for Unity お試しガイド (3/4)

2020年5月1日 14:42

←前の記事：Cubism 4 SDK for Unity お試しガイド (2/4)
→次の記事：Cubism 4 SDK for Unity お試しガイド (4/4)

Twitterのツイート上に表示させるためには、WebGL用に書き出す必要があります。
前の記事までで作成したプロジェクトをUnityから書き出す手順を説明します。

※UnityからはWebGL以外にも様々なプラットフォームに書き出すことができますので、以下で一例としてPC用に書き出す手順も説明しています。
ですが、すぐにでもTwitter用に書き出したい場合、PC用へ書き出す手順は飛ばしても構いません。

7. UnityからPC用に書き出そう！

メニューバーから File > Build Settings をクリックします。

すると「Build Settingsウィンドウ」が開かれます。
これはUnityから各プラットフォームに書き出す際の設定を行うウィンドウです。

ウィンドウ上部の「Scenes In Build」の部分にあるものが、書き出し時に含まれるシーンファイルです。

先程保存したシーンのファイルをここにドラッグアンドドロップして、このシーンのみがチェックが入っている状態にしてください。
そのシーンが既に「Scenes In Build」に追加されているのであれば設定は不要です。
シーンにチェックが入っているかご確認ください。

右側の数字が0になっているシーンが、書き出したアプリケーションを起動したときに一番最初に開かれるシーンとなります。
「Scenes In Build」の部分に複数のシーンがある場合、使用するシーンを一番上に並び替えるか、使用しないシーンのチェックを外してください。

左下のリストは書き出すプラットフォームの一覧です。
プラットフォーム名の右側にUnityのロゴが表示されているものが、現在設定されている書き出すプラットフォームになります。

この時の状態は、プラットフォームが「PC, Mac & Linux Standalone」向けの書き出し設定…つまり、PC用に書き出すための設定状態です。

もし「PC, Mac & Linux Standalone」の右側にUnityのロゴがない場合、違うプラットフォームが選択されていますので、「PC, Mac & Linux Standalone」を選択状態にしてウィンドウ右下の「Switch Platform」をクリックして切り替えてください。

これで、PC用に書き出す設定になりました。
このまま書き出しても構いませんが、さらに設定を変えないとフルスクリーンで起動してしまいます。
ここでウィンドウで起動するように詳細な設定を変更しておきましょう。

「Build Settings」ウィンドウ左下の「Player Settings...」ボタンをクリックします。

すると「Project Settingsウィンドウ」が開かれます。
ここでは、書き出すアプリケーションの詳細な設定を変更できます。
アプリケーションのウィンドウの設定を変えたいので、「Resolution and Presentation」をクリックして設定を開きます。
項目中の「Fullscreen Mode」の設定を「Windowed」に変更します。
これで、書き出したアプリケーションは起動したときにフルスクリーンではなく、ウィンドウが伴った状態で起動します。

次に、ウィンドウの幅と高さを設定します。
「Default Screen Widthフィールド」を「768」に、
「Default Screen Heightフィールド」を「1024」にします。
このように設定すると、モニター上に縦長のウィンドウを伴ってアプリケーションの画面が表示されます。

これで設定は完了です。

それでは、いよいよPC用に書き出します。

「Build Settings」ウィンドウに戻り、プラットフォームの「PC, Mac & Linux Standalone」が選択されている状態で、右下の「Build And Run」をクリックします。

すると、書き出したアプリケーションを保存するフォルダーの選択を促すダイアログが出現します。
保存場所のフォルダーを選択して、右下の「フォルダーの選択」ボタンをクリックします。

注：Unityのプロジェクト内にあるAssetsフォルダーとその中は、Unityでアプリケーションを作る際の素材をいれるフォルダーなので、Assetフォルダー以外を選びましょう。
選択したフォルダー内に書き出したアプリケーションを構成するファイルなどが書き出されますので、新たにフォルダーを作ることをおすすめします。

書き出しが終わると、自動的に書き出したアプリケーションが起動し、先ほど作成したシーンがウィンドウ内で実行されています。

「Build Settingsウィンドウ」でプラットフォームを切り替えることで、いろいろなプラットフォームに書き出すことができます。
Unityが書き出すことができるプラットフォームの中にはWebGLがあり、このプラットフォームはブラウザー上で実行できるスクリプト言語を使用したアプリケーションとなっています。
このWebGL書き出しを利用して、Twitterのツイート上でリアルタイムに動かしてみましょう！

8. UnityからWebGL用に書き出そう！

まずは書き出すプラットフォームをWebGLに切り替えます。

「Build Settingsウィンドウ」左下の「Platform」の項目から「WebGL」をクリックして、右下の「Switch Platform」ボタンをクリックします。

読み込みが完了して、「WebGL」の項目の右側にUnityのアイコンが表示されていればOKです。

書き出しプラットフォームをWebGLに切り替えたら、もう一度「Project Settings」ウィンドウを開き、WebGLで表示される幅と高さを設定します。
ここでは「Default Screen Widthフィールド」を「490」に、
「Default Screen Heightフィールド」を「490」にします。
この値は要調整です。