在制作游戲的過(guò)程中，可能會(huì)遇到需要展示的內(nèi)容過(guò)多，導(dǎo)致展示區(qū)域放不下的情況。 在這種情況下，可以使用分頁(yè)或滾動(dòng)條的方式對(duì)部分內(nèi)容進(jìn)行隱藏。
在本篇教程中，我們將學(xué)習(xí)滾動(dòng)條的制作方法。

學(xué)習(xí)前準(zhǔn)備

本篇教程中，會(huì)涉及表達(dá)式、動(dòng)作組、混合模式、精靈二級(jí)編輯界面的使用。 如需詳細(xì)了解，請(qǐng)參閱相關(guān)教程。

大致思路

1.首先，我們需要制作一個(gè)可使用的滾動(dòng)條。滾動(dòng)條的長(zhǎng)度，根據(jù)滾動(dòng)條底框高度以及可滾動(dòng)的長(zhǎng)度決定。
2. 實(shí)現(xiàn)滾動(dòng)條跟隨鼠標(biāo)移動(dòng)的邏輯
3. 根據(jù)滾動(dòng)條相對(duì)于滾動(dòng)條底框的位置，決定所有下拉對(duì)象的位置。

制作過(guò)程

新建工程

首先，我們新建一個(gè)空白工程

準(zhǔn)備工作，布置場(chǎng)景

首先，我們需要在場(chǎng)景中布置需要滾動(dòng)顯示的UI，以及滾動(dòng)條
雙擊進(jìn)入場(chǎng)景，將初始圖層命名為背景

新建一個(gè)精靈對(duì)象當(dāng)做背景圖，放入該圖層

然后，我們新建一個(gè)圖層，用于顯示所有需要滾動(dòng)的內(nèi)容

新建一個(gè)名為背景板的對(duì)象，在本教程中用于顯示UI背景、固定其他UI圖標(biāo)、決定可滾動(dòng)長(zhǎng)度。
拖入場(chǎng)景，將該圖片的錨點(diǎn)設(shè)置在頂部中點(diǎn)

將背景板的坐標(biāo)設(shè)置為x:480,y:0的位置，并設(shè)置大小 w:250 h:1000

接下來(lái)，我們新建UI圖標(biāo)，在本教程中當(dāng)做需要滾動(dòng)顯示的物體。

在游戲中可能存在多個(gè)需要滾動(dòng)的對(duì)象，如果對(duì)每一個(gè)都進(jìn)行坐標(biāo)的更改，會(huì)很難維護(hù)。 所以，我們需要在這些對(duì)象身上增加綁定能力，并將其與背景板綁定。 當(dāng)我們需要滾動(dòng)這些對(duì)象時(shí)，只需滾動(dòng)背景板，綁定在他身上的對(duì)象也會(huì)隨之移動(dòng)。

新增同類組，將UI圖標(biāo)加入同類組。

為同類組添加綁定能力

添加滾動(dòng)條

接下來(lái)，我們?cè)趫?chǎng)景中添加滾動(dòng)條用到的對(duì)象。 首先，新建一個(gè)圖層，用來(lái)放置滾動(dòng)條。

新建滾動(dòng)條、滾動(dòng)條底框精靈對(duì)象，將錨點(diǎn)設(shè)置在頂部中點(diǎn)，并放入滾動(dòng)條圖層

將滾動(dòng)條底框的高度設(shè)置為480。

在本篇教程中，滾動(dòng)條的高度決定了UI容器內(nèi)對(duì)象可下拉的最大距離。具體實(shí)現(xiàn)邏輯在下面會(huì)講到。

新建全局變量

新建4個(gè)數(shù)字變量

• 初始坐標(biāo)y ：背景板的初始坐標(biāo)

• 容器高度 ： 容器的高度，影響最終可滾動(dòng)的距離。

• 拖動(dòng)狀態(tài) ： 判斷當(dāng)前用戶對(duì)滾動(dòng)條的操作情況

• 相對(duì)距離 ： 用于計(jì)算用戶操作對(duì)滾動(dòng)條位置的影響

初始化數(shù)據(jù)

新建事件分組初始化，添加條件當(dāng)場(chǎng)景開始時(shí)，并在該條件下進(jìn)行數(shù)據(jù)的初始化操作。
首先，我們先將容器高度設(shè)置為背景板的高度。 這樣，每次我們需要調(diào)整容器高度時(shí)，只需要改變場(chǎng)景內(nèi)背景板的高度即可。

