Unity3d学习之路-简单选择板

简单选择板

实现要求

UI效果制作，进入NGUI官方网站，使用UGUI实现Scroll View选择板

实现过程

基础UI设置

首先创建一个Scroll View，设置ScrollRect的Anchors在中心。在Unity2018版本中会出现一个水平的滚动条和竖直的滚动条，删除竖直的滚动条，并且在Scroll Rect中设置Vertical Scrollbar为None

为Content添加Grid Layout Group组件，Content的Pivot设置为0，0.5 ，将Content调至合适的宽度和高度，在Content里添加11个Image，设置好图片

在Scroll View添加一个Panel作为中心框，并且调整透明度以及添加一个边框。Panel的边框是用一张黑色的图片制作的，名字叫Board(2)，Image Type设置为Sliced，不勾选Fill Center

最终效果

在Scroll View外，添加一个Toggle，并且设置文字

实现游戏逻辑

• Content的子物体居中

在游戏运行一开始，获得滚动框的长度，然后根据每个子物体的宽度和间隔，计算出每个子物体分别在中心位置时的x轴坐标。在中心框出现且滑动或滚动结束后，找出里中心点最近的子物体，并且将该子物体移动到之前计算好的位置。

public class CenterOnChild : MonoBehaviour, IEndDragHandler, IDragHandler
{

    public float centerSpeed = 10f;                                  //将子物体拉到中心位置时的速度