Quest Log 公告牌

Quest Log 公告牌

项目地址
游戏视频

布局过程

创建UI界面

• 添加Canvas画布
• 再Canvas下添加ScrollView组件
  

添加设置组件

• ScrollView组件里的Content添加三个Button和两个Text
• ScrollView里的Viewport添加Image组件作为菜单栏的背景图片
• Content里添加组件Vertical Layout Group用于Button和Text
• 设置ScrollView的Anchors
• 设置Button的图片和ScrollBar的图片，颜色和设置各个Text（包括Button的Text）的内容
• 将rect transform部分pivot等提前统一设置
  整体图形层
  
  
  

代码

点击事件

往Button添加点击事件，Button已经留好了接口绑定事件

private Button btn;
// 公告牌的文本框
public Text text;
void Start()
{
    btn = this.gameObject.GetComponent<Button>();
    btn.onClick.AddListener(OnClick);
}
void OnClick(){}

公告牌动画

协程

Unity的协程系统是基于C#的一个简单而强大的接口 ，IEnumerator，它允许你为自己的集合类型编写枚举器。

• 通过 StartCoroutine()方法来开始一个协程：

StartCoroutine(Countdown());

• 通过StopAllCoroutines()方法来终止所有协程，这只会终止在调用该方法的对象中开始的协程，对于其他的MonoBehavior类中运行的协程不起作用。
• 如果你想要终止某一个特定的协程，在开始协程的时候将它的方法名作为字符串，就像这样：

//If you start a Coroutine by name...
StartCoroutine("FirstTimer");
StartCoroutine("SecondTimer");
//You can stop it anytime by name!
StopCoroutine("FirstTimer");

代码

点击事件

using UnityEngine;
using System.Collections;

public class ShowNextOnClick : MonoBehaviour
{
    public GameObject toHide;
    public GameObject next;

    public void OnClick()
    {
        toHide.SetActive(false);
        next.SetActive(true);
    }
}

按钮

using UnityEngine;
using UnityEngine.UI;

public class MultiImageButton : UnityEngine.UI.Button
{
    private Graphic[] m_graphics;

    protected Graphic[] Graphics
    {
        get
        {
            if (m_graphics == null)
            {
                m_graphics = targetGraphic.transform.GetComponentsInChildren<Graphic>();
            }
            return m_graphics;
        }
    }

    protected override void DoStateTransition(SelectionState state, bool instant)
    {
        Color color;
        switch (state)
        {
            case Selectable.SelectionState.Normal:
                color = this.colors.normalColor;
                break;
            case Selectable.SelectionState.Highlighted:
                color = this.colors.highlightedColor;
                break;
            case Selectable.SelectionState.Pressed:
                color = this.colors.pressedColor;
                break;
            case Selectable.SelectionState.Disabled:
                color = this.colors.disabledColor;
                break;
            default:
                color = Color.black;
                break;
        }
        if (base.gameObject.activeInHierarchy)
        {
            switch (this.transition)
            {
                case Selectable.Transition.ColorTint:
                    ColorTween(color * this.colors.colorMultiplier, instant);
                    break;
                default:
                    throw new System.NotSupportedException();
            }
        }
    }

    private void ColorTween(Color targetColor, bool instant)
    {
        if (this.targetGraphic == null)
        {
            return;
        }

        foreach (Graphic g in this.Graphics)
        {
            if (g == null) continue;
            g.CrossFadeColor(targetColor, (!instant) ? this.colors.fadeDuration : 0f, true, true);
        }
    }
}

DemoToggle

using UnityEngine;
using UnityEngine.UI;

public class DemoToggle : MonoBehaviour
{
    private Toggle _toggle;
    public GameObject on;
    public GameObject off;

    public void Awake()
    {
        _toggle = GetComponent<Toggle>();
        _toggle.onValueChanged.AddListener(state =>
        {
            if (state)
            {
                on.SetActive(true);
                off.SetActive(false);
            }
            else
            {
                on.SetActive(false);
                off.SetActive(true);
            }
        });
    }
}

文字的淡入淡出

private float text_height;
private int frame = 20;
IEnumerator rotateIn()
{
    float rotatex = 0;
    float height = text_height;
    for (int i = 0; i < frame; i++)
    {
        rotatex -= 90f / frame;
        height -= text_height / frame;
        // 渐变
        text.transform.rotation = Quaternion.Euler(rotatex, 0, 0);     
        text.rectTransform.sizeDelta = new Vector2(text.rectTransform.sizeDelta.x, height);
        yield return null;
    }
    text.gameObject.SetActive(false);
}

IEnumerator rotateOut()
{
    float rotatex = -90;
    float xy = 0;
    text.gameObject.SetActive(true);
    for (int i = 0; i < frame; i++)
    {
        rotatex += 90f / frame;
        xy += text_height / frame;
        //淡出渐变
        text.transform.rotation = Quaternion.Euler(rotatex, 0, 0);
        text.rectTransform.sizeDelta = new Vector2(text.rectTransform.sizeDelta.x, xy);
        yield return null;
    } 
}

退出

public class Quit : MonoBehaviour
{
    private Button btn;

    private void Start()
    {
        btn = gameObject.GetComponent<Button>();
        btn.onClick.AddListener(QuitManager);
    }
    public void QuitManager()
    {
        #if UNITY_EDITOR
        UnityEditor.EditorApplication.isPlaying = false;
        #else
        Application.Quit();
        #endif
    }
}

完成代码后挂载到每一个button之后并把button对应的text拖到相应的栏目里面