Unity3d学习之路-简单选择板

最新推荐文章于 2025-10-17 14:30:19 发布

原创

最新推荐文章于 2025-10-17 14:30:19 发布 · 1.0k 阅读

1 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何使用Unity3D的UGUI系统制作一个简单的选择板，包括基础UI设置、游戏逻辑实现和UI与逻辑的结合。通过设置Scroll View、Grid Layout Group和Toggle等组件，实现了内容的居中显示和跟随鼠标移动的效果。

简单选择板

简单选择板

实现要求

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

实现过程

基础UI设置

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

scroll view

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

content

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

board

最终效果

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

实现游戏逻辑

Content的子物体居中

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

public class CenterOnChild : MonoBehaviour, IEndDragHandler, IDragHandler
{

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

最低0.47元/天解锁文章