Unity3D学习（14）之可折叠公告牌

最近越来越觉得Unity3D的UI很好玩，所以我尝试去制作可折叠的公告牌。先上个成品图：

首先新建Canvas，在Canvas里面新建两个Panel，一个Panel用于放置背景，一个Panel用于公告牌。在公告牌的Panel里面新建3个Button和3个Image和3个Text。具体设置如图

然后新建一个空物体命名为BoardManager，挂上脚本BoardManager.cs,用于控制公告的显示，折叠式公告牌原理是点击按钮，使Image（公告）为active，通过2D刚体碰撞，让其他按钮向下移。

public class BoardManager : MonoBehaviour {

    public void ControlBoard(GameObject obj)

    {

        bool open = obj.GetComponent<Board>().Open;

        open = !open;

        obj.GetComponent<Board>().Open = open;

        obj.SetActive(open);//选择激活或者灭活

    }

}

然后在3个Image上都挂载Board.cs,记录公告状态显示

public class Board : MonoBehaviour {
    public bool Open = false;//初始状态都为关
}

因为要利用在Button属性面板如图设置

因为需要利用到2D物体的碰撞，需要加入2D刚体，和2D的碰撞体，这是一个巨大无比的坑。

首先给3个Button都添加刚体和碰撞体，然后给3个图片都添加碰撞体

2D碰撞体贼坑，本来用OnCollisionEnter2D检测碰撞，但是却死活检测不到，刚体也加了，碰撞体也加了就是没卵用，百度谷歌大法都用了，也没啥用，后来幸好我点击编辑碰撞体，才发现，2D碰撞体最初是给一个点而不是一个形状，所以即使看起来碰撞了，其实只要碰撞框没重合就没有碰撞信息

然后给第二个Button加上Button2_Move.cs

public class Button2_Move : MonoBehaviour {
    public GameObject Panel;//公告牌面板
    float x = 0;//第二个Button初始位置x
    float y = 25;//第二个Button初始位置y
    float cur_x;//第二个Button当前位置
    float cur_y;//第二个Button当前位置
    void Start()
    {
        cur_x = x;//
        cur_y = y;//初始化当前位置x,y
    }
    // Update is called once per frame
    void Update() {
        if (Panel.transform.FindChild("Image1").gameObject.activeSelf == false)
        {
            Return0();//如果第一个公告不显示就退回起始点
        }
        Panel.transform.FindChild("Image2").gameObject.GetComponent<RectTransform>().localPosition = new Vector3(cur_x, cur_y - 155, 0);//实时更新Image2的位置保证它是跟在按钮2下方

    }
    void Return0()
    {
        GetComponent<RectTransform>().localPosition = new Vector3(x, y, 0);//返回
        cur_y = y;//记录当前位置
    }
    void OnCollisionEnter2D(Collision2D coll)
    {
        RectTransform coll_Tranform = coll.gameObject.GetComponent<RectTransform>();
        GetComponent<RectTransform>().localPosition = new Vector3(x, y - coll_Tranform.sizeDelta.y, 0);//位置改为x不变，y加上碰撞Image的height
        cur_y = y - coll_Tranform.sizeDelta.y;//记录当前位置
    }
}

然后为第三个Button加上Button3_Move.cs。本来按道理将button的行为应该一样，可是考虑到Button3比Button2多了一个可能位置，然后我也暂时没想到优化的办法，先将就着吧。

public class Button3_Move : MonoBehaviour {

    public GameObject Panel;
    float cur_x;
    float cur_y;//当前位置的x,y
    float x = 0;
    float y = -95;//初始位置的x,y
    float x1 = 0;
    float y1 = -299;//中间位置的x,y

    void Start()
    {
        cur_x = x;
        cur_y = y;
    }
    // Update is called once per frame
    void Update()
    {
        Panel.transform.FindChild("Image3").gameObject.GetComponent<RectTransform>().localPosition = new Vector3(cur_x, cur_y - 165, 0);//实时更新Image3，保证Image3在Button3下方
        if (Panel.transform.FindChild("Image1").gameObject.activeSelf == true)
        {
            if(Panel.transform.FindChild("Image2").gameObject.activeSelf == false)
            {
                Return2();//当第一个公告牌打开，第二个隐藏时
            }
        }
        else
        {
            if (Panel.transform.FindChild("Image2").gameObject.activeSelf == false)
            {
                Return1();//当两个公告牌都隐藏时
            }
        }
    }
    void Return1()
    {
        GetComponent<RectTransform>().localPosition = new Vector3(x, y, 0);
        cur_y = y;//记录当前位置
    }
    void Return2()
    {
        GetComponent<RectTransform>().localPosition = new Vector3(x1, y1, 0);
        cur_y = y1;//记录当前位置
    }
    void OnCollisionEnter2D(Collision2D coll)
    {
        RectTransform coll_Tranform = coll.gameObject.GetComponent<RectTransform>();
        Debug.Log(coll.gameObject.name);
        GetComponent<RectTransform>().localPosition = new Vector3(cur_x, cur_y - coll_Tranform.sizeDelta.y, 0);//位置下移
        cur_y = cur_y - coll_Tranform.sizeDelta.y;//记录当前位置
    }
}

至于第二个公告牌的滚动字幕则是用了Mask和动画录制后的效果，其他额外效果都是动画录制播放

公告牌就到这了下期再见

有兴趣可以去我的Github看可折叠公告牌