概要
本稿はWebGLにビルドした際にGUIが崩れて支障をきたしたときのための記事になります。
イメージするゲーム
ボールを生成して、オブジェクトに当たるとその倍率の得点を計算するシンプルなゲーム
※オブジェクトとテキストの位置が一致していないといけない
が、ビルドするとその位置関係が崩れるという人のための記事
GUIが崩れるイメージ図
ビルド前
WebGLビルド後（全画面）
画面サイズが変わると相対的な座標に位置するGUIが崩れる
解決策
キャンバスの設定のRender ModeをWorld Spaceにしてオブジェクトと同じ位置にGUIを表示させればいける
☞Render Modeについて参考記事
だがしかし
OverlayからWorld Spaceに直に変更すると、GUIサイズが大きいままなので、位置を再調整する手間がかかる
そこで、1手順挟むだけで楽に変更できる
という記事なのだ
解決手順①
まずはRender ModeをCameraに変更する
かつ、Render Cameraにシーン内のカメラを設定する
するとカメラのサイズにキャンバスサイズを再調整してくれる
※この状態でビルドしても崩れる
解決手順②
キャンバスのRender ModeをWorld Spaceにする
GUIが崩れてないことを確認してビルド
すると崩れてな～～い
以上です。