【Unity】 UIToolkit を Runtimeで使ってみる② | 白黒羊
白黒羊

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

①はこちらです。

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

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Button {
background-color: #FFFFFF;
width: 200px;
}
Button { background-color: #FFFFFF; width: 200px; }
Button {
  background-color: #FFFFFF;
  width: 200px;
}

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

オーバーライド > 継承

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
BaseButton {
background-color: #FFFFFF;
}
InheritedButton {
background-color: #000000;
}
BaseButton { background-color: #FFFFFF; } InheritedButton { background-color: #000000; }
BaseButton {
  background-color: #FFFFFF;
}

InheritedButton {
  background-color: #000000;
}
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
public class BaseButton : VisualElement { }
public class InheritedButton : BaseButton { }
public void Start()
{
var button = new InheritedButton(); // # background-color: #000000
}
public class BaseButton : VisualElement { } public class InheritedButton : BaseButton { } public void Start() { var button = new 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になります。直感的ですね。

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
#foo_name {
background-color: #FFFFFF;
}
.foo-class {
background-color: #F0F0F0;
}
FooType {
background-color: #000000;
}
* {
background-color: #FFF000;
}
#foo_name { background-color: #FFFFFF; } .foo-class { background-color: #F0F0F0; } FooType { background-color: #000000; } * { background-color: #FFF000; }
#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を継承している) のインスタンスを考えてみると、

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
public class FooType : VisualElement { }
public void Start()
{
var fooType = new FooType("foo_name");
fooType.AddToClassList("foo-class"); // # background-color: #FFFFFF
}
public class FooType : VisualElement { } public void Start() { var fooType = new FooType("foo_name"); fooType.AddToClassList("foo-class"); // # background-color: #FFFFFF }
public class FooType : VisualElement { }

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

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.class-first {
background-color: #FFFFFF;
}
.class-second {
background-color: #000000;
}
.class-first { background-color: #FFFFFF; } .class-second { background-color: #000000; }
.class-first {
  background-color: #FFFFFF;
}

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

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

参考

Unity – Manual: USS Selectors

Uss classes order – Unity Forum

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

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var scroll = root.Q<ScrollView>();
var verticalScroller = scroll.verticalScroller;
verticalScroller.ScrollPageDown();
var scroll = root.Q<ScrollView>(); var verticalScroller = scroll.verticalScroller; verticalScroller.ScrollPageDown();
var scroll = root.Q<ScrollView>(); 
var verticalScroller = scroll.verticalScroller; 
verticalScroller.ScrollPageDown();

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

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

参考

Resolved – ScrollView Issues – Unity Forum