《魔兽世界》游戏UI的做法

鼯鼠

作者：kingmark

游戏界面有很多中制作方法，xml+lua是暴雪《魔兽世界》的选择游戏UI的做法，随着《魔兽世界》被越来越多的人注意，感觉lua一下子流行起来。由于喜欢跟屁个性，所以我决定模仿一个这个东西出来。不过最后还是觉得这个做法不如《魔兽争霸3》的UI设计方案。最近QQ群里的朋友，询问这个东西的做法或者设计思路之类的，于是谈谈自己的一点点心得。

第一步，要有一个差不多的xml解析类，其实vc里面就有一个msxml接口，也不复杂，推荐使用。

第二步，安装lua库，lua是脚本语言，很容易掌握，也许是我运气好，我学习的时候，正好Hack兄弟也在学习，每天跟着Hack在论坛发的<lua学习日记>，大概10天吧，感觉需要用到东西，基本掌握了。

第三步，下载安装<wow>客户端，用mpqworkshop之类的mpq工具，解开interface.mpq包，里面有一堆堆的xml和lua文件，一般都是两两对应的，先大概通览一遍吧，留个印象先。

第五步，我决定从AccountLogin.xml和AccountLogin.lua开始入手，这个是登陆界面。界面元素内容不多，也就是按钮和输入框。
开始可以胡乱猜一下xml文件每个元素差不多大概说不定是什么意思吧。
<Script file="AccountLogin.lua"/>
大概是说这个文件需要和AccountLogin.lua配对使用
<Model name="AccountLogin" setAllPoints="true" file="Interface\Glues\Models\UI_MainMenu\UI_MainMenu.mdx" hidden="false" parent="GlueParent" enableKeyboard="true" fogNear="0" fogFar="1200">
就是你看到的背景3D模型，我想大概的意思就是先渲染这个，然后叠加其它的窗口组件，例如按钮什么的。
enableKeyboard的意思大概是，这个窗口接收键盘输入，例如这个界面的某些按钮支持快捷键盘，这个应该是true。
fogNear="0" fogFar="1200"是说渲染这个模型时候，雾的设置参数。其他地方你还可以看到灯光颜色和位置的设置，这里可能采用的是默认的，所以没有。
Frames = CWnd[主窗口]
Layer = 根据参数设置渲染时候的顺序
Frame = 也是窗口，接下来有其他元素，说明这个窗口的类型
例如FontString=CStatic，EditBox=CEdit，Button=CBitmapButton，这些参数都可能会有这个元素的ID，名称[这个是唯一的，至少在某个Frame内，如果需要这个而且是需要和Lua等同的]，位置，大小，贴图等信息。

第六步，开始编写代码了咯
CWnd是个窗口基类，CStatic，CEdit，CBitmapButton继承它，这些都是废话了。参见MFC大概的概念就好，我是根据自己的对MFC的一知半解，胡乱拼凑了类似的类，好比UiWnd,UiStatic,UiEditBox,UiButton,UiCheckButton,UiListBox等,所有这些都是带bitmap属性的。
我觉得最复杂的部分是内里面以下三个函数
Create()
{
从xml中读取该元素控件的信息，设置读取贴图，大小位置，组织初始化顶点数据.
注意注册这个类到lua中去
}


FrameMove()
{
有些元素控件是动画
}


Draw()
{
渲染控件的那些顶点
}


lua和这些类的结合处理
long XmlUiWnd::MsgProc(HWND hWnd , UINT msg, WPARAM wParam, LPARAM lParam)
{
switch(msg)
{
case WM_MOUSEMOVE:
case WM_LBUTTONDOWN:
case WM_LBUTTONUP:
case WM_RBUTTONDOWN:
case WM_RBUTTONUP:
//检查是否需要将该信息交给lua处理，如果要，就塞给lua处理
//假设这是个按钮，并且读取配置文件的时候有<Scripts>且<OnEnterPressed>为"AccountLogin_Login()"
//至于AccountLogin_Login()做什么，这里就不用管了。也许按钮按下后lua就是播放一个按钮音效
//如果没有一般都不处理。否则就不用lua了呵呵。
break;
case WM_KEYDOWN:
case WM_CHAR:
// 如果是输入框，接收输入的内容
// Tab键切换控件焦点的话，也丢给lua处理好了
// 注意只有主窗口接收快捷键消息，但是如果该界面中有输入框并且处于焦点状态，那就需要自己处理一下了。
break;
}
}

写到这里，回头看看，Faint.跟没有说一样，自己都不知道说什么。
其实ui在游戏中还是非常重要的，以前我以为还是很容易的东东，第一次写这个东东后，发现还是很复杂的，而且很多也不知道，早知道先看看写hoho的那个游戏ui，应该会有更多概念，写起来也会更加好些。顺便说一下hoho好像是和python结合的，python也是一个不可去了解一下得脚本语言。

在网吧里面玩wow，一定很有意思。每台电脑都有自己不同的界面操作。小小的恶作剧，也许无论按那个按钮都相应logout指令。哈哈哈。稍微大点的恶作剧是什么呢？我说不上来了。