UniRx를 사용한 UI 시스템 구축

이상적인 UI 시스템으로서 값의 변화에 따라 아이콘도 바뀌고 색깔도 바뀌는 등 행동이 매우 편리하기 때문에 한 번에 실시하면 조작 원가를 낮출 수 있는 시스템이 이상적이다.
UIRx를 사용하여 그런 기능을 갖춘 UI 시스템을 구현할 수 있다면 좋겠다고 생각합니다.
유니렉스 해설을 꽂고 싶지만 길어지니까 간단히 설명해 드리도록 허락해 주세요.

UniRx란?

UniRx는 neuecc가 제작한 Unity에 가장 적합한 Reactive Extensions의 라이브러리입니다.
AssetStore, GiitHub 등에 배포합니다.
입문편으로 삼은 닭고기 수프 씨의 기사는 이해하기 쉬우니 추천합니다.
http://qiita.com/toRisouP/items/2f1643e344c741dd94f8
이번에는 UniRx의 장점을 활용하고 변화된 알림이 있으면 UI에 관리를 의뢰하고 싶습니다.

ReactiveProperty

UniRx 기준은 IntReactiveProperty·BoolReactiveProperty·Vector2ReactiveProperty 등이며 값별로 변화OnNext()가 있으면 발행된다.
이는 값을 교부할 때 같은 값이면 통과하고 다른 값이면 OnNext()가 발생하는 등 매우 편리한 기능이다.
이번에 온 넥스트(On Next)가 발생하면 엔움의 멤버별로 이미지 대체 구조를 만들고 싶다.

이 emun은 ReactiveProperty로 구성원의 변화에 따라 이미지도 변합니다.
이 동시에 저희도 엔음의 편리한 기능을 채택하여 당신도 협조하여 사용하시기를 바랍니다.
원래는 '값의 변화' 만으로 판단하는 코드 수는 상응하는 것이다.변수의 정의를 바꾸는 방법만 경량화할 수 있다면 사용하지 않는 방법이 없다.
enum을 ReactiveProperty로 사용하는 방법에 대해 별도로 설명하고 우선 여기서 기본적인 코드를 소개하고 싶습니다.

    BoolReactiveProperty bool = new BoolReactiveProperty(false);

    void start(){
        bool.Subscribe(Debug("Bool:" + bool.Value));
    }

    public void SetBool(bool setbool){
        bool.Value = setbool;
    }

그렇게 말했어.
기본적으로 수치를 교부할 때 수치를 건네주어야 한다.Value.
잘 어울리는 부분이에요.
납품된 가격에 차이가 있으면 온넥스트(OnNext)를 발행합니다.
이 경우 실제 값이 포함되며 휴가를 통과하면 OnNext가 발행됩니다.

사용자 정의 ReactiveProperty 만들기

그러면 사용자 지정 ReactiveProperty를 만듭니다.
이번에는 본인이 정의한 enum에서 사용하고 싶어요.
우선, 사용할 enum을 정의합니다.
갑작스럽지만, 이 enum의 값은 다음에 불러오는 자원의 파일 이름과 같습니다.
Unity에서 에셋을 로드할 때 string 형식으로 지정됩니다.
당시의 타자를 방지하기 위해 엔음이 문자열로 바뀌는 것을 예방하기 위해서다.
그럼 TabIconReactivePropertyクラス하세요.
Reactive Property를 상속하는 특별 설정의 enum을 지정합니다.
그리고 구조기로 매개 변수와 자체 계승 설정을 하세요.
계승base의 구조기는 매개 변수의 실례를 사용하는 데 사용된다.
TabIconReactiveProperty.cs

using System.Collections;
using System.Collections.Generic;
using UniRx;
using UnityEngine;

namespace MVRP.UI
{

public enum TabIcon
{
    Blue,
    Green,
    Red,
    Yellow
}


    [System.Serializable]
    public class TabIconReactiveProperty : ReactiveProperty<TabIcon>
    {
        public TabIconReactiveProperty (){}
        public TabIconReactiveProperty (TabIcon initialValue) : base (initialValue) {}
    }
}

사용자가 Inspector를 사용하여 사용자 정의 ReactiveProperty를 목측할 수 있도록 하기 위해

사용자 정의 ReactiveProperty를 사용할 때 주의해야 할 점으로 일반적인 반은 검사기로 Unity의 구조를 표시할 수 없습니다.
따라서 Editor 폴더에서 다음 범주를 설정하고 사용자 정의 Reactive Property를 사용할 때 [SerializeField] 속성을 추가합니다.
이 클래스는 사용자 정의 Reactive Property가 추가될 때마다 클래스 등록 정보를 추가하는 클래스를 준비했습니다.
ExtendInspectorDisplayDrawer.cs

using System.Collections;
using System.Collections.Generic;
using UniRx;
using UnityEngine;


namespace MVRP.UI
{
    [UnityEditor.CustomPropertyDrawer(typeof(TabIconReactiveProperty))]
    /// ここに随時追加
    public class ExtendInspectorDisplayDrawer : InspectorDisplayDrawer
    {
    }
}

관리를 일원화하다

여기서 이번 맞춤형 ReactiveProperty를 활용할 때 enum의 편리한 사용 방법, 효율적인 실현 기능을 소개한다.
유니티string에서 매개 변수로 사용되는 API의 활용과 관련해서는 엔움을 타자 오류 방지 등의 예방 조치로 추천한다.
프로젝트로서 어느 정도 결정된 방법(게임 내 속성, 공격의 종류 등)을 엔움의 구조체로 활용하면 정확하게 설정되지 않은 것에 대해 오류를 되돌려주는 메커니즘을 실현할 수 있다.
Enum.GetNames
https://msdn.microsoft.com/ja-jp/library/system.enum.getnames(v=vs.110).aspx
- 구조 이름 가져오기
Enum.ToObject
https://msdn.microsoft.com/ja-jp/library/system.enum.toobject(v=vs.110).aspx
- 정수에서 구성원 값 가져오기
구성원을 문자열로 추출하려면 enum.nanika.ToString() 구조 구성원 수 Enum.GetNames (typeof(enum)).Length 를 얻으려면 정수로 구성원 Enum.ToObject (typeof(enum), i) 을 호출하는 것이 유용합니다.
문자열, 매직넘버로 설치하면 변경 시 대응, 태보의 검사 등이 운용 단계에 들어가면 따라잡을 수 없어 어느 정도 규칙으로 속박할 가능성이 있다.

실행 프로세스

그럼 드디어 Presenter를 실현하겠습니다.
이번에는 골목마다 인기 있는 뮤직비디오(R)P의 디자인을 인상 깊게 실사룩을 하고 싶다.
원래 Presenter라고 불리는 이 학급(MV(R)P의 P)은 가벼운 실크로 제작됐으며, 기본적으로 뷰와 모델들을 잘 만들어야 한다.
자세한 설명은 생략했지만, 향후 발전성 시행을 예견하고 프레젠터로서 학급을 정의하고 싶다.
먼저 필요한 UI 부품(View)에 대한 링크와 리소스를 로드합니다.
다음은 현재 값을 외부에서 확인할 수 있는 변수와 ReactiveProperty(Model)의 설정을 설정합니다.
이번에 실시된 반은 엔움의 구성원으로부터 탭의 아이콘을 변경하려는 시도였다.
캐시 참조 대상에 대한 Image 클래스(View) 및 리소스에 대한 Texture2D 변수를 준비합니다.

    [SerializeField] Image icomImage;
    Dictionary<TabIcon, Texture2D> iconSprite = new Dictionary<TabIcon, Texture2D>();

나는 Dictionaty반을 이용해서 엔움의 구성원을 키에게 분배하고 싶다.
enum Key 캐시 Texter
다음은 ReactiveProperty의 선언과 외부에서 읽는 읽기 전용 ReactiveProperty를 준비합니다.

    [SerializeField] TabIconReactiveProperty iconSpriteStatus = new TabIconReactiveProperty (TabIcon.Red);
    public IReadOnlyReactiveProperty<TabIcon> IconSpriteStatus { get { return iconSpriteStatus; } }

IreadOnlyReactive Property는 이 참조서에서Subscribe를 선택할 수 있어 매우 편리합니다.
안에 있는 엔움 멤버를 확인하려면 IconSpriteStatus.Value에서 확인할 수 있습니다.
다음은 스타트의 활동(방법)부터 필요한 준비와 흐름을 설정하고 싶습니다.
우선, 바뀐 그림을 캐시하십시오.
엔um으로 설정된 구성원을 몇 분 동안 불러오고 Texture2D 변수에 캐시합니다.
구성원 이름 설정의 비결로 파일 이름을 enum의 구성원 이름으로 설정할 때 불러올 때의 텍스트 데이터로 변환할 수 있습니다.
여기에 폴더의 경로를 직접 적었지만 원래 설치 방법으로는 좋지 않은 점이 있다.
이 이야기의 상하문에서 볼 때 폴더의 경로도enum으로 정의해야 하기 때문이다.
호출 방법은 먼저 구성원 수를 얻은 다음에 순환 횟수를 설정하는 것이다.
그리고 초기화된 int값Enum.ToObject을 사용하여enum의 구성원을 설정합니다.
이 설정의 구성원 값을 사용하여 Dectionary 변수에서 Add Key 및 Texture2D를 사용합니다.

for (int i = 0; i < Enum.GetNames (typeof(TabIcon)).Length; i++) {
                TabIcon iconFileName = (TabIcon)Enum.ToObject (typeof(TabIcon), i);
                iconSprite.Add (iconFileName, (Texture2D)Resources.Load ("Textures/UI/" + iconFileName.ToString ()));
            }

이미지 캐시가 완료되면 ReactiveProperty를 사용하여 스트림을 설정합니다.
여기에는 특별히 어려운 분리기를 사용하지 않고 값이 바뀌면 Subscribe의 간단한 설정으로만 설정할 수 있다.

this.iconSpriteStatus.Subscribe (
                x => icomImage.sprite 
                    = Sprite.Create(
                    iconSprite[x], 
                    new Rect(0, 0, iconSprite[x].width,
                    iconSprite[x].height), 
                    Vector2.zero
                )
            );

사용자 정의ReactiveProperty에서 enum의 구성원이 변경되면 이 값으로 캐시된 Texture2D를 불러옵니다.
이번에는 Image 레벨에 로드해야 합니다Sprite.
하지만 Texture 2D가 캐시되므로 변환이 필요합니다.
따라서 스prite 클래스의 Create 방법을 사용하여 Texture2D의 소재에서 스prite를 생성하여 그에게 건네주자.
이상은 기본적인 설치 종료입니다.
마지막으로 엔움 멤버를 바꾸는 방법을 준비하고 싶습니다.

    public void SetTabButtonIcon(TabIcon iconName){
        iconSpriteStatus.Value = iconName;
    }

다시 한 번 주의해야 하지만 리액티브 프로퍼티에 가치를 전달할 때는 반드시 Value에 맡겨야 한다.
이상은 모든 소스 코드입니다.
그럼namespace 설정을 포함하여 모두 원본 코드입니다.
TabButtonPresemter.cs

using System;
using System.Collections;
using System.Collections.Generic;
using UniRx;
using UnityEngine;
using UnityEngine.UI;

namespace MVRP.UI
{
    public class TabButtonPresenter : MonoBehaviour
    {
        [SerializeField] Image icomImage;
        Dictionary<TabIcon, Texture2D> iconSprite = new Dictionary<TabIcon, Texture2D>();

        [SerializeField] TabIconReactiveProperty iconSpriteStatus = new TabIconReactiveProperty (TabIcon.Red);
        public IReadOnlyReactiveProperty<TabIcon> IconSpriteStatus { get { return iconSpriteStatus; } }
        void Start ()
        {
            icomImage = gameObject.GetComponent<Image>();
            for (int i = 0; i < Enum.GetNames (typeof(TabIcon)).Length; i++) {
                TabIcon iconFileName = (TabIcon)Enum.ToObject (typeof(TabIcon), i);
                iconSprite.Add (iconFileName, (Texture2D)Resources.Load ("Textures/UI/" + iconFileName.ToString ()));
            }

            this.iconSpriteStatus.Subscribe (
                x => icomImage.sprite = Sprite.Create(iconSprite[x], new Rect(0, 0, iconSprite[x].width, iconSprite[x].height), Vector2.zero)
            );
        }

        public void SetTabButtonIcon(TabIcon iconName){
            iconSpriteStatus.Value = iconName;
        }
    }
}

완료된 클래스 Add를 교체 객체의 ImageObject로 이동하여 재생성 버튼을 누릅니다.
내부 인원에서 엔음의 멤버를 변경할 수 있기 때문에 동작을 확인하고 문제가 없으면 SetTabButtonIcon(TabIcon iconName)부터 변경하세요.
정상적인 동작이 없으면 먼저 IconImage 여부None를 확인한다.

그게 다야.
감사합니다.