长篇鬼故事 - 如何制作滚动条

如何制作滚动条

本文核心词：游戏制作

在制作游戏的过程中，可能会遇到需要展示的内容过多，导致展示区域放不下的情况。 在这种情况下，可以使用分页或滚动条的方式对部分内容进行隐藏。

在本篇教程中，我们将学习滚动条的制作方法。

学习前准备

本篇教程中，会涉及表达式、动作组、混合模式、精灵二级编辑界面的使用。 如需详细了解，请参阅相关教程。

大致思路

1.首先，我们需要制作一个可使用的滚动条。滚动条的长度，根据滚动条底框高度以及可滚动的长度决定。

2. 实现滚动条跟随鼠标移动的逻辑

3. 根据滚动条相对于滚动条底框的位置，决定所有下拉对象的位置。

制作过程新建工程

首先，我们新建一个空白工程

准备工作，布置场景

首先，我们需要在场景中布置需要滚动显示的UI，以及滚动条

双击进入场景，将初始图层命名为背景

新建一个精灵对象当做背景图，放入该图层

然后，我们新建一个图层，用于显示所有需要滚动的内容

新建一个名为背景板的对象，在本教程中用于显示UI背景、固定其他UI图标、决定可滚动长度。

拖入场景，将该图片的锚点设置在顶部中点

将背景板的坐标设置为x:480,y:0的位置，并设置大小 w:250 h:1000

接下来，我们新建UI图标，在本教程中当做需要滚动显示的物体。

在游戏中可能存在多个需要滚动的对象，如果对每一个都进行坐标的更改，会很难维护。 所以，我们需要在这些对象身上增加绑定能力，并将其与背景板绑定。 当我们需要滚动这些对象时，只需滚动背景板，绑定在他身上的对象也会随之移动。

新增同类组，将UI图标加入同类组。

为同类组添加绑定能力

添加滚动条

接下来，我们在场景中添加滚动条用到的对象。 首先，新建一个图层，用来放置滚动条。

新建滚动条、滚动条底框精灵对象，将锚点设置在顶部中点，并放入滚动条图层

将滚动条底框的高度设置为480。

在本篇教程中，滚动条的高度决定了UI容器内对象可下拉的最大距离。具体实现逻辑在下面会讲到。

新建全局变量

新建4个数字变量

初始坐标y ：背景板的初始坐标

容器高度 ： 容器的高度，影响最终可滚动的距离。

拖动状态 ： 判断当前用户对滚动条的操作情况

相对距离 ： 用于计算用户操作对滚动条位置的影响

初始化数据

新建事件分组初始化，添加条件当场景开始时，并在该条件下进行数据的初始化操作。

首先，我们先将容器高度设置为背景板的高度。 这样，每次我们需要调整容器高度时，只需要改变场景内背景板的高度即可。

然后将初始坐标y设置为背景板的y坐标。 后面我们都会基于初始坐标y的值对背景板进行操作

下一步，将所有位于UI容器图层的同类组对象容器内UI组，绑定到背景板上。这样只要背景板移动，绑定的对象也会跟着移动。

接下来，将滚动条的位置设置到滚动条底框的顶部

最后，根据容器高度，以及滚动条底框的高度，设置滚动条的高度，在这里我们调用动作组“设置滚动条长度”

下图为初始化事件组整体结构

设置滚动条长度

新建事件分组：动作组分组

在分组下，添加使用动作组时条件。

先进行判断，如果容器高度低于滚动条底框的高度，则将容器高度设置为滚动条底框的高度。

最后，设置滚动条的高度。公式为：滚动条底框.height/(容器高度/滚动条底框.height)

(例如：滚动条底框高度为500，容器高度为1000，计算后，滚动条高度为250，也就是滚动条底框高度的一半)

整体效果如下图

对滚动条进行操作

在本次教程中，我们将添加四种操作。

拖动滚动条

按住背景板进行拖动

点击滚动条底框，滚动条自动移动到点击位置

鼠标滚轮

添加事件分组滚动条操作

操作一：拖动滚动条操作

