Extending The Button

Revisado con versión: 2017.3

-

Dificultad: Intermedio

In this session Online Evangelist Matt Gambell will take us through building a system that allows for a flexible and customisable way to work with UI in a project by taking advantage of the power of ScriptableObjects.

Extending The Button

Intermedio User Interface (UI)

FlexibleUIData

Code snippet

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

[CreateAssetMenu(menuName = "Flexible UI Data")]
public class FlexibleUIData : ScriptableObject
{
    public Sprite buttonSprite;
    public SpriteState buttonSpriteState;

    public Color defaultColor;
    public Color confirmColor;
    public Color declineColor;
    public Color warningColor;
    
}

FlexibleUI

Code snippet

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

public class FlexibleUI : MonoBehaviour {

    public FlexibleUIData skinData;

    protected virtual void OnSkinUI()
    {

    }

    public virtual void Awake()
    {
        OnSkinUI();
    }

}

FlexibleUIButton

Code snippet

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

[RequireComponent(typeof(Image))]
[RequireComponent(typeof(Button))]
public class FlexibleUIButton : FlexibleUI
{

    protected Button button;
    protected Image image;

    public ButtonType buttonType;

    public enum ButtonType
    {
        Default,
        Confirm,
        Decline,
        Warning
    }

    public override void Awake()
    {
        button = GetComponent();
        image = GetComponent();

        base.Awake();
    }

    protected override void OnSkinUI()
    {
        button.transition = Selectable.Transition.SpriteSwap;
        button.targetGraphic = image;

        image.sprite = skinData.buttonSprite;
        image.type = Image.Type.Sliced;
        button.spriteState = skinData.buttonSpriteState;

        switch (buttonType)
        {
            case ButtonType.Confirm:
                image.color = skinData.confirmColor;
                break;
            case ButtonType.Decline:
                image.color = skinData.declineColor;
                break;
            case ButtonType.Default:
                image.color = skinData.defaultColor;
                break;
            case ButtonType.Warning:
                image.color = skinData.warningColor;
                break;
        }

        
        base.OnSkinUI();
    }



}

Tutoriales relacionados