Help us understand the problem. What is going on with this article?

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

この記事はUnityアセット真夏のアドベントカレンダー 2020、26日目の記事になります。

昨日はAchamothさん【unity】Arbor3のparameter containerをListに変換する【アドカレ夏2020】でした。

概要

本日ご紹介したいアセットはMagnetic Scroll Viewです。
スワイプできるスクロールビューシステムです。

Top.gif

使い方法

UIに設置:
1.MagneticScrollViewを設置する。
2.Create/UI/Magnetic Scroll Viewを選択し、
スクリーンショット 2020-08-23 午前11.30.48.png

3.デフォルトのMagnetic Scroll ViewはHierarchy Viewに置かれます。
スクリーンショット 2020-08-23 午前11.31.28.png

Magnetic Scroll ViewのMagnetic Scroll Rectコンポーネント:
スクリーンショット 2020-08-23 午前11.33.19.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

・Index Tabを表示する。
スクリーンショット 2020-08-23 午後0.19.41.png

実行:
element padding.gif

2.Banner
Magnetic Scroll Rectコンポーネント以外、もう1箇所の調整が必要です。
・Layout SettingsのUse Marginを無効する。
スクリーンショット 2020-08-23 午後0.47.07.png

・Viewportのサイズは元素のサイズと一致する。
スクリーンショット 2020-08-23 午後0.47.26.png

実行:
banner.gif
ソシャゲーよくあるパータンです、自動スクロール機能は拡張必要になります。コルーチンで左右移動関数を呼ぶと簡単に実装できます。

3.左右ボタン付き
・Other SettingsのUse Buttonsを有効する。
スクリーンショット 2020-08-23 午後0.36.26.png

・有効すると、ボタンのObject、Scroll BackとScroll Forwardが生成されます。
スクリーンショット 2020-08-23 午後0.38.34.png

・デフォルトはこの画像の通りです。よくあるUIで調整します。
スクリーンショット 2020-08-23 午後0.44.02.png

実行:
ボタンもスワイプも操作できます。
button.gif

最後

Bannerなど大項目みたい通知UIとしてはとても操作しやすく、便利な機能と思います。
大量のデータの場合、EnhancedScrollerの方がおすすめです。

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

明日はNoSeams Studioさんの「Invector + playmaker ノンコーディング開発でどこまでできる?」です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした