見出し画像

Unity2020でWebGLを試してみた！ ～応用編～

アップフロンティア株式会社

応用編では、独自HTMLの作成とUnityエンジニアならよく見かけるであろう、 いつもの"あれ"のWebGLでの表示をやってみたいと思います。

開発環境等は、「Unity2020でWebGLを試してみた！ ～基本編～」を参照ください。

独自HTMLの作成

画像1

Assets/WebGLTemplates/<任意の名前>/

このディレクトリ配下にindex.html、thumbnail.pngを置くことによって、独自のHTMLテンプレートをBuild時に生成することが出来ます。ここに配置した参照される画像ファイルや index.html の内容がそのままBuild時に出力されます。

画像2

Projects Settings -> Player から配置した独自HTMLを設定できるようになります。GaprotTemplate ように thumbnail.png はここに表示されます。
ここは Unity2019.4 と変わらないようです。

詳細はUnity公式マニュアルを参照ください。

デフォルトのHTMLテンプレートをコピー

0から自分でコードを書くより、デフォルトのテンプレートを改造していく方が楽なので、一旦コピーします。

<Unityインストールディレクトリ>/PlaybackEngines/WebGLSupport/BuildTools/WebGLTemplates/

このディレクトリに、ディレクトリのHTMLテンプレートが置いてありますが、 デフォルトのテンプレートを設定して Build すると、同じ内容のものが生成されるので、ディレクトリを追うより、Build して生成された、index.html と TemplateData をコピーして、先ほどの WebGLTemplates 配下の任意のディレクトリに配置した方がサクッと作成ができます。

画像3

このデフォルトのテンプレートをベースに改造を加えていきます。

プログレスバーのUnityロゴを変更してみる

起動直後の読み込み画面のデフォルトのUnityロゴを変更してみます。

画像4

<div id="unity-loading-bar">
       <div id="unity-logo"></div>
       <div id="unity-progress-bar-empty">
       <div id="unity-progress-bar-full"></div>
</div>

index.html の13行目あたりに、プログレスバーの表示について記述している箇所があります。この id が後述する css との参照を担っています。

 #unity -logo { 
  width: 154px; 
  height: 130px; 
  background: url('unity-logo-dark.png') no-repeat center 
} #unity -progress-bar-empty { 
  width: 141px; 
  height: 18px; 
  margin-top: 10px; 
  background: url('progress-bar-empty-dark.png') no-repeat center 
} #unity -progress-bar-full { 
  width: 0%; 
  height: 18px; 
  margin-top: 10px; 
  background: url('progress-bar-full-dark.png') no-repeat center 
}

TemplateData/style.css でこのように画像の設定してある場所があります。(本来は一行で書かれてますが、説明用に改行しています。)
ここのurlを任意のものに書き換えることで、ロゴやプログレスバー画像を差し替えることが出来ます。

デフォルトでは TemplateData と同階層の画像を参照するようになっています。

画像5

変更後このような感じになります。

画面下部の領域を削除してみる

デフォルトではPCで見た時に、画面の下の方にロゴと全画面ボタンが表示されていますが、これを消してみます。
（ちなみに、モバイルでは全画面表示され、画面下の方のロゴは表示されないです。）

画像6

<div id="unity-footer">
     <div id="unity-webgl-logo"></div>
     <div id="unity-fullscreen-button"></div>
     <div id="unity-build-title">GaprotWebGL</div>
</div>

index.html の19行目あたりにこのような、Unity画面の表示設定をしている部分があります。ここを全部消すと表示されなくなります。

var fullscreenButton = document.querySelector("#unity-fullscreen-button");

index.html の42行目あたりのこの ”unity-fullscreen-button” の参照が無くなるので、ここも消しましょう。

 #unity -webgl-logo { ～省略～ } #unity -build-title { ～省略～ } #unity -fullscreen-button { ～省略～ }

TemplateData/style.css のこの参照もいらなくなるので消していきます。

PCでも全画面表示してみる

モバイルとPCの分岐をなくして、PCでもモバイルと同じ設定をしていきます。

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
       container.className = "unity-mobile";
       config.devicePixelRatio = 1;
     } else {
       canvas.style.width = "540px";
       canvas.style.height = "960px";
}

index.html 44行目あたりの「モバイルかどうか」で分岐をしている処理を消してしまいます。

config.devicePixelRatio = 1;

その後に、この一行を追加していきます。

 #unity -container.unity-desktop { ～省略～} #unity -container.unity-mobile {～省略～}

.unity-mobile #unity -canvas {～省略～}

.unity-mobile #unity -footer {～省略～}

次に TemplateData/style.css の中ですが、.unity-desktop、.unity-mobileといった分岐がされているものを消してしまいます。

#unity-container { position: absolute; width: 100%; height: 100% }
#unity-canvas { background: #231F20; width: 100%; height: 100% }

このままではまだ全画面表示されないので、上記の用に width と height を追記します。これで、PCでもモバイルでも全画面表示されるようになります。

いつもの”あれ”を表示してみる

画像7

こちらのユニティちゃん公式サイトより、 2020/07/10 に出たばかりのURP向け Sunny Side Up(ver1.0.1) を表示してみました。 

