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

鉴于之前写的关于这篇博客，大家提出了一些问题，当时楼主自己电脑上看的是没问题，没大在意，最近一些朋友再次提出了这个问题，楼主这里集中修正了下：

修正时Unity的版本：

Unity 2017.2.0f3

问题：

刚开始画的时候会多出一条线？

这里楼主找了下原因，刚开始的脚本这个数值测试的时候设置的2，实际上应该设为0；楼主改了下不会再出现多一条线的问题，大家也试试，



后面楼主也发现了一些其他问题：

1.llineRender的脚本更新：



更正后的脚本如图：



2.点击一个按钮后停止后再次按下时会重复记录，楼主在按下时，加了句密码清空：



目前想到的就这些了，大家还有什么疑问尽管提出来，虚心求教，旨在更好的技术交流。

另外附上更新后的脚本包：

工程源码2.0

=========================分割线下面为2016.9.12日编写=======================================================

好久不更博客了，最近闲的无聊，做了个九宫格手机手势解锁密码的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按钮可以看到自己设置的密码实际上就是变相的数字密码。

最终效果如图：



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

谢谢支持。

工程源码