九宫格

九宫格_第1张图片


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

下面详细说明

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

效果如下:

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

效果如图:

九宫格_第3张图片

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

效果如图:

九宫格_第4张图片

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

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

你可能感兴趣的:(九宫格)