< Return to Video

UI Scroll Rect - Unity Official Tutorials

  • 0:02 - 0:05
    Scroll Rect という UI 要素は
  • 0:05 - 0:07
    様々な UI 要素をユーザーが移動させる時に使うもので
  • 0:07 - 0:10
    水平／垂直に動かすことが出来ます
  • 0:10 - 0:12
    表示するものは大きな画像や
  • 0:12 - 0:15
    様々な UI 要素のパネルです よくある用途としては
  • 0:15 - 0:17
    複数のボタン、量の多い文章などです。
  • 0:18 - 0:20
    scroll rect は多くの場合
  • 0:20 - 0:22
    mask 要素と組み合わせて使用されるので
  • 0:23 - 0:26
    スクロールバーともシームレスに機能するよう設計されています
  • 0:27 - 0:29
    このレッスンでもマスクとスクロールバーについて多少紹介しますが
  • 0:29 - 0:31
    基本的な機能しか紹介しません
  • 0:31 - 0:33
    マスクやスクロールバーの詳細については
  • 0:33 - 0:37
    下記リンク先の情報を参照してください
  • 0:38 - 0:39
    scroll rect を作成するには
  • 0:39 - 0:41
    まず Canvas の子ゲームオブジェクトに
  • 0:41 - 0:44
    Scroll Rect コンポーネントをアタッチします
  • 0:45 - 0:47
    scroll rect 要素も他の UI 要素と同様に
  • 0:47 - 0:49
    Canvas の子にする必要があります
  • 0:50 - 0:52
    ゲームオブジェクトに Scroll Rect コンポーネントをアタッチするには
  • 0:52 - 0:56
    Add Component を使います
  • 0:57 - 0:59
    UI
  • 1:00 - 1:01
    Scroll Rect
  • 1:02 - 1:04
    ここではゲームオブジェクト名を
  • 1:04 - 1:07
    Scroll View と変更します
  • 1:09 - 1:11
    Content（コンテンツ）は scroll rect に制御されている
  • 1:11 - 1:14
    UI 要素の RectTransform への参照です
  • 1:15 - 1:17
    たとえばここに scroll rect よりも
  • 1:17 - 1:19
    はるかに大きな画像があります
  • 1:19 - 1:21
    次にコンテンツを... ここでは
  • 1:21 - 1:23
    大きな画像を
  • 1:23 - 1:25
    scroll rect の Content プロパティに関連付けてみます
  • 1:26 - 1:30
    するとプレイモードで コンテンツがスクロール可能になりました
  • 1:32 - 1:35
    さて通常 scroll rect は mask 要素と組み合わせて使用されます
  • 1:35 - 1:38
    mask 要素と scroll rect を組み合わせて使うには
  • 1:38 - 1:40
    まずゲームオブジェクトにマスク用の
  • 1:40 - 1:42
    Image スクリプトを追加します
  • 1:44 - 1:46
    その後に Mask スクリプトを追加します
  • 1:51 - 1:53
    mask 要素はマスクの作成時に
  • 1:53 - 1:55
    画像を使います
  • 1:55 - 1:58
    image スクリプトに画像を指定するのは必須ではありませんが
  • 1:59 - 2:01
    必要に応じて指定もすることで
  • 2:01 - 2:03
    マスクの形状を制御することができます
  • 2:05 - 2:08
    image および mask 要素の詳細については
  • 2:08 - 2:10
    下記リンク先の情報を参照してください
  • 2:11 - 2:13
    Horizontal（水平） / Vertical（垂直）はスクロールの
  • 2:13 - 2:15
    方向を指定します
  • 2:15 - 2:18
    いずれかの方向へのスクロールを無効化する場合は
  • 2:18 - 2:20
    対応する軸のチェックボックスをオフにします
  • 2:21 - 2:24
    Movement Type（移動タイプ）はスクロールモードを示します
  • 2:25 - 2:27
    スクロールモードは Movement Type（移動タイプ）の
  • 2:27 - 2:29
    ポップアップメニューで選択できます
  • 2:29 - 2:33
    Unrestricted（制約なし）はスクロール挙動の制約をなくす項目で
  • 2:34 - 2:36
    ふつうは使用することはありません
  • 2:36 - 2:38
    使用した場合 メソッドを追加するなどしないと
  • 2:38 - 2:39
    元に戻れないほどコンテンツを
  • 2:39 - 2:42
    スクロールしてしまいます
  • 2:42 - 2:45
    ただし特定の状況下では
  • 2:45 - 2:47
    大変便利なモードでもあります
  • 2:48 - 2:50
    Movement Type を Elastic（弾性あり）または
  • 2:50 - 2:51
    Clamped（クランプ）に設定すると
  • 2:51 - 2:54
    コンテンツがスクロール可能な軸上で
  • 2:54 - 2:56
    scroll rect の範囲外に出なくなります
  • 2:57 - 2:58
    なお先述の 2 モードで
  • 2:58 - 3:00
    コンテンツをスクロール可能にするには
  • 3:00 - 3:02
    対象コンテンツの RectTransform が
  • 3:02 - 3:05
    scroll rect の RectTransform よりも大きい必要があります
  • 3:06 - 3:08
    コンテンツの RectTransform が
  • 3:08 - 3:11
    scroll rect の RectTransform よりも小さい場合
  • 3:11 - 3:14
    軸に沿ってスクロールができなくなります
  • 3:15 - 3:18
    なお先述の 2 モードを使用する際にはコンテンツを
  • 3:18 - 3:20
    scroll rect の領域内に配置するようにしてください
  • 3:20 - 3:22
    領域外に配置した場合
  • 3:22 - 3:24
    予期しない動作が引き起こされる可能性があります
  • 3:24 - 3:26
    これは RectTransform がコンテンツを
  • 3:26 - 3:28
    領域内に引っ張ろうとするためです
  • 3:29 - 3:32
    Movement Type に Elastic を使うと
  • 3:32 - 3:34
    コンテンツが scroll rect の境界線に到達した時に
  • 3:34 - 3:36
    跳ね返る動作をします
  • 3:37 - 3:39
    この跳ね返りの量は
  • 3:39 - 3:41
    Elasticity（弾性）プロパティで指定します
  • 3:43 - 3:45
    一方で Movement Type に Clamped を使った場合は
  • 3:45 - 3:47
    コンテンツは scroll rect の境界線に到達しても
  • 3:47 - 3:50
    スクロールが停止するだけで跳ね返りません
  • 3:54 - 3:56
    Inertia（慣性）はコンテンツのドラッグを
  • 3:56 - 3:58
    放した時に 慣性ですべる動作を
  • 3:58 - 4:00
    指定する項目です
  • 4:00 - 4:02
    Inertia チェックボックスをオフにすると
  • 4:02 - 4:04
    コンテンツがドラッグ中だけ動くようになります
  • 4:05 - 4:07
    Inertia をオンにすると
  • 4:07 - 4:09
    ドラッグを放した後に
  • 4:09 - 4:11
    スクロールが継続します
  • 4:11 - 4:13
    スクロール継続時間は
  • 4:13 - 4:17
    Deceleration Rate プロパティで制御します
  • 4:17 - 4:19
    Deceleration Rate は 0 にすると
  • 4:19 - 4:21
    スクロールが瞬時に停止し
  • 4:22 - 4:24
    1 にすると永遠に
  • 4:24 - 4:26
    スクロールし続けます
  • 4:27 - 4:29
    Horizontal / Vertical scrollbar は
  • 4:29 - 4:32
    任意指定のプロパティで スクロールバー要素を参照するときに使います
  • 4:33 - 4:35
    scroll rect でスクロールバーを使うには
  • 4:35 - 4:38
    単純に スクロールバーを作成して
  • 4:40 - 4:42
    配置し
  • 4:42 - 4:44
    scroll rect のプロパティと関連付けるだけで
  • 4:44 - 4:46
    OK です
  • 4:49 - 4:51
    これで自動的に動作します
  • 4:52 - 4:55
    スクロールバーとその設定方法については
  • 4:55 - 4:58
    下記リンク先の情報を参照してください
Title:
UI Scroll Rect - Unity Official Tutorials
Description:
more » « less
Video Language:
French
Duration:
05:00

Japanese subtitles

Revisions

Our website uses cookies for analysis purposes.