はじめに

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

開発環境等は、基本編をご覧になって下さい。

基本編はこちら

独自HTMLの作成

webgltemplatesの画像

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

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

custom_template設定の画像

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

ここはUnity2019.4と変わらないです。

詳細はこちらのUnity公式マニュアルより

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

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

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

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

テンプレートコピー画像

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

Unityのロゴを消す

プログレスバーの表示を変える。

デフォルトのプログレス画像

起動直後の読み込み画面で、デフォルトではUnityのロゴが表示されていますが、 それを変更したいと思います。

<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との参照を担っています。

Webフロントに知見にある方なら早い話だと思います。

#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と同階層の画像を参照するようになっています。

変更後のプログレス画像

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

画面下部の領域を消す。

画面下部の画像

デフォルトではPCで見た時に、画面下の方にロゴと全画面に するボタンが表示されていますが、あれを消します。

モバイルでは全画面表示され、画面下の方のロゴは表示されないです。

<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.html44行目あたりの、モバイルかどうかで分岐をしている処理 を全部消してしまいます。

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でもモバイルでも全画面表示されるようになります。

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

URPサンプル画像

こちらのユニティちゃん公式サイトより、 2020/07/10に出たばかりのURP向けSunny Side Up(ver1.0.1)を表示してみました。 Unityエンジニアの方なら一度は見たことあるかと思います。

いくつか手順が必要だったので紹介していきたいと思います。

なおここからは、WebGL関係無しに他のプラットフォームでも関係する 内容が出てきます。

別プロジェクトからの移植

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

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

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

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

  • ※１
    • このUnityChanSSUのバージョン:2019.4.8f1
    • 記事での作業バージョン:2020.1.6f1
pacageCopy画像

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

Render Pipelineの設定

Render Piplineの画像

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すると起きるバグを修正します。

Assembly Definitionの場所の画像

Packagesディレクトリ配下のUnity Chan Spring Bone/Editor/com.unity.animations.springbone.editorがこの原因です。

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

Assembly Definitionの設定の画像

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

これで完了です。

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

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

MainCamera

メインカメラ画像

アタッチされているAimConstraitをOffにする。

CAM_FaceCam

FaceCam画像

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

TimeLineをちょっといじる

timeline設定画像

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

/// <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タグで くくることによって表示できます。

https://gaprot-webgl.web.app

中央のユニティちゃんライセンスロゴのボタンを押すと、踊り始めます。

iPhone、Androidでは、メモリ不足のエラーが出て表示できないです。

PCでご覧になってください。

URPがWebGLでも表示できるのか不安でしたが、表示できました。

まとめ

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

PC版のみではあるものの、ユニティちゃんのデモが動いたので、WebGLでも いろんな選択肢がとれるのではないかと思いました。



ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある！一緒に働いてみたい！という方は下記よりご応募お待ちしております。
採用情報をみる

このエントリーをはてなブックマークに追加