bigbanner

UI関連 Unity 学習メモ

【Unity】Canvasの使い方ー基礎編

更新日:

今日から自分のために週2くらいのペースで学んだことメモをしていこうと思います。

継続は力なり。

Canvasとは

Canvasとは簡単に言うとUIオブジェクトの親となるオブジェクトです。

Unityの決まり上、ボタン、テキストフィールドなどのUIオブジェクトはCanvasコンポーネントをもつオブジェクトが親オブジェクトでなければ機能しません。

なので、シーン上にCanvasオブジェクトが存在しないときに、UIオブジェクトを作成するとCanvasオブジェクトが親オブジェクトとして自動生成されます。

Canvasを作成すると自動的にEventSystemオブジェクトも作成されます。EventSystemはシーンのイベントを処理するためのものです。
EventSystemについても別の機会に詳しく勉強して記事にしたいと思います。

Canvasオブジェクトの構成

Canvasオブジェクトは以下の3つのコンポーネントがアタッチされています。

  • Canvas
  • Canvas Scaler
  • Graphic Raycaster

以下でそれぞれについて説明します。

Canvasコンポーネント

CanvasコンポーネントはUIの描画方法や、描画するカメラの指定などを設定できます。

Render Mode

描画方法の種類です。

  1. Screen Space - Overlay
  2. Screen Space - Camera
  3. World Space

それぞれの違いについてはTECH Projin様の以下の記事で分かりやすい動画を交えて紹介してくださっています。わかりやすぅい!

Canvas Scaler コンポーネント

Canvas ScalerコンポーネントではUIのスケールとピクセル密度を制御できます。

簡単にいうと様々な画面サイズに対応してUIオブジェクトのサイズを自動調整するためのコンポーネントです。

UIの調整方法については以下の3種類があります。

  1. Constant Pixel Size
  2. Scale With Screen Size
  3. Constant Physical Size

これらの方法についてはひよこのたまご様が詳しく記事にしてくださっています。

Graphic Raycaster コンポーネント

Graphic Raycaster コンポーネントはCanvas上にあるUI要素のグラフィックを監視し、クリックやタッチを検出する機能があります。

つまりこのコンポーネントが無ければタッチやクリックが出来ません。

プロパティには

  • Ignore Reversed Graphics...レイキャスターから反対方向のグラフィックス面の考慮をONOFF
  • Blocked Objects...グラフィックスのレイキャストをブロックするオブジェクトのタイプを指定可能
  • Blocking Mask...グラフィックスのレイキャストをブロックするレイヤーのタイプを指定可能

があります。

重なっているオブジェクトに対して実行の優先順位を設定することができるようです。

あまり触られることがないコンポーネントなのか資料が少ないので使い方が正直良く分かりません。新たに楽しい使い方を学んだ時は追記するかもしれません。

最後に

Unityのチュートリアル動画もとってもわかりやすいので是非視聴されることをお勧めします。日本語字幕もあるので是非。

個人的にはUIを傾けて表示させて奥行を持たせるというのにオシャレなUIの可能性を感じました。いつかどこかで使いたいです。

rectangle_l

rectangle_l

-UI関連, Unity, 学習メモ

Copyright© Uniblo-ゆにブロ- , 2018 All Rights Reserved.