添加条件，当触屏操作开始时，并且正在触碰滚动条时，进入滚动条拖动操作。将拖动状态设置为1，并且相对距离设置为： 触屏操作.y-滚动条操作.y

设置相对距离，是为了让滚动条和触摸点保持最开始时的距离，避免每次点击滚动条时，滚动条直接移动到触屏位置。

接下来，实现拖动状态为1时，滚动条跟随触屏位置移动的逻辑。添加如下事件，当拖动状态为1时，设置滚动条的Y坐标。

Y坐标的公式为：clamp(触屏操作.y-相对距离,滚动条底框.y,滚动条底框.y+滚动条底框.height-滚动条.height)

表达式clamp()用来限制滚动条的位置不能超出滚动条底框的范围。

在成功添加以上事件后，预览游戏，在点击滚动条后移动鼠标，滚动条也将随之移动。

接下来要做的，是背景板根据滚动条的位置，设置自己的坐标。(也就是做到UI滚动的效果)

在事件组下添加两个数值类型局部变量:local_定点可移动极限值、local_滚动条比值

local_定点可移动极限值：代表容器最大限度可以滚动的距离。 由容器高度变量以及滚动条底框高度决定。

local_滚动条比值：表示当前滚动条在滚动条底框中的位置比例。 最上方为0，最下方为1。

添加事件，根据两个局部变量的值，设置背景板的坐标。(只有当滚动条的高度不等于滚动条底框的高度时,才会执行)

公式如下：

local_定点可移动极限值 : 容器高度-滚动条底框.height

local_滚动条比值 : (滚动条.y-滚动条底框.y)/(滚动条底框.height-滚动条.height)

背景板坐标 : 初始坐标y-(local_顶点可移动极限值 * local_滚动条比值)

整体效果如下图

当成功添加以上事件后，背景板就可以跟随滚动条进行移动，可以预览查看效果。

操作二：拖动背景板

不同种类的操作，是需要按照规则更改滚动条位置就好，多数事件是不变的，所以可以直接复制操作一的事件表进行修改即可。

复制下图的两条事件

正在触摸滚动条改成正在触摸背景板

拖动状态设置为：2

相对距离设置为：触屏操作.y

条件当拖动状态=1时更改为2

滚动条坐标公式为：clamp(滚动条.y-(触屏操作.y-相对距离)20.2,滚动条底框.y,滚动条底框.y+滚动条底框.height-滚动条.height)

添加动作：将相对距离设置为触屏操作.y

操作三：点击滚动条底框

同样复制事件，更改内容如下。

正在触摸滚动条改成正在触摸滚动条底框

拖动状态设置为：3

相对距离设置为：20 (可自定义，主要用于在滚动条和触摸点之间设置距离。)

条件当拖动状态=1时更改为3

滚动条坐标公式为：lerp(滚动条.y,clamp(触屏操作.y-相对距离,滚动条底框.y,滚动条底框.y+滚动条底框.height-滚动条.height),dt *10)

表达lerp用于滚动条的平滑移动

操作四：鼠标滚轮

添加如下事件：

向下滚动：clamp(滚动条.y+30,滚动条底框.y,滚动条底框.y+滚动条底框.height-滚动条.height)

向上滚动：clamp(滚动条.y-30,滚动条底框.y,滚动条底框.y+滚动条底框.height-滚动条.height)

触摸结束时，复原状态

当触摸结束时，记得将拖动状态重置为0。

操作总览图

需要注意，滚动条底框的长度同样影响了可滚动的距离。 一般情况下，底框长度的值设置为容器可显示区域的长度

使用混合模式添加遮罩

遮罩用于指定容器的可显示区域

勾选UI容器图层的强制渲染到纹理

新建遮罩精灵图(图片内容无所谓)，将混合模式改成在原图像外显示后来图像

将遮罩放入UI容器图层的顶部，调整大小位置，遮罩所在的位置就不会显示该图层的其他对象了。

以上便是本次教程的所有事件。如有不明确的地方，可以下载教学工程查看具体实现步骤。

点击下载全能无需编程的唤境引擎！