一般男性が趣味を晒していくだけ

社会人をしながら趣味で人生を謳歌している。。。はず

UnityとBlenderでAR家具配置検討アプリを作ってみる#8~UnityでUIを作ってみよう①~

前回ではUnityのAR環境を作って、適当に配置したオブジェクトをスマホを利用して現実に表示するところまでやりましたね。

ちなみに前回↓

hinunun.hatenablog.com

 

さぁ、今回はUnityでアプリに必要となるUIを作っていきます。

。。。といっても、しっかりしたUIを構築するのは後でにして、

とりあえず先にUnityのUI作成はどんな感じなのか触れるくらいにしましょう。

 

※今回は練習なので、今までのプロジェクトではなく、新規プロジェクトでUIだけを作っていきます。新しいプロジェクトを作ってね。

 

 

新規プロジェクトを作成する

それでは、練習用に新規プロジェクトを作成します。

Unity Hubでプロジェクトを新規作成する

プロジェクトを開く際にいつも起動してきたUnity Hubを起動して、新規プロジェクトを作成しましょう。

f:id:hinunun:20211202142835p:plain

f:id:hinunun:20211202151614p:plain

UIって2Dじゃん!!!ってなるとは思いますが、今回の家具配置アプリは3D空間を使用するものなので、3Dのプロジェクトを作成します。

名前は適当に。自分が後で見てわかりやすい名前を付けてください。

テキトーに名前を付けると、数か月後に後悔することになります(笑)

「このプロジェクトなんやっけー?」と言いながら、一つ一つ開いて確認するという地獄が体験できます。

名前はちゃんと付けようね。

あともう一つ。

名前は英数字とアンダーバーかハイフンのみでつけましょうね。

いろいろあるんですよ。いろいろ。

 

UnityでUIを使うための知識を得る

さぁ、UIを配置してみましょう!!!

ヒエラルキービューで右クリックをすると、メニューが表れてUIを追加できます。

とりあえずテキトーに配置してみましょうか。

Imageを選んで作ってみてください。

f:id:hinunun:20211202151745p:plain

f:id:hinunun:20211202151415p:plain

ImageのUIが追加された

配置されました。

配置されたと同時に、ヒエラルキービューに

Canvas

・EventSystem

が追加されたはずです。

まずは、これらの説明をします。

 

Canvasについて

簡単に言うと、”UIを配置するための領域”です。

UIを配置するときは、すべてCanvasの子じゃないとだめです。

今回はいきなりImageを作成したので、Canvasが自動生成されました。

もちろん、Canvasを最初に生成して、その中にImageを配置しても全然OKです。

 

Canvasが生成されると、自動的にコンポーネントが付いてきます。

 

それぞれについて説明していきます。

 

Canvasコンポーネントで設定すること

Canvasコンポーネントでは、主に

  • UIの描画方法の設定
  • 描画するカメラの割り当て

が行えます。

それらは、Render Modeプロパティから設定できます。

Render Modeプロパティには

  • Screen Space - Overlay
  • Screen Space - Camera
  • World Space

があります。

Screen Space - Overlay

f:id:hinunun:20211202162316p:plain

カメラに関係なく、直接画面にCanvasが描画されます。

カメラに関係ないので、常に正面からCanvasが表示されます。

そして、どのオブジェクトよりも前面に表示されるので、3Dオブジェクトが隠れてしまいます。

 

Screen Space - Camera

f:id:hinunun:20211202162411p:plain

RenderCameraに設定したカメラにCanvasが描画されます。

この場合は、カメラに合わせてCanvasも動きます。

カメラに合わせて動くので、これも常に正面からCanvasが表示されます。

これはカメラに合わせて動くので、Canvasより前に他オブジェクトがある場合はCanvasの前にあるオブジェクトがきちんと表示されます。

 

World Space

f:id:hinunun:20211202163331p:plain

EventCameraに設定したカメラにCanvasが描画されます。

これは、Canvasが他の3Dや2Dオブジェクトとして扱われるので、カメラに合わせて動かず、カメラの姿勢によって見え方が変化します。

 

Canvas Scalerコンポーネントで設定すること

Canvas Scalerでは

  • 画面サイズに合わせたUIの拡縮設定

を行えます。

それらは、UI Scale Modeプロパティから設定します。

UI Scale Modeプロパティには

  • Constant Pixel Size
  • Scale With Screen Size
  • Constant Physical Size

があります。

Constant Pixel Size

f:id:hinunun:20211202165104p:plain

画面サイズによらず、UI作成時に設定したPixelサイズで表示されます。

どんな画面でも、UIのPixel数は変わりません。

なので、解像度が変わると、表示サイズが拡縮されます。

 

Scale With Screen Size

f:id:hinunun:20211202165640p:plain

画面サイズに合わせて、UIが拡縮されて表示されます。

画面サイズが小さいほど小さく見えて、画面サイズが大きいほど大きく見えます。

複数の画面サイズで、画面に対して同じ割合でUIを表示したいときにこれを使いましょう。

 

Constant Physical Size

f:id:hinunun:20211202170751p:plain

画面サイズや解像度によらず、実単位で物理的に同じサイズに合わせます。

なので、単位をcmやらinchで指定します。

