paochanz

【Unity】 UIToolkit を Runtimeで使ってみる②

2022/02/23

①はこちらです。

UIToolkit を Runtimeで使ってみる①

UIToolkitで遊んでみて少しずつ慣れてきた気がします。
何回も調べていることを自分用に書いておきます。

USSにおけるセレクタの優先順位

.ussファイルでユーザー定義したstyle ＞ UnityDefaultRuntimeTheme

Button {
  background-color: #FFFFFF;
  width: 200px;
}

上記のような.uss ファイルを作ることで、デフォルトでどの色が指定されていてもButtonの色は#FFFFFFになります。

オーバーライド ＞ 継承

BaseButton {
  background-color: #FFFFFF;
}

InheritedButton {
  background-color: #000000;
}
public class BaseButton : VisualElement { }
public class InheritedButton : BaseButton { }

public void Start()
{
  var button = new InheritedButton();  // # background-color: #000000
}

継承元 (BaseButton)で指定されているものでも継承先(InheritedButton)で新たな値が指定されればそちらが優先されます。この場合は#000000になります。直感的ですね。

名前 ＞ クラス名 ＞型名 ＞ワイルドカード

#foo_name {
  background-color: #FFFFFF;
}

.foo-class {
  background-color: #F0F0F0;
}

FooType {
  background-color: #000000;
}

* {
  background-color: #FFF000;
}

このUSSファイルの書き方は基本的にすべてCSSと同じなので、慣れている人にはわかりやすそうです。
例えば、 foo_name という名前で foo-class クラスをクラスリストに持っている FooType (VisualElementを継承している) のインスタンスを考えてみると、

public class FooType : VisualElement { }

public void Start()
{
  var fooType = new FooType("foo_name");
  fooType.AddToClassList("foo-class");  // # background-color: #FFFFFF
}

名前 (#foo_name) の優先順位が一番高いので、この fooType の色は #FFFFFF になります。

順番で後に表示されるもの ＞ 先に表示されているもの

.class-first {
  background-color: #FFFFFF;
}

.class-second {
  background-color: #000000;
}

この場合 class-first と class-second の両方を持っている VisualElement は、後に書かれている class-second を優先させて #000000 になります。

参考

Unity – Manual: USS Selectors

Uss classes order – Unity Forum

スクロールバーが表示されない / スクロールできない問題

ScrollViewを設置したものの上下左右に動かすことができなかったのですが、UnityDefaultRuntimeTheme.tssの代わりに自分で作ったtssファイルを使っていることが原因のようでした。

現状、多くのコンポーネントはUnityDefaultRuntimeThemeを使っている前提で動いています。
それを適用してしまうと、UnityEditorのUIっぽい灰色がデフォルトになるのが気になって自分でtssファイルを書いたのですが、ひとまず元に戻してUSSを個別に書いてstyleを上書きしました。

var scroll = root.Q<ScrollView>(); 
var verticalScroller = scroll.verticalScroller; 
verticalScroller.ScrollPageDown();

その状態で、このようにボタンを押すとScrollPageDown()が実行されるようにすることで正常に動かすことができました。

もう一個引っかかったのは、highvalueとlowvalueについてで、これらはスクロールバーの動かせる範囲を指定するもので正規化をするわけではありません。ですので、下手に指定するとスクロールバーが動かなくなります。

参考

Resolved – ScrollView Issues – Unity Forum