この記事では、Unityの基本的なUI機能を紹介しています。

※-その1-の続きになるので、併せて読むと理解がスムーズになります！

ぜひ読んでみてください！

目次

1.前回のおさらい

2.3つの機能

3.まとめ

1.前回のおさらい

前回はUIの紹介と単純なパーツを作るための基本的な機能を紹介しました！

紹介した機能は以下の3つ。

・Texture

 PSDなど画像制作ソフトで作成した画像をUnityで使用できるように設定したもの

・Image

 作成した画像（Texture）を表示させるための機能

・Text

 Unityで文字を表示する機能

2.3つの機能

今回はより動的な機能を紹介します。

前回よりも少し複雑で、複数の要素が合わさった機能ですが
その1を読んでいなくてもわかるように
補足を入れながら説明していきますので安心してください！

紹介するのはこちらの3つです！

①Button
②Scrollbar
③ScrollView

それでは、さっそくButtonの作成をしてみましょう！

①Button

ボタンは、ユーザーの操作を受け付けるオブジェクトです。

ボタンを用意するためにまずはTextureを用意しましょう！

1.画像の準備とUnityへの追加

①任意のデザインツールで画像を作成し、PNG形式で書き出しましょう。

②書き出した画像をUnityにドラッグ&ドロップして

「Texture」として使用できるように設定を行います。

今回はこの画像を使います。

伸ばして使用したいので9sliceを設定しました。

2.Buttonを作成する

Textureが用意できたら、Buttonを作成してみましょう。

ボタンは「Button」オブジェクトと「Text」オブジェクトの組み合わせでできています。

ボタンを作成するには「Button」コンポーネントが必要です。

※コンポーネントについては「ワンポイント！」で紹介します

Buttonは「Hierarchy」から下記2つの方法で作成できます。

作成方法

■「Hierarchy」で右クリック＞UI＞Button – TextMeshPro

■「Hierarchy」のプラスマークをクリック＞UI＞Button – TextMeshPro

3.Buttonのカスタマイズ

変更できる項目は3つあります。
1つずつ変更してみましょう！

①見た目

「SourceImage」から任意のTextureとSliceの設定して大きさを調整します
また、Pixels Per Unit Multiplierを設定することで丸みの具合を変更できます

②押した時の動作

「Button」コンポーネントによって、押下時の挙動を設定できます。

任意のオブジェクトに「Add Component」から追加することで

ボタンとして機能させることも可能です！

それでは、ボタンを押した後の動作を設定しましょう。

「Transition」のプルダウンを選択すると挙動をどのように作成するか選ぶことができます

・None →何も変化しない

・ColorTint →色が変化する

・SpriteSwap →見た目を変える

・Animation →作成したアニメーションを再生する

③文字

表示される文字は、子のオブジェクトの「Text」から変更できます。

また、状況に応じて文字を変更することも可能です。

ワンポイント！「コンポーネント」とは？

ゲームオブジェクトに機能を追加するためのパーツです

様々な種類があり、テクスチャを適応できる「Image」や

テキストを表示させる「TextMeshPro」もコンポーネントの一部です。
オブジェクトのInspectorへ追加して使用するもので
以下の方法で追加して使用します
■Inspector＞Add Component＞検索欄へ入力＞選択して追加

②Scrollbar

ScrollRectを使用する前にScrollbarについて知っていると
少し理解がスムーズになるので紹介していきます

1.Scrollbarの作成方法

まずはScrollbarをCanvas上に表示してみましょう。

「Hierarchy」から2通りの方法で作成することができます。

作成方法

■「Hierarchy」で右クリック＞UI＞Scrollbar

■「Hierarchy」のプラスマークをクリック＞UI＞Scrollbar

Scrollbarを押下するとテンプレートのスクロールバーが表示されます

こちらを任意の見た目と機能を設定していきましょう。

2.見た目の設定

まずは、見た目を設定していきましょう。

以下オブジェクトにImageがあるので任意のTextureを設定します

①Scrollbar

 スクロールバーの背景になっている部分です

②Handle

 ユーザーが操作をする部分です。ハンドルと呼びます

表示できたでしょうか？

今回はハンドルをオレンジ、ベース部分をボタンで使用したテクスチャにしてみました

3.機能の設定
次に機能の設定をしてみましょう

