CanvasとMainCameraの関係がわからない

Question

UnityのUIの作成の仕方がわかりません。まず以下のようにピアノのUIを作りました。

その後にメニューからGameObject ⇨ UI ⇨ TextでTextを配置しました。

しかし、UnityEditor上ではピアノがあるスクリーンにTextが配置されておらず、右斜め上にある大きなキャンバスにTextが配置されています。そして実際に実行してみると以下の画像のようにピアノの上に配置したテキストが表示されています。

UnityのCanvasやMainCameraがよくわかりません。僕はどこでピアノのUIを作成したのでしょうか？また、ピアノのUIが表示されている領域内でTextを配置することはできないのでしょうか？
どなたか分かる方がいれば教えていただきたいです。よろしくお願いします。

Answer 1

ピアノのUIというのは3Dオブジェクトでしょうか？

基本的に、2Dのオブジェクトと3Dのオブジェクトはそれぞれ別々に描画され、それぞれ一枚のテクスチャになります。
それらのテクスチャは最終的に合成されて一枚のテクスチャとなり、描画結果としてスクリーンに表示されます。

UnityのGameビューでは、あたかもピアノとテキストが近い場所に存在しているようにみえまずが、あくまでもそれらは別々の空間(3D空間と2D空間)に存在していたものを描画して合成したものに過ぎません。

ピアノがパッと見UIに見えるのは、カメラが2Dっぽく描画するように設定されているだけでピアノオブジェクトは3D空間に存在しています。

Unityにおいては、デフォルトの空間が3D空間であり、Canvas内が2D空間として扱われます。

ここまでがなぜピアノとテキストが別々の場所に存在するのかの簡単なおさらいです。

ということで、ピアノかテキストどちらかをもう片方の空間に入れ直してあげれば解決するかと思います。
ただし、2Dオブジェクトを3D空間に配置しなおせば3Dオブジェクトになるのかと言えば、そもそも存在の概念が違うので不可能です。

そこで、例えば、ピアノの鍵を3Dオブジェクトではなく、2DオブジェクトのImageなどで作り直すことで、ピアノとテキストの存在する空間を揃えるというのはいかがでしょうか。

Comments

[tarofess]

ご回答ありがとうございます。最初にプロジェクトを作成するときは2Dで作成しました。ピアノのUIのtexture typeはsprite(2D and UI)となって居るので、2Dオブジェクトだと思います。

[t_s]

プロジェクト作成時の2D/3Dモードの選択は、2Dと3Dどちらの空間で開発するかではありません。
例えば、シーンビューの左上に2Dというボタンがあるかと思いますが、それを押すことで2Dモードと3Dモードを切り替えることができます。
つまり、2Dモードで開始したからと言って3Dで開発していないというわけではありません。

また、TextureTypeというのはあくまでも画像の種類のことであり、シーンに配置されているオブジェクトの種類のことではありません。

2Dのオブジェクトは必ずCanvasの子にすることで初めて描画されますが、スクショを見る限りCanvasとピアノオブジェクトは親子関係になっていないので、ピアノは少なくとも2Dオブジェクトではないと思ったのですがいかがでしょうか。

蛇足かもしれませんが、2D = UIではありませんので、UIオブジェクトだからといって2Dとは限りません。

[tarofess]

そうなんですね、UIオブジェクトでも2Dとは限らないのですね。確かにピアノは2Dオブジェクトではありませんでした。TextureTypeは画像の種類のことなのですね。......勉強になります。

Answer 2

質問に初回答なので、分かりにくかったらすみません。

【Main Cameraについて】

MainCameraは、簡単にいうと『視点』です。
例えば、ある場所に行って、山をカメラで撮るところを想像してみてください。
カメラを山の方向に向けて、ズームなどで調節して山を撮りますよね。
このときの山がGameObjectで、カメラがMainCameraなのです。

このMainCameraは使用例は、
横スクロールやRPGの時に、キャラクターが中心に来るように、MainCameraの位置を操作すればいいし、
ズームは、そのままズームしたい時に使います。

ちなみに、このMainCametaを消すと、ゲーム画面そのものがなくなってしまいます。

【UIについて】

いきなりですがマリオのゲーム画面を思い出してください。
《マリオはUnityのものではないのですが、ここではあえてUnityを説明するために取り上げています。》
マリオの画面でUIにあたる部分は、『残り時間』と『残り数』です。

上記のMainCameraの説明での、横スクロールの部分をみてください。
「キャラクターが中心に来るように、MainCameraの位置を操作」と書きました。
つまり『MainCameraが移動するとゲーム全体が移動する』

ところが、マリオのゲーム画面では、マリオが移動しても『残り時間』と『残り数』の表示は動きませんよね。

これが、UIと UIではなGameObjectの違いです。

つまりUIは、MainCameraにどんな操作をしても、『定位置にずっと表示しているObject』なのです。

ちなみにUIの正式名称はUser Interface（ユーザインターフェース）
『操作画面』だそうです。

操作画面なので、メニューボタンや設定ボタン、移動ボタンなどに使えます。

【今回のピアノとText】
今回ピアノが最初にあって、UIのtextを追加したら右上に表示されたということから、ピアノは『UIではないObject』と私は推測します(違ってたらすみません)

ピアノがUIかUIでないかは、MainCameraを動かして、ゲーム画面でピアノが動かなければUI、動けばUIではないObjectというふうに確認します。
私の予想が合ってれば、ピアノは動きます。

もしピアノが動いたのなら、UIのCanvas内にピアノを配置すれば解決します。
ピアノが動かなかった、私には分かりません。

Comments

[sakura_hana]

■SinNyan
＞ピアノがUIかUIでないかを確認するには、MainCameraの、x座標w
ここだけ違います。
UI（uGUI）かそうでないかを決めているのはコンポーネントです。

uGUIならば「Image」か「Raw Image」、
uGUIではない（2Dまたは3Dオブジェクト）なら「〜 Renderer」（恐らくSprite RendererかMesh Renderer）が付いています。

（「ユーザーインターフェース＝ユーザーが操作するボタン等」なのでオブジェクトでもUIは作れます。厳密には「uGUIかそうでないか」という判断を行う必要がある状況です。
「uGUI＝UnityのGUIを作る機能」です）

■tarofessさんへ
＞右斜め上にある大きなキャンバスにTextが配置されています。
CanvasのRender ModeがScreen Spaceになっているとこうなります。
「uGUI」で検索して使い方を１から学んだ方が理解が早いと思います。

[tarofess]

ご回答ありがとうございます。ピアノを選択すると、inspectorのtexture typeはsprite(2D and UI)となっています。MainCameraのサイズを変更しても、ピアノのサイズは変わりませんでした。（ということはUI？）

■sakura_hanaさん
CanvasのRender ModeをScreen Space - Cameraにすることで、ピアノとテキストを同じ画面に表示させることができるようになりました。Render CameraにはMainCameraを指定しました。大変ありがとうございました。