UnityWebPlayerとCSSの表示問題と解決策まとめ
Tweet
みなさんこんにちは！
GMOメディアサービス開発部＆Unity部の井田です。
残念なことに、ついに先週ブタさんに初エサやりがありました。（ブタについてはこちらのブタをご参照ください）
さて、今回は以前社内のPCブラウザ向けのUnityコンテンツに携わっていた際に直面したUnityWebPlayer＆CSSの問題に関してまとめます。
UnityWebPlayerの前面にDOM要素を表示できない！
Unityはゲームを作るのには非常に有用です。しかし、GUIを作成するとなると（様々なアセットは存在しますが）HTMLのようにサクッと作成できません。（あくまで個人的な意見ですが。。。）
そこで、キャンペーン等を実施する際などにLightBoxなどのモーダルウィンドウを表示しようと考えますが、UnityWebPlayerの前面にHTML要素を表示できません。
こんなかんじです。『medal the pirates』が弊社の『ゲソてん』というゲームサービスで提供中のUnity製メダル落としゲームです。
グレーの「サンプルです」と書かれたエリアがWebPlayerの後ろに隠れてしまっているのがわかるかと思います。ちなみに指定したCSSは以下。
#sample{
position:absolute
top:200px;
left:200px;
z-index:100;
}
z-index操作は通用しません。Flashのようにwmodeもありません。
さらに、ブラウザによってこの仕様が異なる場合があります。以下がそのリストです。
- Chrome ×
- Firefox ○
- IE ×
ちなみにこの問題はWindowsのみ発生します。Macはどのブラウザも問題ありません。
解決策
それではどうするのか？
主な解決策は以下の通りで、基本はWebPlayerを非表示にします。
- A.display:none
- B.width:0px/height:0px
- C.visibility:hidden
- D.別ウィンドウで開く
各解決策にも問題があります
A(display:none)の場合
display:noneをCSSで指定すると描画処理は継続されません。ユーザにとってはこの方法が一番負荷が少ないかもしれません。
ただし、再表示の負荷伴うと同時に、最悪の場合Unityの再ロードが走ってしまいます。（=その時点での描画状態はおろか処理状態も破棄されてしまいます。）
B/C(width:0など)の場合
この2つの場合、Aとは異なり描画処理は継続されます。そのため、CPU,メモリ,GPUの利用状態はあまり変化がありません。
その代わりに、Aで問題となるリロードの問題が発生しません。
一方で別の問題が発生し、サイズ変更の場合、その分の負荷が伴う、ブラウザ自体の再描画が実行されないとグレーの焼け付きのままUnityが表示・非表示とならない、といったことが発生します。
わかりにくいですがこんなかんじです。グレーの部分が元々UnityWebPlayerが表示されていたエリアです。
マウスを動かしたりすると回復します。
D(別ウィンドウ)の場合
特に描画上、処理上の問題は発生しません。問題としては、HTML側のクリック（またはFlashなど）をトリガーにしないとポップアップブロックに引っかかってしまします。また、開いた別ウィンドウを閉じないまま元のウィンドウへ戻ってしまったり、そもそもウィンドウが開いたことに気づかなかったりなども考えられます。
（これを少しだけ解決したライブラリを作成したのでまた今度公開していけたらと思います）
以上が問題と解決策になりますが、B/Cが最も使いやすく大きな問題も発生しないかと思います。
今回紹介した問題以外にもブラウザやOSによりUnityWebPlayerの問題はいくつか存在します。それらに関しても今後紹介できたらと思います。
ちなみにこれらの内容は経験則の部分が多いので間違っている部分がありましたらご指摘いただけると助かります。
それではまた～ (・ω・)ノシ
