UI製作入門

UI製作入門

近來有許多玩家蜂擁而入了WOW團體,他們中有許多,就像我一樣,有着一些編程經驗並且希望試着創建UI插件。由於有着衆多編程語言和接口,不少人可能會走些彎路,我希望以下內容能夠減少以上這些情況(至少減少爲尋找那些函數的資料而頭痛的煩惱):
(譯註:其實並不難,其內容只涉及到一些腳本語言和XML文檔的知識,就算你沒有寫過程序,也能勝任。)

1.準備開始

A.可以選用的工具

第一步必須明白將要做些什麼,但是爲了能夠正確的開始,我們必須選擇一些編寫腳本的工具。我想首先重要的一點是編輯器(用專業術語來說就是IDE-integrated development evironment), 這可能有許多種選擇。由於我們編寫腳本的語言是LUA(譯註:一種腳本語言,參見:http://www.lua.org),我們需要的編輯器應當是針對這種語言的,以下十供選擇的列表:

http://blua.sourceforge.net/ (譯註:sourceforge.net是一個著名的開源項目網站)
B:Lua – 這是首當其充的腳本編輯工具之一,它提供了強大的IDE所提供的功能,足夠用來編輯WOW的UI。而且它是用Java語言編寫的,不論在何種操作系統中尼都能運行它。

http://www.ideais.com.br/luaeclipse/ (譯註:一個運用於Eclipse IDE下的插件,建議使用過Java語言的專業人士使用。)
Lua Eclipse – 這是另外一個Java環境的IDE,我沒有用過這個IDE(譯註:本文中的我不代表譯者),它基於Eclipse 平臺(譯註:請參見http://www.eclipse.org),它是一個有着多種功能的插件,我確信這是一個很好的工具。

http://editplus.com/ (譯註:editPlus是類似於UltraEdit的文本編輯器)
EditPlus – 這是替代記事本程序的有效工具,這也是我編輯LUA的工具。它有着多種你所需的功能,而且它有着LUA語言的Schema(譯註:Schema可以理解爲一種模板,它規定者文件如何定義等內容)。但是它有着30天的評估期,你得註冊擁有它。

這只是3種建議,我認爲一旦掌握了B:Lua後,你就能夠更好地使用其它工具了。

B.目標:WOW文件

你擁有了編輯器後,一切只是剛剛開始,我們需要一些工具來編輯WOW。首選的工具是WinMPQ,下載地址:http://shadowflare.gameproc.com/dwnload.html#WinMPQ
你需要運行庫(VB4運行庫)來運行它(譯註:一般windows都安裝了),有了它你就可以打開遊戲目錄中的MPQ文件或者MoPaO 文件。MPQ是暴雪公司存儲遊戲資料的文件格式,如果你有興趣研究的話,請參閱:http://www.campaigncreations.org/starcraft/inside_mopaq/index.htm

有了WinMPQ,你就可以解開文件內容,並且打包到遊戲安裝目錄。

Interface.mpq文件裏面有基本的界面數據,並且有着大量柯作爲例子的文件。Patch.mpq文件裏有着所有的補丁內容,在遊戲運行時將覆蓋所有基礎的文件。打開WinMpq,我們將所有基礎界面文件作爲例子來使用。下面還將示範如何保證數據與最新的補丁保持一致。使用“Open”選項打開interface.mpq文件(該文件在遊戲安裝目錄下),找到一個叫FrameXML的文件夾(還有一個叫glueXML的文件夾,不去管它),選中目錄下所有文件並且解壓到遊戲安裝以外的目錄下。同樣,打開Patch.mpq,其中不僅僅有界面文件,還有許多更新文件。打開Interface/FrameXML目錄,將其中的內容解壓到剛纔interface.mpq文件的解壓目錄中,並覆蓋已有的文件。這樣我們就有了一份最新的遊戲界面FrameXML目錄數據作爲參考。(你也可以用WinMPQ 解壓其他的文件,例如音樂文件等)。

2.有了目標之後

一切準備就緒,讓我們開始製作第一個插件吧!

首先你的知道具體文件的安排,哪個文件是做什麼的。讓我們看以下魔獸世界的安裝吧。其中有許多目錄,我們將要操作的目錄是Interface目錄(若不存在請創建)。在該目錄下有3個主要的目錄:
FrameXML: 有所有暴雪提供的界面,你將打交道的文件都在這。
GlueXML: 包含“遊戲之外”的界面,例如登入界面,服務器選擇,角色創建等。你不太需要關心這些文件。
AddOns: 所有遊戲角色的模型。
在AddOns目錄下每個角色都有其所有的目錄並且有一個內容表。

3.開動!

A.初始化

我們要開始創建“Hello world”啦!(譯註:“Hello world”常指第一個程序),創建1個叫hello_world的目錄在AddOns下,即Warcraft/Interface/AddOns/hello_world。在目錄中建立1個叫hello_world.toc的文件,這就是內容表了,它定義了WOW該如何裝載插件內容。例如以下就是文件內容:
## Interface: 4114
## Title: Hello World
## Notes: The obligatory hello world script – WoW-style!
## OptionalDeps:
## Dependencies:
hello_world.xml
作一下解釋,第一行表示新的代碼段的開始。事實上每次暴雪更新補丁後,當前的版本號都會更新。如果你的腳本沒有最新的版本號,那麼這段腳本將“不會”裝載入遊戲。這就是爲什麼版本更新導致插件無法使用的原因。你可以通過打開Interface/FrameXML/FrameXML.toc文件來知道當前的版本號。接下來兩行的Title和Nodes就不必解釋了吧(譯註:分別爲標題和註解,可選)。在下一行,OptionalDeps中你可以列出所有你的插件的名稱(你可以列出其他插件,用空格分隔)。Dependencies也是同樣的,但它不是可選的,我不太確定如果沒有這一行你的插件是否會裝載。最好所有的都寫,不管它是不是可選的,這樣所有人都能更好閱讀你的代碼。
在開始的聲明之後,你將寫入一些XML文件的名稱(次序未定),一行寫一個文件的名稱。你也可以將XML文件寫在子目錄中,例如“core/hello_world.xml”,這樣能使文件夾裏看起來更簡潔。

Interface.mpq文件裏面有基本的界面數據,並且有着大量柯作爲例子的文件。Patch.mpq文件裏有着所有的補丁內容,在遊戲運行時將覆蓋所有基礎的文件。打開WinMpq,我們將所有基礎界面文件作爲例子來使用。下面還將示範如何保證數據與最新的補丁保持一致。使用“Open”選項打開interface.mpq文件(該文件在遊戲安裝目錄下),找到一個叫FrameXML的文件夾(還有一個叫glueXML的文件夾,不去管它),選中目錄下所有文件並且解壓到遊戲安裝以外的目錄下。同樣,打開Patch.mpq,其中不僅僅有界面文件,還有許多更新文件。打開Interface/FrameXML目錄,將其中的內容解壓到剛纔interface.mpq文件的解壓目錄中,並覆蓋已有的文件。這樣我們就有了一份最新的遊戲界面FrameXML目錄數據作爲參考。(你也可以用WinMPQ 解壓其他的文件,例如音樂文件等)。

2.有了目標之後

一切準備就緒,讓我們開始製作第一個插件吧!

首先你的知道具體文件的安排,哪個文件是做什麼的。讓我們看以下魔獸世界的安裝吧。其中有許多目錄,我們將要操作的目錄是Interface目錄(若不存在請創建)。在該目錄下有3個主要的目錄:
FrameXML: 有所有暴雪提供的界面,你將打交道的文件都在這。
GlueXML: 包含“遊戲之外”的界面,例如登入界面,服務器選擇,角色創建等。你不太需要關心這些文件。
AddOns: 所有遊戲角色的模型。
在AddOns目錄下每個角色都有其所有的目錄並且有一個內容表。

3.開動!

A.初始化

我們要開始創建“Hello world”啦!(譯註:“Hello world”常指第一個程序),創建1個叫hello_world的目錄在AddOns下,即Warcraft/Interface/AddOns/hello_world。在目錄中建立1個叫hello_world.toc的文件,這就是內容表了,它定義了WOW該如何裝載插件內容。例如以下就是文件內容:
## Interface: 4114
## Title: Hello World
## Notes: The obligatory hello world script – WoW-style!
## OptionalDeps:
## Dependencies:
hello_world.xml
作一下解釋,第一行表示新的代碼段的開始。事實上每次暴雪更新補丁後,當前的版本號都會更新。如果你的腳本沒有最新的版本號,那麼這段腳本將“不會”裝載入遊戲。這就是爲什麼版本更新導致插件無法使用的原因。你可以通過打開Interface/FrameXML/FrameXML.toc文件來知道當前的版本號。接下來兩行的Title和Nodes就不必解釋了吧(譯註:分別爲標題和註解,可選)。在下一行,OptionalDeps中你可以列出所有你的插件的名稱(你可以列出其他插件,用空格分隔)。Dependencies也是同樣的,但它不是可選的,我不太確定如果沒有這一行你的插件是否會裝載。最好所有的都寫,不管它是不是可選的,這樣所有人都能更好閱讀你的代碼。
在開始的聲明之後,你將寫入一些XML文件的名稱(次序未定),一行寫一個文件的名稱。你也可以將XML文件寫在子目錄中,例如“core/hello_world.xml”,這樣能使文件夾裏看起來更簡潔。

B.加入內容
下面將是最有意思的部分,讓我們從簡單的開始。在目錄中創建hello_world.xml文件(該文件名應寫在了FrameXML.toc中),內容如下:

<Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.blizzard.com/wow/ui/">
<Script file="hello_world.lua"/>

<!-- Frame to handle all core events -->
<Frame name="hello_world_core">
<Scripts>
<OnLoad>
this:RegisterEvent("VARIABLES_LOADED");
</OnLoad>
<OnEvent>
if (event == "VARIABLES_LOADED") then
hello_world_initialize();
end
</OnEvent>
</Scripts>
</Frame>
</Ui>

 



哦。有些複雜了是麼?其他不用管先看<Script file="hello_world.lua"/>這一行,它告訴遊戲 hello_world.lua 是腳本文件,也就是插件運行的腳本所在。每個界面都用<Frame>的標籤(Tag)擴起來。這裏我們使用了一個Frame標籤來簡單地把所有事件腳本包進來,你也可以將所有的界面上的按鈕,窗口等定義在Frame標籤裏面。在<Frame>標籤裏,可以定義其一個叫name的屬性(如:<Frame name="hello_world_core">)
注意裏面的值必須在整個文件裏是唯一的。建議你用你的插件模塊名稱作爲前綴開始,後接下劃線,再接上Frame真正意義的名稱。在上面的例子裏,我們把它叫做core,因而組成了上述名字。
在<Frame>標籤裏有個<Script>標籤,其中是真正腳本的內容。在這裏有許多事件(譯註:即魔獸世界遊戲程序在某階段將做的某個動作),其中 <OnLoad> 和<OnEvent>是最常用的2個。其中<OnLoad>是當你選擇了角色進入遊戲時而角色Laoding畫面開始之前的將響應的事件(換句話說,你的插件在登入畫面時是不會被裝載的)。在我們的代碼中,我們註冊了this給了一個叫“VARIABLES_LOADED”的事件(譯註:看不懂代碼的朋友還是先看看一些腳本語言的介紹書籍),this代表了當前的Frame,即這個名字叫hello_world_core的Frame,this就是指向該Frame的對象/變量(指向該Frame對象的實例),這裏的“:”相當於引用方法的表達符(像其他某些腳本語言中的”.” 號),而RegisterEvent函數的作用是告訴遊戲程序在VARIABLES_LOADED事件發生時(VARIABLES_LOADED是遊戲內定義的事件)通知你定義的Frame。說到這裏又得說說<OnEvent>這個標籤了,在其中有一個默認的變量event,它的值就是當前遊戲裏產生的事件的名稱(就好比上面的VARIABLES_LOADED)。
(譯註: 真的是要了解編程的了哦。 這裏處理事件就類似Win32處理事件的代碼模式,可以用if(event=事件名稱){操作代碼}else if(event=事件名稱2){操作代碼}…..或者 switch case的方式來完成。)
現在,暴雪提供了存儲變量的方法,你可以用RegisterForSave(“variable_name”)的方法來定義一個變量在遊戲過程中。
在我們的例子中,當VARIABLES_LOADED發生後,將調用hello_world_initialize()函數來處理。對啦,這個hello_world_initialize()函數還沒定義呢,下面就介紹如何定義函數。

C. 補完 (譯註:寫代碼的部分,會寫腳本的人一定看得懂,不會寫的需要學習:<)

好了,現在是真正要寫代碼的時候了。創建1個叫作hello_world.lua的文件。內容如下:
function hello_world_initialize()
-- add our very first chat command!
SlashCmdList["HELLOW"] = hello_world_command;
SLASH_HELLOW1 = "/hellow";
SLASH_HELLOW2 = "/hw";
end

function hello_world_command(msg)
-- this function handles our chat command
message(msg);
end

這裏我不想對語法做出解釋,如果不懂請看LUA的文檔,那裏會詳細地介紹。參見:http://www.lua.org/manual/5.0/

注意這裏系統的I/O 庫文件,操作系統的庫文件沒有包含在魔獸世界UI的PATH路徑之中。至於暴雪定義的函數(內置的)和事件,你可以在Cosmos網站上找到,參閱:http://www.cosmosui.org/texts/BlizzardCommands.xml

回到代碼,在我們的函數中,我們定義了1個聊天用的命令。似乎我們的代碼看起來挺怪的,是的,我們是直接修改了SlashCmdList這個表,其作用是當我們輸入宏“/hellow 消息” 或者“/hw 消息”是會調用hello_world_command()函數,(至於遊戲內部如何這種關係做映射不在本文討論範圍內)然後玩家看到打出“消息”的聊天信息的窗口(譯註:事實上是msg()函數創建的窗口)。可以看到“消息”作爲參數傳遞給了hello_world_command()函數。

以上所有做的就是一個簡單的插件,它加入了兩條命令(宏)。如果你想測試它,進入遊戲,輸入/console reloadui(重新加載UI),在登入遊戲後的聊天框中輸入“/hellow Why hello there!”,你會看到遊戲中彈出一個消息框,消息是“Why hello there!”。

4.完成

這就是我們基本的例子,以後我可能抽空給出一些其它的例子。
如果你已經完成了以上這個例子,我真是要爲你鼓掌了呀!(那花了你不少時間來閱讀吧。)
如果你感興趣的話,以下還有不少資料:www.lua.org/manual/5.0/,暴雪定義的函數www.cosmosui.org/texts/BlizzardCommands.xml。另外,試着看看Interface/FrameXML/BasicControls.xml文件,裏面有不少操控語句;還有Font.xml文件,你可以定義自己的字體,顏色等。

到此爲止了,希望它有所幫助!

 

原文:http://www.pcgames.com.cn/netgames/zhuanti/wow/expert/Ui.htm

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章