Unity：UI Elements でパラパラ漫画風のGUIを作ってみる。


# はじめに

*こんにちは、のんびりエンジニアのたっつーです。*
*[ブログ](https://www.fast-system.jp/)を運営しているのでよろしければ見てください。*

今回は「[いくつかサンプル書いたよ](https://www.fast-system.jp/unity-ui-elements-samples/)」の記事の１つの共通コントロールの作成方法と使い方を解説したいと思います。
ぜひ、お付き合いいただければと思います(#^^#)

# UI Elementsとは？

[こちらの記事](https://www.fast-system.jp/unity-uielements-howto/)をご参照いただければと思います。

# パラパラ漫画風のGUIを作ってみよう

さっそくですが、ツールバーの実装をしてみたいと思います。

## GUIの実装

***Editor フォルダを作成***し、右クリックのメニューから***「UIElements Editor Window」を選択***してください。
![image-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/5f8d3d91-5ed3-7e05-ff95-97cacf51cc2f.png)

「Sample4」を入力してください。
![image-46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/a8a1a302-f913-0f8c-278e-8aef62ac2065.png)

次に、Sample4.cs を以下のように変更してください。
```C#:Sample4.cs
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;


public class Sample4 : EditorWindow
{
    [MenuItem("UIElementsSamples/Sample4")]
    public static void ShowExample()
    {
        Sample4 wnd = GetWindow<Sample4>();
        wnd.titleContent = new GUIContent("Sample4");
    }

    private Label label;
    private Image image;
    private SliderInt slider;

    public void OnEnable()
    {
        VisualElement root = rootVisualElement;

        // Import UXML
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/Sample4.uxml");
        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/Sample4.uss");
        VisualElement labelFromUXML = visualTree.CloneTree();
        labelFromUXML.styleSheets.Add(styleSheet);
        root.Add(labelFromUXML);

        this.label = root.Q<Label>("label");
        this.image = root.Q<Image>("image");
        this.slider = root.Q<SliderInt>("slider");

        slider.RegisterValueChangedCallback<int>(Slider_ValueChanged);
    }

    private void Slider_ValueChanged(ChangeEvent<int> evt)
    {
        this.label.text = $"page {evt.newValue}/{slider.highValue}";
        var backgroundTexture = Resources.Load<Texture2D>($"img_{evt.newValue}");
        this.image.style.backgroundImage = backgroundTexture;
    }
}
```

次に、Sample4.uss を以下のように変更してください。 

```css:Sample4.uss
Label {
    font-size: 20px;
    -unity-font-style: bold;
	-unity-text-align: middle-center;
    color: rgb(68, 138, 255);
}

Image {
    padding-left: 20;
    padding-top: 20;
    height: 150;
	background-image: url("/Assets/Resources/img_0.png");
}
```

次に、Sample4.uxml を以下のように変更してください。

```xml:Sample4.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"
    xsi:noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
    xsi:schemaLocation="UnityEngine.UIElements ../../UIElementsSchema/UnityEngine.UIElements.xsd
                        UnityEditor.UIElements ../../UIElementsSchema/UnityEditor.UIElements.xsd
                        UnityEditor.PackageManager.UI ../../UIElementsSchema/UnityEditor.PackageManager.UI.xsd">
  
  <engine:Label text="start" name="label" />
  <engine:Image name="image" />
  <engine:SliderInt low-value="0" high-value="92" value="1" name="slider" />
</engine:UXML>
```

## 画像リソースの準備

次に、「Resources」フォルダを作成して、その下に 「img_0.png」 「img_1.png」 「img_2.png」・・・ 「img_92.png」までの画像を格納してください。
![image-37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/1670a5e5-e4da-6639-013c-5550ff2ab012.png)

## 動作結果

どうでしたか簡単に実装が行えたと思います。
Unityのメニューから、「UIElementsSamples -> Sample4」を選択して実行を確認してみてください。
![image-48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/85a19927-ab76-c3b2-8df3-d41632bcc3ad.png)
![sample4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/36fb307d-d8bb-6c40-c774-7d7005888d8a.gif)

# 終わりに

*よければ ブログ「[Unity+AssetStoreおすすめ情報](https://www.fast-system.jp/)」の方にも色々記載しているのでぜひご参照いただければと思います。*