いくつか手順が必要だったので紹介していきたいと思います。
（なおここからは、WebGL関係無しに他のプラットフォームでも関係する内容になります。）

別プロジェクトからの移植
unitypackage が配布されていないため、解答したプロジェクトから  Assets/UnityChanSSU を自分のプロジェクトに持ってくる必要があります。

同じUnityバージョンならそのままこのプロジェクトで作業でも問題ないのですが、 バージョン(※1)が違うので、安全のために一旦.unitypackageにしてから持ってきました。

UnityChanToonShaderVer2_Project-release-urp-2.2
UnityChanSpringBone-release-1.1

それと、Unity に内蔵されていない Pakage があるため、Packagesディレクトリから上記二つを作業プロジェクトのPackagesディレクトリにコピーする必要あります。

※1
・このUnityChanSSUのバージョン：2019.4.8f1
・記事での作業バージョン：2020.1.6f1

画像8

イメージはこんな感じです。

Render Pipelineの設定

画像9

URP(Universal Render Pipeline) によって描画されているため、 今回ユニティちゃんの描画設定をしている UTS2URPPipelineAsset を設定する必要があります。解凍したプロジェクトそのままの場合はすでに設定されていると思います。

赤枠で囲ってある、Always Included Shaders の追加されている４つですが、 ユニティちゃんプロジェクトでは設定されてましたが、今回はあってもなくても、 差異は感じられませんでした。

Assembly Definitionの設定

Packages\UnityChanSpringBone-release-1.1\Editor\GUI\Inspectors\InspectorFloatSlider.cs(28,30): error CS0246: The type or namespace name 'SerializedProperty' could not be found (are you missing a using directive or an assembly reference?)

Editorのソースコードを全プラットフォームで Build しようとしており、 上記のように Build すると起きる問題に対処していきます。

画像10

Packagesディレクトリ配下の Unity Chan Spring Bone/Editor/com.unity.animations.springbone.editor がこの原因となっているようです。

右上の赤で囲っている、13という数字と目玉みたいなアイコンをクリックすることで、Packages配下のディレクトリを可視化の ON/OFF が出来ます。（Packages配下がなぜか表示されないと思ったら、確認してみてください。）

画像11

Inspector より Platforms の AnyPlatform のチェックを外して、Platforms はEditorのみにします。
これで完了です。

カメラを動かすスクリプトを止める

UnityChanSSU というシーンを開き、 以下二つのカメラを設定します。

MainCamera
アタッチされている AimConstrait を OFF にします。

画像12

CAM_FaceCam
アタッチされている ParentConstraint を OFF にします。 この画像ではオブジェクトごと OFF にしていますが、 ON のままだと顔をアップで映すような映像になります。

画像13

TimeLineをちょっといじる
ユニティちゃんのダンスはTimelineによって管理されています。

画像14

/// <summary>
/// Timelineの操作
/// </summary>
[RequireComponent(typeof(PlayableDirector))]
public class GapTimelineContoller : MonoBehaviour
{
       [SerializeField] 
       private Button _startButton;

       private Transform _buttonParent;
       private PlayableDirector _playableDirector;

       // Start is called before the first frame update
       void Start()
       {
           _playableDirector = GetComponent<PlayableDirector>();
           _playableDirector.Evaluate();
           _buttonParent = _startButton.transform.parent;
           _startButton.onClick.AddListener(playDance);
       }

       /// <summary>
       /// ダンス開始
       /// </summary>
       private void playDance()
       {
           _buttonParent.gameObject.SetActive(false);
           _playableDirector.Play();
       }
}

記事を読んでいる間に勝手に再生されたら困るため、 上記のようなボタンを押したら Timeline を再生するスクリプトを付けました。
Unityに慣れている人ならすぐに分かる内容 かつ WebGLにはあまり関係が無いので詳細は割愛させてもらいます🙇

_playableDirector.Evaluate(); を呼んでいるのは、最初に同じポーズで 固まっている時間が長いのでそれをスキップするためです。
Inspector から PlayOnAwake は OFF にし、InitalTime は"10"にしてあります。

WebGL表示

<p><iframe src="https://gaprot-webgl.web.app/index.html" width="392" height="273" frameborder="0" scrolling="no"></iframe></p>

Build したWebGLアプリの記事内表示方法ですが、上記のようにiframeタグでくくることによって表示できます。
※ サンプルはiPhone、Androidではメモリ不足のエラーが出て表示できないため、PCでご確認ください。
サンプル：https://gaprot-webgl.web.app

中央のユニティちゃんライセンスロゴのボタンを押すと、踊り始めます。
URP が WebGLでも表示できるのか不安でしたが、無事に表示できました。

まとめ

文章にすると長くなってしまいましたが、独自にHTMLをいじる作業は単純なので分かってしまうとあまり難しくありません。 自分はロゴをちょっと変えるだけでも時間がかかってしまいましたが、 Webフロントの知見がある方ならすぐにできてしまうのではないでしょうか？

PC版のみではあるものの、ユニティちゃんのデモが動いたので Unity WebGL でもいろんな選択肢がとれそうです！

この記事が気に入ったらサポートをしてみませんか？