【unityアドカレ2020夏】Magnetic Scroll Viewの紹介

この記事は[Unityアセット真夏のアドベントカレンダー 2020](http://assetstore.info/eventandcontest/adventcalendar/summer-advent-calendar-2020/)、26日目の記事になります。

昨日は[Achamothさん](https://achamoth.games/)の[【unity】Arbor3のparameter containerをListに変換する【アドカレ夏2020】](https://note.com/achamoth_haru/n/nf39211620124)でした。

# 概要
本日ご紹介したいアセットは[Magnetic Scroll View](https://assetstore.unity.com/packages/tools/gui/magnetic-scroll-view-93042?locale=ja-JP?utm_source=twitter&utm_medium=social&utm_campaign=jp-advent-calendar-summer)です。
スワイプできるスクロールビューシステムです。


![Top.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320924/4850b45b-da2a-1d65-9b7a-801f323c3323.gif)



### 使い方法

**UIに設置：**
1.MagneticScrollViewを設置する。
2.Create/UI/Magnetic Scroll Viewを選択し、
![スクリーンショット 2020-08-23 午前11.30.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/5883d262-12e5-a43c-bdc9-edac8a3d306e.png)

3.デフォルトのMagnetic Scroll ViewはHierarchy Viewに置かれます。
![スクリーンショット 2020-08-23 午前11.31.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/2766e6e4-0aa2-4628-00cc-448ce3ede033.png)

**Magnetic Scroll ViewのMagnetic Scroll Rectコンポーネント：**
![スクリーンショット 2020-08-23 午前11.33.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/ab947f50-13be-d980-002a-fb6e87e474bc.png)

パラメタ詳細説明はMagnetic Scroll ViewのDocumentationとTooltipが用意してるのここは細かいところを飛ばしたいと思います。

・Layout Settings：方向は縦横、元素のサイズなどUI Layout設定箇所。
・Control Settings:操作モード、移動速度など制御の設定箇所。
・Other Settings：ボタン、Index使うかどうか、Mask設定などその他の設定箇所。


**ここからはよくあるscroll viewパターンのパラメタ例**


1.左右見せるとIndex Tab表示
・Layout Settingsの
　・Use Marginを無効する。
　・Element Paddingを設定。
![スクリーンショット 2020-08-23 午後0.19.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/7f3f1aa8-af7b-ead8-0c0f-c12bf34551d2.png)

・Index Tabを表示する。
![スクリーンショット 2020-08-23 午後0.19.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/2b941572-efe1-3f2b-e5b1-0feb6fd22ce5.png)

実行：
![element padding.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/f6aa055b-92a7-7df0-1ddc-988892c06cc1.gif)


2.Banner
Magnetic Scroll Rectコンポーネント以外、もう1箇所の調整が必要です。
・Layout SettingsのUse Marginを無効する。
![スクリーンショット 2020-08-23 午後0.47.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/942f0abd-1d24-0da3-d090-37354945ba87.png)

・Viewportのサイズは元素のサイズと一致する。
![スクリーンショット 2020-08-23 午後0.47.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/3db58545-d1b4-b4c1-e3ee-90e74ba44bc0.png)

実行：
![banner.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/a5efb78d-d920-c8ac-d815-95689521e3e0.gif)
ソシャゲーよくあるパータンです、自動スクロール機能は拡張必要になります。コルーチンで左右移動関数を呼ぶと簡単に実装できます。



3.左右ボタン付き
・Other SettingsのUse Buttonsを有効する。
![スクリーンショット 2020-08-23 午後0.36.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/1b8f4d21-0929-0eb1-3c35-a72e888ba58e.png)

・有効すると、ボタンのObject、Scroll BackとScroll Forwardが生成されます。
![スクリーンショット 2020-08-23 午後0.38.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/f1d11556-0c0d-0c36-db6e-6e5f7ae7cf3b.png)

・デフォルトはこの画像の通りです。よくあるUIで調整します。
![スクリーンショット 2020-08-23 午後0.44.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/a2151f30-3042-a06b-9746-b5eef3efb431.png)


実行：
ボタンもスワイプも操作できます。
![button.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/fc132883-eabc-4e2d-9c1c-7b4d8b421c2b.gif)



## 最後
Bannerなど大項目みたい通知UIとしてはとても操作しやすく、便利な機能と思います。
大量のデータの場合、[EnhancedScroller](https://assetstore.unity.com/packages/tools/gui/enhancedscroller-36378)の方がおすすめです。

この２つAssetを一緒に使えれば、ゲーム内のScroll View機能はほぼ困りなしです。

明日は[NoSeams Studioさん](https://twitter.com/ozora_develop)の「Invector + playmaker ノンコーディング開発でどこまでできる？」です。