然后將初始坐標(biāo)y設(shè)置為背景板的y坐標(biāo)。 后面我們都會(huì)基于初始坐標(biāo)y的值對(duì)背景板進(jìn)行操作

下一步，將所有位于UI容器圖層的同類組對(duì)象容器內(nèi)UI組，綁定到背景板上。這樣只要背景板移動(dòng)，綁定的對(duì)象也會(huì)跟著移動(dòng)。

接下來(lái)，將滾動(dòng)條的位置設(shè)置到滾動(dòng)條底框的頂部

最后，根據(jù)容器高度，以及滾動(dòng)條底框的高度，設(shè)置滾動(dòng)條的高度，在這里我們調(diào)用動(dòng)作組“設(shè)置滾動(dòng)條長(zhǎng)度”

下圖為初始化事件組整體結(jié)構(gòu)

設(shè)置滾動(dòng)條長(zhǎng)度

新建事件分組：動(dòng)作組分組

在分組下，添加使用動(dòng)作組時(shí)條件。

先進(jìn)行判斷，如果容器高度低于滾動(dòng)條底框的高度，則將容器高度設(shè)置為滾動(dòng)條底框的高度。

最后，設(shè)置滾動(dòng)條的高度。公式為：滾動(dòng)條底框.height/(容器高度/滾動(dòng)條底框.height)
(例如：滾動(dòng)條底框高度為500，容器高度為1000，計(jì)算后，滾動(dòng)條高度為250，也就是滾動(dòng)條底框高度的一半)

整體效果如下圖

對(duì)滾動(dòng)條進(jìn)行操作

在本次教程中，我們將添加四種操作。

1. 拖動(dòng)滾動(dòng)條

2. 按住背景板進(jìn)行拖動(dòng)

3. 點(diǎn)擊滾動(dòng)條底框，滾動(dòng)條自動(dòng)移動(dòng)到點(diǎn)擊位置

4. 鼠標(biāo)滾輪

添加事件分組滾動(dòng)條操作

操作一：拖動(dòng)滾動(dòng)條操作

添加條件，當(dāng)觸屏操作開始時(shí)，并且正在觸碰滾動(dòng)條時(shí)，進(jìn)入滾動(dòng)條拖動(dòng)操作。將拖動(dòng)狀態(tài)設(shè)置為1，并且相對(duì)距離設(shè)置為： 觸屏操作.y-滾動(dòng)條操作.y

設(shè)置相對(duì)距離，是為了讓滾動(dòng)條和觸摸點(diǎn)保持最開始時(shí)的距離，避免每次點(diǎn)擊滾動(dòng)條時(shí)，滾動(dòng)條直接移動(dòng)到觸屏位置。
接下來(lái)，實(shí)現(xiàn)拖動(dòng)狀態(tài)為1時(shí)，滾動(dòng)條跟隨觸屏位置移動(dòng)的邏輯。添加如下事件，當(dāng)拖動(dòng)狀態(tài)為1時(shí)，設(shè)置滾動(dòng)條的Y坐標(biāo)。
Y坐標(biāo)的公式為：clamp(觸屏操作.y-相對(duì)距離,滾動(dòng)條底框.y,滾動(dòng)條底框.y+滾動(dòng)條底框.height-滾動(dòng)條.height)
表達(dá)式clamp()用來(lái)限制滾動(dòng)條的位置不能超出滾動(dòng)條底框的范圍。

在成功添加以上事件后，預(yù)覽游戲，在點(diǎn)擊滾動(dòng)條后移動(dòng)鼠標(biāo)，滾動(dòng)條也將隨之移動(dòng)。

接下來(lái)要做的，是背景板根據(jù)滾動(dòng)條的位置，設(shè)置自己的坐標(biāo)。(也就是做到UI滾動(dòng)的效果)

在事件組下添加兩個(gè)數(shù)值類型局部變量:local_定點(diǎn)可移動(dòng)極限值、local_滾動(dòng)條比值

• local_定點(diǎn)可移動(dòng)極限值：代表容器最大限度可以滾動(dòng)的距離。 由容器高度變量以及滾動(dòng)條底框高度決定。

• local_滾動(dòng)條比值：表示當(dāng)前滾動(dòng)條在滾動(dòng)條底框中的位置比例。 最上方為0，最下方為1。

