![見出し画像](https://assets.st-note.com/production/uploads/images/24397763/rectangle_large_type_2_ea67ba6624ae8c936f7dd94174f08b9c.png?width=800)
Cubism 4 SDK for Unity お試しガイド (3/4)
←前の記事: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用に書き出そう!
![画像1](https://assets.st-note.com/production/uploads/images/23736757/picture_pc_e3e0a4e2318e74777e47d3af5c3ee67d.png)
メニューバーから File > Build Settings をクリックします。
![画像2](https://assets.st-note.com/production/uploads/images/23736816/picture_pc_45a5c85b84cde69b6ed43e716aaf5b35.png?width=800)
すると「Build Settingsウィンドウ」が開かれます。
これはUnityから各プラットフォームに書き出す際の設定を行うウィンドウです。
![画像6](https://assets.st-note.com/production/uploads/images/23737218/picture_pc_e85a16bcfec9f2458b5d6ff77ca71fba.png?width=800)
ウィンドウ上部の「Scenes In Build」の部分にあるものが、書き出し時に含まれるシーンファイルです。
![画像3](https://assets.st-note.com/production/uploads/images/23737015/picture_pc_4a1d719e0800fec3e096ec95562c37d1.png)
先程保存したシーンのファイルをここにドラッグアンドドロップして、このシーンのみがチェックが入っている状態にしてください。
そのシーンが既に「Scenes In Build」に追加されているのであれば設定は不要です。
シーンにチェックが入っているかご確認ください。
![画像4](https://assets.st-note.com/production/uploads/images/23737124/picture_pc_11d186dcaa57db02e62d4cdcdb52ad59.png?width=800)
右側の数字が0になっているシーンが、書き出したアプリケーションを起動したときに一番最初に開かれるシーンとなります。
「Scenes In Build」の部分に複数のシーンがある場合、使用するシーンを一番上に並び替えるか、使用しないシーンのチェックを外してください。
![画像5](https://assets.st-note.com/production/uploads/images/23737173/picture_pc_0ecb91b96fc749ba6fbe2c8365b4525c.png)
左下のリストは書き出すプラットフォームの一覧です。
プラットフォーム名の右側にUnityのロゴが表示されているものが、現在設定されている書き出すプラットフォームになります。
![画像7](https://assets.st-note.com/production/uploads/images/23737263/picture_pc_f1faefb0d00e8d7517a58246d13d4fce.png)
この時の状態は、プラットフォームが「PC, Mac & Linux Standalone」向けの書き出し設定…つまり、PC用に書き出すための設定状態です。
![画像8](https://assets.st-note.com/production/uploads/images/23737342/picture_pc_1d3f5b99b9db96750de9525d2ca49495.png)
もし「PC, Mac & Linux Standalone」の右側にUnityのロゴがない場合、違うプラットフォームが選択されていますので、「PC, Mac & Linux Standalone」を選択状態にしてウィンドウ右下の「Switch Platform」をクリックして切り替えてください。
これで、PC用に書き出す設定になりました。
このまま書き出しても構いませんが、さらに設定を変えないとフルスクリーンで起動してしまいます。
ここでウィンドウで起動するように詳細な設定を変更しておきましょう。
![画像9](https://assets.st-note.com/production/uploads/images/23737400/picture_pc_479932d8e328e2210a4cd61f0d6a0334.png)
「Build Settings」ウィンドウ左下の「Player Settings...」ボタンをクリックします。
![画像10](https://assets.st-note.com/production/uploads/images/23737465/picture_pc_d84950b72e76cd5ea767b5ad38197cc1.png?width=800)
すると「Project Settingsウィンドウ」が開かれます。
ここでは、書き出すアプリケーションの詳細な設定を変更できます。
アプリケーションのウィンドウの設定を変えたいので、「Resolution and Presentation」をクリックして設定を開きます。
項目中の「Fullscreen Mode」の設定を「Windowed」に変更します。
これで、書き出したアプリケーションは起動したときにフルスクリーンではなく、ウィンドウが伴った状態で起動します。
![画像11](https://assets.st-note.com/production/uploads/images/23737609/picture_pc_004d8b9ab1ffa3e5c0086594601c0a2f.png)
次に、ウィンドウの幅と高さを設定します。
「Default Screen Widthフィールド」を「768」に、
「Default Screen Heightフィールド」を「1024」にします。
このように設定すると、モニター上に縦長のウィンドウを伴ってアプリケーションの画面が表示されます。
これで設定は完了です。
それでは、いよいよPC用に書き出します。
![画像12](https://assets.st-note.com/production/uploads/images/23737735/picture_pc_77e3f8bfdff89fd9a11f5681b9736ce7.png)
「Build Settings」ウィンドウに戻り、プラットフォームの「PC, Mac & Linux Standalone」が選択されている状態で、右下の「Build And Run」をクリックします。
![画像13](https://assets.st-note.com/production/uploads/images/23743620/picture_pc_5c41942f257a27ecaa2c9f9a2e6a348a.png?width=800)
すると、書き出したアプリケーションを保存するフォルダーの選択を促すダイアログが出現します。
保存場所のフォルダーを選択して、右下の「フォルダーの選択」ボタンをクリックします。
注:Unityのプロジェクト内にあるAssetsフォルダーとその中は、Unityでアプリケーションを作る際の素材をいれるフォルダーなので、Assetフォルダー以外を選びましょう。
選択したフォルダー内に書き出したアプリケーションを構成するファイルなどが書き出されますので、新たにフォルダーを作ることをおすすめします。
![画像14](https://assets.st-note.com/production/uploads/images/23743638/picture_pc_e10b3e04cdc3c540ff3f77a4b9ab27fa.png?width=800)
書き出しが終わると、自動的に書き出したアプリケーションが起動し、先ほど作成したシーンがウィンドウ内で実行されています。
「Build Settingsウィンドウ」でプラットフォームを切り替えることで、いろいろなプラットフォームに書き出すことができます。
Unityが書き出すことができるプラットフォームの中にはWebGLがあり、このプラットフォームはブラウザー上で実行できるスクリプト言語を使用したアプリケーションとなっています。
このWebGL書き出しを利用して、Twitterのツイート上でリアルタイムに動かしてみましょう!
8. UnityからWebGL用に書き出そう!
まずは書き出すプラットフォームをWebGLに切り替えます。
![画像15](https://assets.st-note.com/production/uploads/images/23744025/picture_pc_9b60f10a61ac54b07f259b14aa0eaf6e.png?width=800)
「Build Settingsウィンドウ」左下の「Platform」の項目から「WebGL」をクリックして、右下の「Switch Platform」ボタンをクリックします。
![画像16](https://assets.st-note.com/production/uploads/images/23746002/picture_pc_12a5ea800f74693a401f081616d9f811.png)
読み込みが完了して、「WebGL」の項目の右側にUnityのアイコンが表示されていればOKです。
![画像21](https://assets.st-note.com/production/uploads/images/24054229/picture_pc_081d7f37e155aad5a268b79f8908fcf2.png)
書き出しプラットフォームをWebGLに切り替えたら、もう一度「Project Settings」ウィンドウを開き、WebGLで表示される幅と高さを設定します。
ここでは「Default Screen Widthフィールド」を「490」に、
「Default Screen Heightフィールド」を「490」にします。
この値は要調整です。
![画像21](https://assets.st-note.com/production/uploads/images/24054170/picture_pc_552878a86c095c956a5ddfeed82d0a26.png)
そのすぐ下にある「WebGL Template」で「Minimal」をクリックします。
![](https://assets.st-note.com/img/1712630725706-WNbskHyIJE.png)
(2024/04/09追記) 最後に、Publishing Settings内 Decompression Fallback のチェックを入れてください。
![画像17](https://assets.st-note.com/production/uploads/images/23746097/picture_pc_7979a1d170d6573bdff30ed19dd737c8.png?width=800)
以上の設定が終わったら、「Build Settings」ウィンドウ右下の「Build」をクリックします。
![画像18](https://assets.st-note.com/production/uploads/images/23746415/picture_pc_d124ab9cc7d0da574bd8721139f5b431.png?width=800)
PC用に書き出したときと同様に、書き出し先フォルダを選択して「フォルダーの選択」をクリックします。
ここではデスクトップにフォルダを作成します。
※「Build And Run」をクリックしても大丈夫です。その場合、書き出しが完了した後にブラウザーでプレビューが開かれます。
![画像19](https://assets.st-note.com/production/uploads/images/23747419/picture_pc_7afe8291a2897c1d096da094174f876b.png)
最後に、サムネイル用の画像をそのフォルダーの「index.html」と同じ場所に入れます。
以上でWebGL用の書き出しは完了です。
次の記事では、この書き出したWebGLのプロジェクトを、ブラウザで開くためにサーバーにアップします。
ついにTweetへ表示することができますよ!
←前の記事:Cubism 4 SDK for Unity お試しガイド (2/4)
→次の記事:Cubism 4 SDK for Unity お試しガイド (4/4)
この記事が気に入ったらサポートをしてみませんか?