【乾貨】Unity引擎遊戲MOD開發教程11:製作UI界面


3樓貓 發佈時間:2024-12-16 19:00:34 作者:甄別 Language

【乾貨】Unity引擎遊戲MOD開發教程11:製作UI界面-第0張

本期我們將探討在mod中使用UI界面的方法。有時候,我們可能需要在界面上進行管理或者控制等操作,而之前的課程通常是在後臺完成這些任務。今天我們來討論我們最常用的UI,即即時模式GI。它是通過代碼創建UI,包括按鈕、文本輸入框、窗口等常用元素。

然而,在寫mod時,使用Unity遊戲開發者最常用的UI——IMGUI可能會有些繁瑣。因此,我們最常用的是即時模式GI,它主要通過代碼來創建UI元素。更詳細的信息可以查閱文檔或者搜索一些相關的文章和博客,瞭解如何使用mod I/O。在繼承了mod的類下,有一個生命週期函數,名為IMGUI的生命週期。我來演示一下如何創建一個窗口。

【乾貨】Unity引擎遊戲MOD開發教程11:製作UI界面-第1張

首先,我們需要添加引用,找到MGUI模塊並添加引用。然後,我們可以編寫代碼創建窗口。在創建窗口時,我們需要指定窗口的ID、尺寸和位置,並提供一個窗口函數來處理窗口的操作。窗口函數是用來定義窗口的外觀和行為的。最後,我們還可以添加一些拖拽窗口的功能。這樣,一個基本的窗口就創建完成了。

在這裡,我們將創建一個文本組件,即label。直接在其中填上文字即可,比如說"Hello world"。讓我們來看一下代碼。首先,我們要先進入遊戲進行演示。我先將我的遊戲進行延伸,以免反覆登錄。現在,我們可以看到窗口中出現了一行文本"Hello world"。在這裡,可以看到有一個叫做"ji layout option"的東西,它包含了各種JY的組件,並且有參數可以設置。

【乾貨】Unity引擎遊戲MOD開發教程11:製作UI界面-第2張

一般來說,我們可以用它來控制組件的寬度、高度和適應規則等。比如說,我們可以指定label的寬度為100。label通常用來顯示需要查看的信息。接下來,我們來看第二個組件——button。如果你想要點擊一個按鈕來觸發一個函數,可以使用button。它會返回一個布爾值,因此我們要將其放在if語句中。按鈕的字符串參數表示按鈕的名稱,你也可以設置它的寬度等參數。按鈕被點擊後,將執行按鈕所在的方法體。

【乾貨】Unity引擎遊戲MOD開發教程11:製作UI界面-第3張

我們來輸出一句"點擊了按鈕"。現在,我們可以看到一個按鈕,當我們點擊它時,成功輸出了這句話。值得注意的是,按鈕的寬度會根據窗口進行適應。JYLOL是一個非常方便的佈局工具。此外,我們還有兩個模式可以選擇。一個是GUI的label,另一個是GUILOL的label,即佈局。我們寫了GUILOL之後,它會自動進行佈局。如果你不寫的話,你就需要手動指定寬度、高度和位置等。對於輸入組件,你可以用它來獲取信息,它會返回一個string類型。你也可以創建一個string變量來保存輸入的信息。

【乾貨】Unity引擎遊戲MOD開發教程11:製作UI界面-第3張

總的來說,如果你只是想要輸入一些信息,可以使用輸入組件。不過,要注意的是,它只有一個輸入框,所以一般我們會在前面加上一個label來說明輸入的內容。

遊戲重新啟動一下,現在我們可以看到一個數值輸入框,你可以隨意輸入一些東西。然後再看下一個組件,這是一個文本域,與剛才的單行文本框不同,這個可以輸入多行文本。我個人很少使用這個組件,一般單行文本框就足夠了。接下來是trigger,它是一個開關,返回一個布爾值。我們定義一個觸發器,與輸出組件不同的是,它可以有一個名稱。當然,第一個參數還是我們的ID,但第二個參數可以是一個名字,比如某某的開關。我們來看一下,你可以勾選或取消勾選它。這個和上面的組件一樣,如果你不接受它的返回值,它就會一直保持原來的狀態,因為它返回了值但沒有改變。

【乾貨】Unity引擎遊戲MOD開發教程11:製作UI界面-第3張

