简单选择板
实现要求
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; //将子物体拉到中心位置时的速度