Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

【Unity】LINEっぽいチャットでScroll View チュートリアル①UIパーツ配置

Unity 2019.2.0f1 Personal(2019年8月)

Scroll ViewとLayout系コンポーネントについて調べてきました!
実際にモノを作成していく中で理解が進むことは多いので、
学んだことを応用してまずはLINEっぽいチャットシステムを作ってみたいと思います!

f:id:hiyotama:20190821190159p:plain
LINEっぽいチャット

UIパーツを配置

まずはUIパーツを配置していきます〜
最初にChatSystemという名前のPanelを作成します。
ChatSystem(Panel)にはVertical Layout Groupを付けます。
f:id:hiyotama:20190821190536p:plain
Control Child SizeをWidth, Height共に有効にします。

続いてChatSystem(Panel)の下に以下3つのUIを作成します。
・Image(名前:Title)
・Scroll View(名前:ChatArea)
・Image(名前:Input)
f:id:hiyotama:20190821204123p:plain
ひとつずつ設定していきます〜

Title

・Layout Elementをつける。
Flexible Width有効、値は1
Flexible Height有効、値は0.08
f:id:hiyotama:20190821204203p:plain
・Title(Image)の子としてTextを作成する。
Image, Textを適当にデザイン(Image紺色, Text白色にしました。)

ChatArea

・Scroll RectのHorizontal無効、Vertical有効、Scrollbarは2つとも削除。
f:id:hiyotama:20190821204319p:plain
・LayoutElementをつける。
Flexible Width有効、値は1
Flexible Height有効、値は1
f:id:hiyotama:20190821192351p:plain

Input

・LayoutElementをつける。
Flexible Width有効、値は1
Flexible Height有効、値は0.08
f:id:hiyotama:20190821204203p:plain
・Input(Image)の子にCreate Emptyで空のUIパーツを作る。(名前:InputArea)
InputAreaのAnchor Presetはstretch * stretch
InputAreaに以下の設定のHorizontal Layout Groupをつける。
f:id:hiyotama:20190821204709p:plain
※親オブジェクトであるInputにHorizontal Layout Groupを付けるとLayout ElementとHorizontal Layout Groupが競合してしまうのか?想定通りのUIサイズにならなかったため、Input Areaを子に設定しました。
・更にInput Areaの子に以下のUIオブジェクトを作成し、それぞれにLayout Elementをつけます。
InputField
f:id:hiyotama:20190821205441p:plain
Button(名前:MineButton)
f:id:hiyotama:20190821205500p:plain
Button(名前:OthersButton)
f:id:hiyotama:20190821205500p:plain

UIパーツ配置完了

以上でUIパーツの配置は完了です。
Hierarchyはこんな感じです。
f:id:hiyotama:20190821205606p:plain
Game画面はこんな感じです。
f:id:hiyotama:20190821205641p:plain

今回は以上です、ありがとうございました〜