接下來是toolbar,你可以選擇幾個選項。這個工具欄就像是一個選項卡,它會返回一個整數,告訴你當前選中了第幾個頁面。我們來演示一下,它需要一個字符串數組作為頁面的名稱。我來寫一個,前面有幾個數字,然後我們定義一個索引來表示選中的頁面。好,現在可以看到它的改變。在這個編程裡,索引都是從零開始的,所以如果選擇了第一個頁面,它返回的數字就是零。然後我們可以根據這個數字來顯示不同的頁面,比如使用switch語句或其他判斷來顯示不同的UI。

【乾貨】Unity引擎遊戲MOD開發教程11:製作UI界面-第3張

這個和工具欄基本上是一樣的東西,但是它可以支持多行,不只是一行。用法也是一樣的,只不過這裡多了一個寬度和高度的參數,我就不演示了,大家可以自己試一下。上面那個基本上是一樣的。

【乾貨】Unity引擎遊戲MOD開發教程11:製作UI界面-第3張

接下來是滑動條,有時候我們需要輸入數字但又不想手動輸入,這時候就會用到滑動條。比如我們定義一個小數,然後通過滑動條來調整它的值。滑動條有水平和垂直兩種類型,水平的用"H"表示,垂直的用"V"表示。我們先演示水平的。

第一個參數是當前值,第二個是最小值,然後我們把這個值輸出一下。滑動條就是一個很簡單的控件,直接滑動就可以改變這個數字。垂直的和水平的用法基本上是一樣的。

【乾貨】Unity引擎遊戲MOD開發教程11:製作UI界面-第3張

滑動條和工具欄有點類似,但不是用來改變數值的,而是一般用來改變頁面佈局的。它也會返回一個浮點數,但一般不太常用,一般都使用滑動條就可以了。

最後要說一下滾動視圖,就是當你有很多個東西要顯示但屏幕不夠長的時候,你可以用滾動視圖來顯示。它有一個二維座標,表示水平和垂直的滾動位置。

【乾貨】Unity引擎遊戲MOD開發教程11:製作UI界面-第3張

首先,我們需要定義一下航空座標。比如說,我們可以設置一個默認的位置。然後,我們從一個地方開始。這裡不需要比例參數。然後,我們把前面的這個內容寫進去。這一段可能不夠長,我們複製幾份。這樣,被我們包括的這部分就自動帶了一個滑動條,可以滑動上下。這種佈局方式非常方便,但要注意的是,這種即時的UI性能效率不如Unity內置的UI。如果要顯示的東西很多,可能會卡頓。一般情況下,我們會做分頁處理,只顯示一部分項目,然後通過按鈕或者翻頁控制頁數。

除了豎向滾動條,還有橫向的。如果寬度不夠了,也是可以滾動的,就像之前提到的一樣。另外,還有橫向佈局和縱向佈局。如果想要橫向排列,可以在一組UI元素外面加一個水平佈局的開始和結束標籤。這樣,被包括的這部分就會橫向排列。JILOL的一個優點就是它的自適應寬高非常方便。

對於樣式,可以通過修改皮膚來改變UI的外觀。比如說,我們可以將UI的皮膚換成box的皮膚。這樣,整體就會呈現出一個box的樣式,把它框住了。這種樣式的創建可能會比較複雜,講解可能會比較長,可能需要單獨作為一個話題來講解。

但其實樣式並不是非常重要,現在創建的UI已經夠用了。另外,我們現在創建了一個窗口,但每次打開遊戲窗口就會出現,我想用之前的快捷鍵來打開,怎麼辦呢?我們可以在這裡創建一個布爾值,稱之為WINDOW_OPEN,默認為false。然後在UI渲染的時候,只有當這個值為true時才進行渲染。在按下快捷鍵時,將這個值進行反選即可。

【乾貨】Unity引擎遊戲MOD開發教程11:製作UI界面-第3張

當然,你也可以通過其他方式來控制這個值,比如在最上面放一個關閉按鈕。我創建了一個橫向佈局,左邊全部使用空白填充,右邊放一個按鈕,名字叫做“叉”,寬度設為22。將這個值改為false,這樣就是一個關閉按鈕。現在可以看到UI沒有出現,按下快捷鍵就會出現,點擊叉又會關閉。基本的UI應用就講完了,這期教程就到這裡。


© 2022 3樓貓 下載APP 站點地圖 廣告合作:asmrly666@gmail.com