前幾p主要介紹的是交互型界面，這一次包括后續(xù)的將會(huì)介紹gui的另一大應(yīng)用，即描述數(shù)值（通常是某一個(gè)變量）的變化情況，其中進(jìn)度條是一大應(yīng)用，這一期將會(huì)詳細(xì)介紹偽進(jìn)度條和進(jìn)度條的工作原理

首先來(lái)看一下偽進(jìn)度條，為什么說(shuō)是“偽”進(jìn)度條呢，因?yàn)樗鼘?shí)現(xiàn)進(jìn)度增長(zhǎng)的實(shí)質(zhì)是切換幀顯示，在制作一些較為簡(jiǎn)單的變量變化時(shí)很好用

素材準(zhǔn)備：

以原版美國(guó)國(guó)會(huì)和蘇聯(lián)偏執(zhí)度為例子，先來(lái)看一下它倆的圖片素材吧：

首先是美國(guó)國(guó)會(huì)

可以看見(jiàn)它本質(zhì)是一個(gè)多幀長(zhǎng)圖，通過(guò)切換幀顯示模擬進(jìn)度變化

alpha通道則讓它能顯示出半圓形的形狀

注：在dds文件中，alpha通道可以存儲(chǔ)圖像的“透明度”，游戲的渲染文件會(huì)根據(jù)alpha通道進(jìn)行渲染，當(dāng)alpha為黑色，即完全透明，這部分的rgb內(nèi)容不會(huì)顯示；白色則非透明，rbg內(nèi)容完全顯示

然后是蘇聯(lián)偏執(zhí)度

可以看見(jiàn)原理都是類(lèi)似的

前端設(shè)計(jì)

由于可以直接參考原版就直接略過(guò)

后端編寫(xiě)

先前介紹過(guò)，通過(guò)變量計(jì)算轉(zhuǎn)換為幀數(shù)，切換幀實(shí)現(xiàn)進(jìn)度條增長(zhǎng)/減少

好的那么本期教程到此結(jié)束

沒(méi)有那么簡(jiǎn)單，讓我們做一個(gè)設(shè)想，如果我們需要一個(gè)精確1%的數(shù)值變化應(yīng)該怎么處理，顯然偽進(jìn)度條已經(jīng)不能滿足需求了，因?yàn)槿绻^續(xù)使用偽進(jìn)度條意味著制作100幀的進(jìn)度條長(zhǎng)圖，這顯然是反人類(lèi)的

接下來(lái)將介紹真·進(jìn)度條

素材準(zhǔn)備

比較反常，在介紹素材之前我們需要引入一個(gè)新的圖像注冊(cè)格式：

原版游戲自帶的進(jìn)度條著色器可以幫助我們完成進(jìn)度條圖像的注冊(cè)，它的工作原理是，設(shè)定背景圖像（空的進(jìn)度條）與填充圖像（填滿的進(jìn)度條），根據(jù)frame實(shí)時(shí)渲染

由于在scripted gui中，后端編寫(xiě)可以令frame為某個(gè)我們?cè)O(shè)置的變量，因此可以實(shí)現(xiàn)精確至變量值，從而讓游戲渲染生成一個(gè)進(jìn)度條

color/colortwo為純色填充，四個(gè)數(shù)據(jù)分別為R G B alpha，每個(gè)值最大為1最小為0

steps為填充步數(shù)，決定多少幀時(shí)進(jìn)度條被完全覆蓋，默認(rèn)值100（即frame = 100 時(shí)進(jìn)度條被填充滿）

了解這些后我們就可以準(zhǔn)備我們需要的圖像了

特別簡(jiǎn)單，只需要兩份圖像，一份未填充，一份填充滿

前端設(shè)計(jì)

進(jìn)度條通常用于決議gui，因此我們?cè)O(shè)計(jì)簡(jiǎn)單一點(diǎn)，沒(méi)有背景，只有一個(gè)進(jìn)度條，一個(gè)顯示數(shù)值的文本框

后端編寫(xiě)

依舊從簡(jiǎn)，窗口類(lèi)型改為決議窗口，將進(jìn)度條幀數(shù)設(shè)置為我們定義的變量

同時(shí)在決議類(lèi)型里引用我們的窗口

然后通過(guò)決議設(shè)置flag配合on action，令我們的變量每日增或減

最后進(jìn)入游戲測(cè)試：

好的這期教程到此結(jié)束…………

才怪！如果你真的只把“進(jìn)度條”作為進(jìn)度條使用，那可能你制作的GUI只能停留在原版基礎(chǔ)

想要制作出“炫酷”的GUI，我們需要理解深層次的東西，progressbartype（進(jìn)度條類(lèi)圖像），它本質(zhì)是一種游戲中實(shí)時(shí)的圖像渲染，將A圖像，填充成B圖像

它不只可以用作進(jìn)度條，它可以用作展示任意兩張圖像交替時(shí)的效果變化

以下以TNO對(duì)于進(jìn)度條的使用為例

為什么又是TNO？

因?yàn)樗鼛?lái)的改革不只是“陰間ui”，還有許多令你瞠目結(jié)舌的奇思妙想

SAMPLE 1

用圖標(biāo)代替?zhèn)鹘y(tǒng)條形進(jìn)度條：

游戲內(nèi)效果：

SAMPLE 2

利用進(jìn)度條實(shí)現(xiàn)圖像變更的效果：

素材準(zhǔn)備

注，中間的分界條單獨(dú)做一個(gè)icon

前端設(shè)計(jì)

后端編寫(xiě)

注，此處將分界條的x坐標(biāo)在properties中關(guān)聯(lián)變量，以此模擬分界條的移動(dòng)

游戲測(cè)試

又一個(gè)項(xiàng)目完結(jié)了，相信你的gui制作水平應(yīng)該蒸蒸日上了，那么敬請(qǐng)期待更多花哨的GUI講解吧！