Unity WebGLビルドのローディング画面をカスタマイズする方法
初めまして。ミルテと申します。
メタバースのプログラムを担当しています。
今回はUnity WebGLビルドのローディング画面をカスタマイズする方法をご紹介します。
UnityでWebGLビルドを行うと、デフォルトでは以下のようなUnityロゴのみのシンプルなローディング画面が表示されます。
しかし、この画面でロードを待つのは退屈ですので、この画面を編集しようと調べてみたものの、ローディング画面の編集方法に関する情報がほとんど見つかりませんでした。
そこで、今回ローディング画面をカスタマイズした方法を、同じように困っている人のために記事にまとめました。
本記事では、以下の4つの要素をローディング画面に実装する方法を紹介します。
・ ローディング画面に画像のスライドショーを実装
・ ローディングメッセージの追加
・ ローディングバーのデザイン変更
・ ローディング画面のスマホ対応
事前準備
まず、UnityでWebGLビルドを行い、生成されるファイルを確認します。ビルド後、以下のようなフォルダやファイルが作成されます。
今回のカスタマイズに必要な追加ファイルは以下の５つです。
・loading-message.png （ローディングメッセージ画像）
・unity-logo-dark1.png （スライドショー用画像1）
・unity-logo-dark2.png （スライドショー用画像2）
・unity-logo-dark3.png （スライドショー用画像3）
・style.css （ローディング画面のデザインを指定するCSSファイル）
これらをTemplateData フォルダ内に配置します。
画像とCSSファイルをTemplateDataフォルダ内に追加しました。
その他のファイルはデフォルトのものです。
各機能の実装
画像のスライドショーを実装
HTML
index.html にスライドショーを表示する要素を追加します。
CSS
TemplateData/style.css にスライドショーのスタイルを記述します。
JavaScript
スライドショーを制御するスクリプトを index.html の＜script＞タブに追加します。
ローディングメッセージの追加
HTML
index.html にローディングメッセージを追加します。
CSS
TemplateData/style.css にメッセージのスタイルを記述します。
/* ローディングメッセージのスタイル */
ローディングバーのデザイン変更
HTML
index.html にローディングバーを追加します。
CSS
TemplateData/style.css にローディングバーのスタイルを記述します。
ローディング画面のスマホ対応
HTML
index.html にmeta viewport の設定を追加して、スマホでも最適な表示になるように調整します。
CSS
メディアクエリを使用して、画面幅が狭くなるとローディング画面の要素（メッセージ、ロゴ、ローディングバー）のサイズや位置を調整します。
まとめ
これで、Unity WebGL でのカスタマイズを実装したローディング画面が完成しました！
最初にお見せしたこの画面が…
スタイリッシュに生まれ変わりました！
実際の画面の動きはぜひ下記URLから、コムフォートがお届けする自社開発メタバースワールドにて確認してみてください！
https://comfort-inc.co.jp/lp_meta/lp_metaverse_starter-pack.html