【Unityメモ書き3】スクロール&ボタン処理

クロ Unityメモ書き第三弾は
もっと基本的なことかもしれません
冬月が躓いた場所って……

 

とはいえ
意外とスクロール処理の説明って無い気がするわ
冬月が最新の参考書を買っていないからかもしれないけどね
霊夢

 

魔理沙 仕様なのかバグなのかわからない
動きもあったしな……
その部分さえ抑えてしまえば楽にスクロール処理を作ることができるな

 

同じように
迷っている人の助けになればと思います
詳しくは続きを読むからどうぞ
妖夢

 

1.GameObjectのScrollbarを配置する

 

クロ これはUnityに備わっている
UIの機能なので迷うことはないですよね
Unityのメニューから探すだけです

 

2.スクロールさせたい項目を配置する

 

HierarchyにScrollbarが配置されているわ
これだけでは何もできないので
リストの中身を作っていくわ
霊夢

 

魔理沙 スクロールするコンテンツはScrollbarの
ScrollView → Viewport → Contentに配置すると表示領域外にあった分だけ
スクロール処理をしてくれるぞ

 

3.スクロールさせる量に合わせて、contentのサイズを変更する

 

ただ、配置するだけじゃスクロールの処理をしてくれないです
ContentのWidthとHeightの数値を表示させたい全体の大きさに合わせないと
スクロールしてくれません
妖夢

 

クロ スクロールの全体領域を変更したい場合は
ScrollViewのWidthとHeightの数値を変更してください
スクロールの表示領域が合わせて拡縮します

 

ポイントはスクロールをさせたい
リストオブジェクトの配置位置が
Contentになることと
霊夢

 

魔理沙 スクロールさせる場合は
contentの大きさも合わせて
変更する必要がある、っていことだな

 

あと、スクロールの設定も行うこともでき
縦、もしくは横スクロールのみなど
スクロールバーのデザイン変更等できます
妖夢

 

Vertical	縦のスクロール処理を制限する
Horizontal	縦のスクロール処理を制限する
Vertical Scroll bar	縦のスクロールバーの画像を設定する
Horizontall Scroll bar	縦のスクロールバーの画像を設定する

 

1.ボタンを配置する

 

クロ 次にボタンを配置します
スクロールするコンテンテンツをクリックすると
それがボタンになっていて操作できる、といったことができます

 

これで、スクロールのときのように
Hierarchyにボタンが配置されているわ
一つ注意なのが、Canvas以下に配置しないと表示されない点ね
霊夢

 

魔理沙 ボタン処理は画面タッチ処理と同じだな
スプリクトでボタンを押したときの処理を書いて
それをOnClickに登録すれば動くぞ

 

Buttonの設定を変えれば
任意のボタン画像に変更したり
ボタンを押したときの演出を変更できます
妖夢

 

クロ Buttonの画像を変更する場合は
TransactionのTargetGraphicを任意の画像となっている
GameObjectに変更すれば良いです

 

ボタンを押したときの色の変更もやってくれるわ
自分で変更したいときは
○○○ Colorの設定を変更すればOKよ
霊夢

 

Normal Color: 初期の色
Highlighted Color: マウスが上に乗った時の色
Pressed Color: ボタンを押した時の色
Disabled Color: ボタン無効化時の色

 

魔理沙 Transactionの設定をColor Tintから
Sprite Swapに変更すると着色から
画像の変更に切り替えることができるぞ

 

UnityのUIは簡単に機能を実装できますが
説明がないと少々とっつきにくいものになっていると思います
もうちょっとメモしたいことがありますので、もう少々お付き合いください
妖夢

 

気軽にコメントをどうぞ!

この記事に関すること冬月に聞きたいこと等、小さいことでもコメントしていただける嬉しいです。
冬月に直接連絡したい方は下のお問合せフォームをお使いください。(メール送信されます)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。
※メールアドレスは公開されることは有りません。


The reCAPTCHA verification period has expired. Please reload the page.

Android | iOS | PC | Unity | ゲーム製作の関連記事