UI Toolkit(旧:UI Elements)でデフォルト画像の再生ボタンを使う

Unityの比較的新しいUIフレームワークでUI Toolkit(旧:UI Elements)というものがあります。
html & cssのノリで要素を定義したファイルを.uxmlファイルとして、スタイルを定義したファイルを.ussとして分けることができ、従来のEditor拡張に比べて一つのファイルに対するコードの量を短くすることができるというメリットがあるようです。
「Debuggerもあって便利そうだし試しに使ってみよう」と思ったのですが、公式ドキュメントを見ていて困ったところがあったのでメモしておきます。

# やろうと思ったこと
![Screen Shot 2021-08-15 at 19.39.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136558/b978c721-23d7-2de8-3b94-f8dcf52a58df.png)
Timelineで使われてるような再生管理のためのシンプルなボタンを実装しようと思い、
せっかくなのでEditorに使われている画像を使えたらわざわざ画像用意しなくても良さそうなので
調べてみると`Unity Default Resources`というところに配置されているようです。


# Unity Default Resources

https://kan-kikuchi.hatenablog.com/entry/GetBuiltinResource

デフォルトでは画像は見えないようなのでファイル名を確認するためには少し手順を踏む必要があります。(チートシート/一覧とか無いのかな。。)
こちらの記事を参考にmacだと`Unity.app/Contents/Resources`フォルダにある`unity editor resources`をコピーして`.asset`拡張子をつけてからUnityのAssets以下に配置するとUnity上で確認することができました。

確認方法としては`Window>UI Toolkit>Debugger`でデバッガーを開いて上部ツールバーから`Pick Element`をクリックして実装中のEditorWindowをクリック、そして確認したい要素を選択しbackground-imageから確認することができます。
もしくは`実装中のEditorWindow右上の3つの点ボタン>UI Toolkit Debugger`でデバッガーを開いて確認することもできます。

# コード
少しスタイルを整える必要がありそうですがひとまずこんな感じになりました。
![Screen Shot 2021-08-15 at 20.06.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136558/e4cf3185-7140-398b-f204-cc16af9a233f.png)

```html:Test.uxml
<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"
>
  <engine:Box class="toolbarHeader">
    <engine:Button name="firstKeyButton" class="toolbarItem firstKeyButton" />
    <engine:Button name="prevKeyButton" class="toolbarItem prevKeyButton" />
    <engine:Button name="playButton" class="toolbarItem playButton" />
    <engine:Button name="nextKeyButton" class="toolbarItem nextKeyButton" />
    <engine:Button name="lastKeyButton" class="toolbarItem lastKeyButton" />
  </engine:Box>
</engine:UXML>
```

```css:Test.uss
  .playButton {
    background-image: resource("d_Animation.Play")
  }
  .prevKeyButton {
    background-image: resource("d_Animation.PrevKey")
  }
  .nextKeyButton {
    background-image: resource("d_Animation.NextKey")
  }
  .firstKeyButton {
    background-image: resource("d_Animation.FirstKey")
  }
  .lastKeyButton {
    background-image: resource("d_Animation.LastKey")
  }
```

```cs:TestWindow.cs
using UnityEngine;
using UnityEditor;
using UnityEngine.UIElements;

public class TestWindow : EditorWindow
{
  [MenuItem("Window/TestWindow")]
  public static void ShowWindow() => GetWindow<TestWindow>("TestWindow");

  void OnEnable()
  {
    var root = rootVisualElement;
    root.styleSheets.Add(Resources.Load<StyleSheet>("Test"));
    var docTree = Resources.Load<VisualTreeAsset>("Test");
    docTree.CloneTree(root);

    root.Q<Button>("firstKeyButton").clickable.clicked += () => Debug.Log("firstKeyButton");
    root.Q<Button>("prevKeyButton").clickable.clicked += () => Debug.Log("prevKeyButton");
    root.Q<Button>("playButton").clickable.clicked += () => Debug.Log("playButton");
    root.Q<Button>("nextKeyButton").clickable.clicked += () => Debug.Log("nextKeyButton");
    root.Q<Button>("lastKeyButton").clickable.clicked += () => Debug.Log("lastKeyButton");
  }
}
```

# 困ったこと
https://docs.unity3d.com/ja/2019.4/Manual/UIE-USS-PropertyTypes.html
公式リファレンスでは以下のように記載されています。

```
ファイルが Editor Default Resources下にある場合は、ファイル拡張子を入れる必要があります。例えば background-image: resource("Images/default-image.png")。
```
ですが拡張子を入れるとエラーになり、逆に外すと反映されるようになりました。