好久不見呀，鴿了好久終于又把這個系列撿起來了

年中P社更新了官中，所以之前的教程案例本地化部分可能失效了，需要自行修改！

這一P之后將會以官中版本來書寫本地化文件

餅圖一型原址鏈接：https://github.com/Yard1/HoI4-Scripted-GUI-Pie-Chart

這一P將主要介紹餅圖繪制，以及TNO中獨特的環(huán)形進度條

在P5中詳細(xì)介紹了真·進度條的原理——通過著色器，將一張圖實時填充成另一張

但是它只能提供橫向（從左至右）的圖像變化

通過引入更多其它的著色器可以實現(xiàn)更加復(fù)雜多變的圖像變化

一個著名的應(yīng)用就是環(huán)形進度條

素材準(zhǔn)備

和上次一樣，一張填充滿一張未填充，通過環(huán)形著色器實現(xiàn)順時針一周的方式，填充進度條的顏色

素材注冊也是和先前的進度條雷同，這里就不多贅述

前端設(shè)計

簡單的進度條+顯示數(shù)值的文本框

后端編寫

僅僅讓它可以顯示，并且通過on action增加一個綁定的變量

之后就可以進入游戲測試效果了

接下來是餅圖

p社的黨派支持度界面使用了游戲原生的餅圖，然鵝很遺憾并不開放，你用不了

我們只能另辟蹊徑通過其他方式實現(xiàn)餅圖的表現(xiàn)

這里先介紹第一種思路，由Yard1分享

通過旋轉(zhuǎn)（rotation）將100份icon拼接成一個圓形，再通過改變幀數(shù)，分配每份icon的顏色，實現(xiàn)餅圖效果

下面將以工廠（民工，軍工，船塢）占比，詳細(xì)介紹第一類型餅圖：

素材準(zhǔn)備

預(yù)計將分三種不同顏色因此在一個icon中準(zhǔn)備三幀

前端設(shè)計

需要將100份icon單獨寫出，放進一個子窗口中，并且每一份都旋轉(zhuǎn)一個特定的角度，再整體縮放這一個子窗口以調(diào)整大小和位置

首先寫好主窗口，放進決議面板中的

再在子窗口中寫好100份icon并且讓它們旋轉(zhuǎn)組成一個圓形

在子窗口下寫scale可以整體縮放整個餅圖

后端編寫

首先為刷新按鈕寫一個效果，并且為100份icon關(guān)聯(lián)properties以分配不同顏色，這里和議會席位一樣，使用數(shù)組分配顏色

100份icon的顏色需要有順序地填充，填充方式和P7（二）中議會的填充方式一樣，我們將100份圓編號1~100

下一個顏色的填充序號，是上一個顏色末位+本顏色數(shù)量

基于此，通過一系列變量操作將幀數(shù)組分配為當(dāng)前tag的工廠分布

從上至下依次為：獲取三種工廠總數(shù)，將每種工廠數(shù)量比上總數(shù)得到所占百分比，乘以100并且取整得到百分?jǐn)?shù)，通過resize_array得到連續(xù)的幀數(shù)組

假設(shè)現(xiàn)在我們的工廠總數(shù)恰好100，65軍工25民工10船塢，那么填充這個餅圖需要1~65填綠色，第一次resize_array數(shù)量是軍工數(shù)量，0~64分配第一幀（數(shù)組起始位是array^0）

66~90填橙色，第二次resize_array數(shù)量是軍工數(shù)量+民工數(shù)量=90，由于前65已填充了1（第一幀，綠色），后續(xù)66~89填充2（第二幀，橙色）

91~100填藍色，第三次resize_array，保證數(shù)組總數(shù)為100

完成后再加一個本地化顯示工廠實際數(shù)量

注：

￡+gfx名 為texticon引用文本圖標(biāo)，后續(xù)會詳細(xì)講解

最后進入游戲測試

好了本期內(nèi)容到此結(jié)束

除了Yard1介紹的方法外，另一比較簡潔的方法就是通過環(huán)形進度條

前面介紹過進度條本質(zhì)是通過著色器實時完成兩張圖片的變化，將一張透明的圖片設(shè)置為未填充圖片，另一張完整的圓為填充滿狀態(tài)，就可以實現(xiàn)一個圓順時針從無到有的變形

以下是詳細(xì)介紹

素材準(zhǔn)備

準(zhǔn)備一堆不同顏色的圓和一張透明的圖層

以下分別為20，60值，圓形為填充圖形的環(huán)形進度條

聰明的你可能已經(jīng)想到了，既然環(huán)形進度條可以旋轉(zhuǎn)涂色，那么可以用進度條實時繪制出不同角度的扇形，最后用不同顏色的多個進度條疊在一起，就是一個完整的餅圖了

接下來將寫一個用于顯示當(dāng)前資源占比的餅圖

前端設(shè)計

一樣的方式，將所有餅圖組成部分放入一個子窗口中，主窗口照之前的方式

預(yù)計使用6種顏色表示6種資源，因此需要寫6個引用進度條圖像的icon

進度條扇形涂色采用類似的方式，假設(shè)我們資源總和是100，恰好30的鋁，12的橡膠，我們可以得到這兩個扇形：

直接將這兩部分堆疊起來會導(dǎo)致奇怪的事情發(fā)生：綠色扇形（橡膠）遮擋了一部分白色扇形（鋁），但是餅圖需要用每個部分的面積來表示所占比例

為了實現(xiàn)這一目的，我們需要先讓綠色扇形面積等于自身面積+白色扇形面積，再將白色扇形堆疊到綠色扇形上方，這樣綠色扇形多出部分的面積，恰好就是實際所代表的在整個餅圖中的部分

利用gui圖像堆疊，將綠色扇形置于白色扇形下方（先寫綠色再寫白色），就可以連續(xù)地表示出兩部分在圓形中占比，如下

順著這個思路，我們將6個資源按照一定順序?qū)懞?/p>

注意此處是圖像堆疊順序，最下方的顯示在最頂部

后端編寫

依舊是先將gui和變量關(guān)聯(lián)

此處直接將最后（最底部）的進度條定為100，這樣保障顯示的是一個完整的圓形

然后設(shè)計變量的計算，首先求出當(dāng)前資源總數(shù)

再單獨將每個資源數(shù)量，比上總數(shù)乘以100得到對應(yīng)比例

之后依照堆疊順序，每一層圖像對應(yīng)的變量=當(dāng)前資源所占比例+上一層對應(yīng)資源占的比例

最后加入一個文本框顯示各個資源實際數(shù)值

進入游戲測試

可能你覺得你的餅圖還不夠炫酷，一點都不像原版那樣看著飽滿，那你可以嘗試畫一個好看的遮罩，然后寫個iconType放上去

或者你可以直接用原版的遮罩

看起來好多了

以上就是這一次全部內(nèi)容了，更多和gui相關(guān)的東西我會在這個專欄慢慢更新（只要我有時間）

另外如果有對任何你看見的有趣的gui但是不清楚原理也歡迎留言，我可能會挑幾個進行拆分然后講解（前提是我會）

使用的素材將會打包發(fā)在評論區(qū)