これで大切なのは、DPI(Dots per Inch)で、1インチ中にどれだけドットが並んでいるかの値です。

DPIさえ正確に入力できれば、画面に表示されているUIを現実世界の実寸法で表示できます。

ものさしアプリとかに使えそうですね。

 

GraphicRaycasterコンポーネントで設定すること

GraphicRaycasterでは

  • Canvas内のUIへの当たり判定

を行います。

レイキャストとは、ある地点から特定の方向にレーザービーム(光)を出したみたいに直線を引いていくことです。その引いた直線がUIに当たったことを判定するって感じですね。

このコンポーネントが、ボタン操作などといったUIを使った操作を受け付けます。

当たり判定の制御は、GraphicRaycasterプロパティの

  • Ignore Reversed Graphics
  • Blocking Objects
  • Blocking Mask

から行います。

Ignore Reversed Graphics

f:id:hinunun:20211202173239p:plain

レイキャスターから反対方向のUI面を考慮するかを設定できます。

どんな時に使うかわからぬ。。。すみません。

 

Blocking Objects

f:id:hinunun:20211202173913p:plain

レイキャストをブロックするオブジェクトのタイプを設定できます。

レイキャストによって処理する要素の優先順位を制御するようです。

使ったことないや(笑)

 

Blocking Mask

f:id:hinunun:20211202174100p:plain

レイキャストをブロックするオブジェクトのタイプを設定できます。

レイキャストによって処理する要素の優先順位を制御するようです。

使ったことないや(笑)

 

UIを使ったアプリの操作で大切なGraphicRaycasterを使うために、絶対に外せないのがImageを追加したときに勝手に生成されたEventSystemです。

 

EventSystemについて

これがないとUIによる操作ができません!!!

めっちゃ大切!!!私は知らぬ間に消していて地獄を見た。

これは、Unityがユーザーからの操作(タッチパネルのタッチ入力、キーボードの入力、コントローラーからの入力等)を受け取って、Unity内のオブジェクトへイベント送信するものです。

とりあえず何かしらの操作をしたいときはつけておくといいですね。

何かしらの操作をしたときに動かなかった場合は、まずこのEventSystemがヒエラルキービュー内にあるかを確認しましょう。

 

ボタンを作ってみる

とりあえずお試しにボタンを作ってみましょう。

ボタンを作る

ヒエラルキービューにボタンを追加しましょう。

ヒエラルキービューで右クリックでメニューを出して、Buttonを選択します。

f:id:hinunun:20211202180534p:plain

f:id:hinunun:20211202180625p:plain

もうボタンできちゃった

はい。終わりです。ちょー簡単ですね。

Buttonの意匠が気に入らぬという方もいらっしゃると思うので、

意匠の変えて、書いてある文字も変えちゃいましょう。

 

ボタンの意匠を変える

では意匠を変えましょう。

意匠を変えるには、使う画像を用意しなければなりません。

かっこいいボタン画像をいらすとやさんからもらってきました。

f:id:hinunun:20211202181801p:plain

これを挿入しましょう。

まず、画像をUnityのプロジェクトビューへドラッグ&ドロップします。

f:id:hinunun:20211202182128p:plain

画像をUIとして使用するには、Spriteという2Dのオブジェクトに変換しなければ使えないので、追加した画像を選択し、インスペクタからTexture TypeをSpriteへ変更します。

f:id:hinunun:20211202182510p:plain

Applyを押すのを忘れずに。

これで、追加した画像をUIとして使用できるようになりました。

これをButtonにあてはめます。

ヒエラルキービューのButtonを選択し、Buttonのインスペクタを表示します。

f:id:hinunun:20211202182921p:plain

 

インスペクタのSourceImageから先ほど追加した画像を選択します。

f:id:hinunun:20211202183306p:plain

f:id:hinunun:20211202183334p:plain

ほそながっ

アスペクト比を合わせたい場合は、

Buttonのインスペクタ内にある、Preserve Aspectのチェックをつけるといいです。

f:id:hinunun:20211202183608p:plain

ボタンのサイズを調整したい場合は、インスペクタからWidthとHeightを変更します。

f:id:hinunun:20211202184535p:plain

さて、これでボタンの意匠変更ができました。

では、文字を変更しましょう。

 

ボタンの文字を変える

ボタンの文字を変えるには、ヒエラルキービューのButtonの子のTextを変えればOK。

f:id:hinunun:20211202183955p:plainf:id:hinunun:20211202184131p:plain

インスペクタから文字の書体は変えられるので、自由に変えちゃってください。

文字の場所もインスペクタから変えちゃってください。

f:id:hinunun:20211202184708p:plain

できました!!!

これでボタンは作れるようになりましたね!

 

最後に

これで、Canvasの設定と、ボタンの作り方わかりましたね。

ボタンの作り方は、Unityのデフォルトのグラフィックで作る方法をやりましたが、画像に後でButton機能を付ける方法もあります。それはおいおい紹介しますね。

 

次は、ボタンを押したときのアクションの付け方と、スクリプトを埋め込んで、ボタンに役割を持たせていきましょう。

 

さぁ、UIももりもり作っていきますよー!!!

 

ではではー!