Scrollbarの機能設定はScrollbarオブジェクトから設定できます

①Handleを触った際の動作を選びましょう

ボタンと同じように「Transition」のプルダウンを選択すると

なにで動作を作成するか選ぶことができます

・None →何も変化しない

・ColorTint →色が変化する

・SpriteSwap →見た目を変える

・Animation →作成したアニメーションを再生する

②スクロールの向きを選びましょう

スクロールの向きは「Direction」から設定することができ、

ハンドルを動かす方向を決めることができます。

・Left To Right →左から右へ

・Right To Left →右から左へ

・Bottom To Top →下から上へ

・Top To Bottom →上から下へ

設定した際に見た目が崩れる場合は、

ScrollbarオブジェクトのRectTransformを設定して修正しましょう

ワンポイント！「stretch」とは？

Scrollbarオブジェクトを見るとRectTransformに「stretch」が設定されています

これは親オブジェクトのサイズに合わせて、自身のサイズを自動で調整してくれる機能です

親のオブジェクトが変更されても、比率が変わらず維持されるため、
柔軟なレイアウトをすることができます

③ScrollView

最後に紹介するのは、「ScrollView」という機能です。

ScrollViewとは画面に表示しきれない要素をスクロールして表示するための機能です。

縦、横スクロールを選択し表示させることができます

1.ScrollViewの作成方法

それでは、「ScrollView」をCanvasに表示させてみましょう。

以下手順で追加します。

作成方法

■「Hierarchy」で右クリック＞UI＞ScrollView

■「Hierarchy」のプラスマークをクリック＞UI＞ScrollView

「ScrollView」を押下するとテンプレートのスクロールビューが表示されます

ScrollViewの構成は以下2つで構成されています

複雑にはなっていますが、分解して確認してみましょう！

Scrollbarは先ほど紹介した物と同じものなので新しい要素はViewportだけです

・Viewport

 表示させたい要素はオブジェクトの子である「Content」へ格納します

・Scrollbar Horizontal / Scrollbar Vertical

 横・縦のスクロールバー

 使用しない場合は削除してしまって問題ありません

こちらを任意の見た目と機能に設定していきましょう。

2.見た目とサイズのカスタマイズ

まずは、見た目を設定していきましょう。

以下オブジェクトにImageがあるので任意のTextureを設定します

①Scroll View

 スクロールビューの背景になる部分です

②Scrollbar Horizontal・Scrollbar Vertical

 スクロールバーの背景になっている部分です

③Handle

 ユーザーが操作をする部分です

表示できたでしょうか？
今回は縦スクロールにしたいので、「Scrollbar Vertical」を残し設定しています

次にサイズも設定します

①Scroll View

RectTransformを設定すると変更することができます

同時に子のオブジェクトの大きさも変更されます

②Scrollbar Horizontal / Scrollbar Vertical

RectTransformを設定すると変更することができます

画像のように設定してみました！

3.表示内容の追加

見た目が設定できたところでScrollViewに表示するものを入れてみましょう

なんでも大丈夫ですが、作成したボタンを並べて入れてみます

「Content」オブジェクトの子として表示したい要素を配置します

この時、「Content」オブジェクトは要素に合わせて縦のサイズを調整してください

この設定を行うことでスクロールが有効になります

4.スクロールバーの動作設定
次に動作設定をしてみましょう

①Handleを触った際の動作を選びましょう

ボタンと同じように「Transition」のプルダウンを選択すると

なにで動作を作成するか選ぶことができます

・None →何も変化しない

・ColorTint →色が変化する

・SpriteSwap →見た目を変える

・Animation →作成したアニメーションを再生する

②Transitionを「ColorTint」へ変更し、

「Pressed Color」を好きな色に設定します

この設定でハンドルに触った際に色が変わるようになりました

5.確認してみる

作成したものが実際に動くか確認してみましょう

Unity上部にある再生ボタンから確認することができます
ハンドルが反応し上下に動かすことができれば無事作成できています

3.まとめ

以上、UIデザイナー向けのUnityの基本的なUI機能-その2-の紹介でした！

今回はButton / Scrollbar / ScrollView の3つを取り上げました。

次回からは紹介したパーツを組み合わせて使用する機能をいくつか紹介する予定です。

参考にできるような分かりやすい記事を目指していきますので、

ぜひ見に来てください！