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文件，你可以定义自己的字体，颜色等。

到此为止了，希望它有所帮助！


本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/mitnickzhou/archive/2007/12/26/1968387.aspx