添加事件，根據(jù)兩個(gè)局部變量的值，設(shè)置背景板的坐標(biāo)。(只有當(dāng)滾動(dòng)條的高度不等于滾動(dòng)條底框的高度時(shí),才會(huì)執(zhí)行)

公式如下：
local_定點(diǎn)可移動(dòng)極限值 :?容器高度-滾動(dòng)條底框.height
local_滾動(dòng)條比值 :?(滾動(dòng)條.y-滾動(dòng)條底框.y)/(滾動(dòng)條底框.height-滾動(dòng)條.height)
背景板坐標(biāo) :?初始坐標(biāo)y-(local_頂點(diǎn)可移動(dòng)極限值 * local_滾動(dòng)條比值)

整體效果如下圖

當(dāng)成功添加以上事件后，背景板就可以跟隨滾動(dòng)條進(jìn)行移動(dòng)，可以預(yù)覽查看效果。

操作二：拖動(dòng)背景板

不同種類的操作，是需要按照規(guī)則更改滾動(dòng)條位置就好，多數(shù)事件是不變的，所以可以直接復(fù)制操作一的事件表進(jìn)行修改即可。
復(fù)制下圖的兩條事件

• 正在觸摸滾動(dòng)條改成正在觸摸背景板

• 拖動(dòng)狀態(tài)設(shè)置為：2

• 相對(duì)距離設(shè)置為：觸屏操作.y

• 條件當(dāng)拖動(dòng)狀態(tài)=1時(shí)更改為2

• 滾動(dòng)條坐標(biāo)公式為：clamp(滾動(dòng)條.y-(觸屏操作.y-相對(duì)距離)20.2,滾動(dòng)條底框.y,滾動(dòng)條底框.y+滾動(dòng)條底框.height-滾動(dòng)條.height)

• 添加動(dòng)作：將相對(duì)距離設(shè)置為觸屏操作.y

操作三：點(diǎn)擊滾動(dòng)條底框

同樣復(fù)制事件，更改內(nèi)容如下。

• 正在觸摸滾動(dòng)條改成正在觸摸滾動(dòng)條底框

• 拖動(dòng)狀態(tài)設(shè)置為：3

• 相對(duì)距離設(shè)置為：20 (可自定義，主要用于在滾動(dòng)條和觸摸點(diǎn)之間設(shè)置距離。)

• 條件當(dāng)拖動(dòng)狀態(tài)=1時(shí)更改為3

• 滾動(dòng)條坐標(biāo)公式為：lerp(滾動(dòng)條.y,clamp(觸屏操作.y-相對(duì)距離,滾動(dòng)條底框.y,滾動(dòng)條底框.y+滾動(dòng)條底框.height-滾動(dòng)條.height),dt *10)

表達(dá)lerp用于滾動(dòng)條的平滑移動(dòng)

操作四：鼠標(biāo)滾輪

添加如下事件：

向下滾動(dòng)：clamp(滾動(dòng)條.y+30,滾動(dòng)條底框.y,滾動(dòng)條底框.y+滾動(dòng)條底框.height-滾動(dòng)條.height)
向上滾動(dòng)：clamp(滾動(dòng)條.y-30,滾動(dòng)條底框.y,滾動(dòng)條底框.y+滾動(dòng)條底框.height-滾動(dòng)條.height)

觸摸結(jié)束時(shí)，復(fù)原狀態(tài)

當(dāng)觸摸結(jié)束時(shí)，記得將拖動(dòng)狀態(tài)重置為0。

操作總覽圖

需要注意，滾動(dòng)條底框的長(zhǎng)度同樣影響了可滾動(dòng)的距離。 一般情況下，底框長(zhǎng)度的值設(shè)置為容器可顯示區(qū)域的長(zhǎng)度

使用混合模式添加遮罩

遮罩用于指定容器的可顯示區(qū)域
勾選UI容器圖層的強(qiáng)制渲染到紋理

新建遮罩精靈圖(圖片內(nèi)容無(wú)所謂)，將混合模式改成在原圖像外顯示后來(lái)圖像

將遮罩放入UI容器圖層的頂部，調(diào)整大小位置，遮罩所在的位置就不會(huì)顯示該圖層的其他對(duì)象了。

以上便是本次教程的所有事件。如有不明確的地方，可以下載教學(xué)工程查看具體實(shí)現(xiàn)步驟。

點(diǎn)擊下載全能無(wú)需編程的喚境引擎！? ?????

https://www.evkworld.cn/?c=600005&sc=600019&auto=1