冬真っ盛りということで、最近は出社途中に缶コーヒーを購入して飲みながら歩いているのですが、つい先日、女子高生の集団からすれ違いざまに
「ってか、コーヒー飲んでるしｗｗｗｗ」
と声を掛けられました。モテるって辛いですね。おっさんでもコーヒーくらい飲むわ。
ここから主題
さて、メニュー画面やショップ画面などでUI(uGUI)より上に3Dオブジェクトを表示したいケースってあると思います。
そんな時は大抵、UIのキャンバスのRender Modeを「Screen Space - Camera」に設定して、UIの前に3Dオブジェクトを置くことで実現できるのですが、例えば下の画像の帽子や杖のように、３DモデルをUIに合わせて画面の端に表示したい場合、その方法ではちょっと難しいです。
携帯は機種によって画面のサイズが異なります。
UIはAnchorsを設定することで画面サイズが変わっても相対位置が変わらないようにできるのですが、3Dオブジェクトの場合は画面サイズが変わっても表示位置は変わらないので、上の画面の場合、画面サイズの幅を広くするとUIの枠線だけ画面端に表示されて、3Dオブジェクトは枠線からずれて表示されてしまいます。
なので、その対応としてRender TextureとRawImageを使った方法を紹介したいと思います。
作成手順
1．3Dオブジェクトを表示するためのTextureを作成する
まずはProjectsタブのAssetsフォルダ内で右クリック→Create→Render TextureでRenderTextureを生成します。
2．3Dオブジェクトを表示するためのカメラを作成する
次に３Dオブジェクトを表示する専用のカメラを作成、そしてカメラのTargetTexrureの設定に先ほど作成したRenderTextureを指定します。
3．カメラの前に表示する3Dオブジェクトを設置する
作成した3Dオブジェクト表示用カメラの前に3Dオブジェクトを並べます。
こんな感じで
そうするとRenderTextureにカメラの撮影した画像が表示されるようになります。
4．RenderTextureを表示するためのRawImageを作成する。
3Dモデルを表示させたい位置にRawImageを作成し、Textureの項目に作成した
RenderTextureを指定します。
今回の場合、RawImageをUIの子オブジェクトとして作成すれば、UIの上に3Dモデルが表示されるようになるのですが、このままでは余計なものまで表示されてしまいます。
5．Maskを使って必要な箇所だけ表示する
MaskをUIの子オブジェクトとして作成し、Maskの子オブジェクトとしてRawImageを定義してあげます。
実際に作成して
この方法によりRawImageのAnchorsを指定することで画面サイズが変わっても相対的な位置が変わることはなくなります。
また、アイテムの切り替え等のアニメーションもオブジェクトの位置を横にずらすだけならので実装が簡単になりました。
今回は長めでしたね。ここまで読んでくれてありがとうございます。
