Unity制作九宫格手机手势解锁密码

好久不更博客了，最近闲的无聊，做了个九宫格手机手势解锁密码的demo.

先上图：

虽然有点丑，但是功能还是到了哈哈，制作起来很简单，两个脚本就够了，目录结构如图

说一下思路哈，首先界面上用UGUI做成九个按钮，用它的排序列表排成3*3的，用lineRender画线。然后逻辑上图案密码实际上保存的就是数字，每个按钮对应一个数字，保存的密码实际上是数字的顺序。

下面详细说明

1.首先新建的按钮下的text删除，换成image放进去，然后把按钮图片和image的图片都换成knob,系统自带的图片，调整按钮的alpha.

效果如下：

2.将这个按钮复制8个，名字改为1-9.

效果如图：

3.新建一个空物体，叫Buttons,将9个按钮拖到它下面，然后再Buttons上添加GridLayoutGroup脚本，设置行列和间距

效果如图：

这样基本的显示建立好了

4.建立一个空物体命名为line,然后添加lineRender组件，并新建材质添加到lineRender上，线的大小和宽度或者图片好看可以自己设置，楼主懒得弄，就设了个颜色。

5.现在开始写代码了，新建一个脚本BtnsControl,脚本内容如下，具体的看注释，有疑问或者可以优化的可以评论中给我建议。

using UnityEngine;using System.Collections;using System.Collections.Generic;using UnityEngine.UI;public class BtnsControl : MonoBehaviour{    //line render 相关    [Tooltip("Line renderer used for the line drawing.")]    public LineRenderer line;    private int lineVertexIndex = 2;    //密码锁的按钮组    public Button[] btns;    public Button btnOK;    //密码保存    public List<string> password = new List<string>();    // Use this for initialization    void Start()    {        //绑定按钮事件，这里随便试了一个        for (int i = 0; i < btns.Length; i++)        {            UIEventListener btnListenser = btns[i].GetComponent<UIEventListener>();            btnListenser.OnMouseEnter += whenMouseEnter;            btnListenser.OnMouseDown += whenMouseDown;            //btnListenser.OnMouseExit += whenMouseExit;        }        UIEventListener btnokListenser = btnOK.GetComponent<UIEventListener>();        btnokListenser.OnClick += OnOKBtnClick;    }    #region 处理开始和结束    bool IsStart;    void Update()    {        if (Input.GetMouseButton(0))        {            IsStart = true;        }        else        {            IsStart = false;        }    }    #endregion    void whenMouseEnter(GameObject go)    {        if (IsStart == false)            return;        Debug.Log("enter button  " + go.name);        go.GetComponent<Image>().color = go.GetComponent<Button>().colors.highlightedColor;        int i = int.Parse(go.name);        password.Add(go.name);        DrawLines(i - 1);    }    #region 处理意外    //处理鼠标按下时，刚好在按钮上的意外    void whenMouseDown(GameObject go)    {        IsStart = true;        whenMouseEnter(go);    }    #endregion    // 画按钮之间的连线    void DrawLines(int btnIndex)    {        if (line != null)        {            lineVertexIndex++;            line.SetVertexCount(lineVertexIndex);            Vector3 cursorPos = btns[btnIndex].gameObject.transform.position;            cursorPos.z = 0f;            Vector3 cursorSpacePos = Camera.main.ScreenToWorldPoint(cursorPos);            cursorSpacePos.z = 0f;            line.SetPosition(lineVertexIndex - 1, cursorSpacePos);        }    }    //输出设置的密码，可做后续处理，保存校对的啥的，可以继续延伸    void OnOKBtnClick(GameObject go)    {        string pass = "";        foreach (var item in password)        {            pass += item;        }        Debug.Log("您设置的密码是：" + pass);    }}

其中涉及到了按钮绑定的脚本，脚本叫UIEventListener,内容如下：

using UnityEngine;using System.Collections;using UnityEngine.UI;using UnityEngine.EventSystems;using System;public class UIEventListener : MonoBehaviour, IPointerClickHandler, IPointerEnterHandler, IPointerExitHandler,IPointerDownHandler{    /// <summary>    /// 定义事件代理    /// </summary>    /// <param name="gb"></param>    public delegate void UIEventProxy(GameObject gb);        /// <summary>    /// 鼠标点击事件    /// </summary>    public event UIEventProxy OnClick;    /// <summary>    /// 鼠标进入事件    /// </summary>    public event UIEventProxy OnMouseEnter;    /// <summary>    /// 鼠标滑出事件    /// </summary>    public event UIEventProxy OnMouseExit;    /// <summary>    /// 鼠标按下事件    /// </summary>    public event UIEventProxy OnMouseDown;    public void OnPointerClick(PointerEventData eventData)    {        if (OnClick != null)            OnClick(this.gameObject);    }    public void OnPointerEnter(PointerEventData eventData)    {        if (OnMouseEnter != null)            OnMouseEnter(this.gameObject);    }    public void OnPointerExit(PointerEventData eventData)    {        if (OnMouseExit != null)            OnMouseExit(this.gameObject);    }    public void OnPointerDown(PointerEventData eventData)    {        if (OnMouseDown != null)            OnMouseDown(this.gameObject);    }}

这个要自己写，总觉得ugui用的不太习惯，NGUI这部分是插件里写好了的。

6.给自己的9个button添加UIEventListener,然后Buttons控件添加BtnsControl脚本，并拖入相应参数，其中的okbutton顺手在场景里建立一个放好就好了。

这样就可以了，运行起来就能设置密码了，点击ok按钮可以看到自己设置的密码实际上就是变相的数字密码。

最终效果如图：

至于，创建密码，保存密码，校对密码这里我就不说了，实现起来很简单。

谢谢支持。

工程源码