UI制作，非常详细，跟着学受益非浅！

UI制作，非常详细，跟着学受益非浅！
想最快的了解怎么写UI。不是接着往下面看，而是自己去找别人写好的UI。抱一本鸟语词典。自己一句一句的分析
因为。我就是这么学着写的。。。

下面是我总结的心得。。
  [OPENDOOR]在小地图附近显示传送门技能   用这个帖子的UI做为例子
个人写一个UI用到的工具是notepad++，附件有下载

准确的来讲。这里所说的不是UI。而是AddOns。
一个AddOns一般包括4个文件：
localization.LUA
***.TOC
***.LUA
***.XML

***.XML
就是核心文件
***.LUA
是用来定义***.XML文件中我要调用的函数
***.TOC
是告诉WOW这个Addons的版本信息
localization.LUA        
是定义这个Addons所有的变量，
为什么变量的赋值要单独写一个文件呢？这是为了方便Addon在不同国家使用。一般汉化版就是汉化这个文件

很多朋友想自己汉化UI。
这里就大概说一下个人的方法
首先用notepad++打开localization.LUA 你会发现很多灰体的字符串。那些就是给等号之前的变量赋的值
你只要把这些字符串翻译成中文就基本上可以了。~

注意一点：
在UI中出现的任何汉字一定要用UTF-8格式来输入  ANSI格式来保存，这样WOW才会正确识别





实列分析：

首先我们来动手写一个很简单的UI。
在小地图的附近放一个小按扭

那么首先用notepad++创建一个文件mybutton.TOC
写入
## Interface: 1500
## Title: MYBUTTON
## Notes: MY COOL BUTTON
mybutton.xml

第一行是告诉WOW。我们这个插件对应的WOW游戏的版本号。目前是1.5所以就是1500
第二行是我们这个插件的名字了
第三行是我们这个插件简单介绍。
第四行是告诉WOW。我们这个插件的核心文件是什么

现在我们来写核心文件
一样的用notepad++创建一个文件mybutton.XML

首先给这个按扭起个名字叫mybutton_on，那么在文件里面写下：


CODE:[Copy to clipboard]<UI>
    <Button name="mybutton_on" >        
    </Button>
</UI>
接下来。我们想让这个按扭是依附与小地图存在的。也就是说小地图在哪儿  他就在哪儿，那么补充进去：


CODE:[Copy to clipboard]<UI>
    <Button name="mybutton_on" parent="Minimap">
    </Button>
</UI>
现在我们定义一下这个按扭的大小：


CODE:[Copy to clipboard]<UI>
    <Button name="mybutton_on" parent="Minimap">
        <Size>
            <AbsDimension x="30" y="30" />
        </Size>        
    </Button>
</UI>
这个按扭长什么样子？OK。我们找一个COOL的图 起个名字叫MB.TGA。
然后把图放在Interface\AddOns\mybutton\ 目录下面


CODE:[Copy to clipboard]<UI>
    <Button name="mybutton_on" parent="Minimap">
        <Size>
            <AbsDimension x="30" y="30" />
        </Size>
        <NormalTexture file="Interface\AddOns\mybutton\mb"/>        
    </Button>
</UI>
注意：WOW只支持tga格式的图片文件


现在定义一下这个按扭的位置


CODE:[Copy to clipboard]<UI>
    <Button name="mybutton_on" parent="Minimap">
        <Size>
            <AbsDimension x="30" y="30" />
        </Size>
        <Anchors>
            <Anchor point="CENTER" relativeTo="Minimap" relativePoint="CENTER">
                <Offset>
                    <AbsDimension x="-55" y="-55"/>
                </Offset>
            </Anchor>
        </Anchor>
        <NormalTexture file="Interface\AddOns\mybutton\mb"/>
    </Button>
</UI>
现在就可以发现按扭出现在小地图的下面靠右点的地方了
解释一下
<Anchor point="CENTER" relativeTo="Minimap" relativePoint="CENTER">
以小地图的中心为原点
<AbsDimension x="-55" y="-55"/>  
x=55 y=-55为坐标放置按扭

我们可以换一下  比方说我想把按扭放在人物的头像上面靠左边点的地方  那么就是这样（注意区别在哪儿）
<UI>
    <Button name="mybutton_on" parent="PlayerFrame">
        <Size>
            <AbsDimension x="30" y="30" />
        </Size>
        <Anchors>
            <Anchor point="CENTER" relativeTo="PlayerFrame" relativePoint="LEFT">
                <Offset>
                    <AbsDimension x="47" y="35"/>
                </Offset>
            </Anchor>
        </Anchor>
        <NormalTexture file="Interface\AddOns\mybutton\mb"/>
    </Button>
</UI>

好了 现在想让他在进游戏的时候就显示出来


CODE:[Copy to clipboard]<UI>
    <Button name="mybutton_on" parent="Minimap">
        <Size>
            <AbsDimension x="30" y="30" />
        </Size>
        <Anchors>
            <Anchor point="CENTER" relativeTo="Minimap" relativePoint="CENTER">
                <Offset>
                    <AbsDimension x="-55" y="-55"/>
                </Offset>
            </Anchor>
        </Anchor>
        <NormalTexture file="Interface\AddOns\mybutton\mb"/>
        <Scripts>
            <OnLoad>
                this:Show();
            </OnLoad>
        </Scripts>
    </Button>
</UI>
OK。到这里就基本完工了。现在我们应该有3个文件
mybutton.TOC
mybutton.XML
mb.TGA
现在在WOW游戏目录下建一个  Interface\AddOns\mybutton\   目录。
把我们的3个文件全丢进去。
进入游戏。你就会很惊喜的发现，小地图边上有了一个我们之前创建的按扭了。。~


QUOTE:
OK。我们来回顾一下
XML文件里面基本是这样构成的
首先用<UI></UI>定义整段代码
然后<Button></Button>定义代码要表达的东西。。当然也可以是其他的 比如<Frame></Frame>
这里面用<Size></Size>定义BUTTON的尺寸，<Anchors></Anchors>定义BUTTON的位置
对于BUTTON。可以用<NormalTexture file='******"/>来定义样子
最后用<Scripts> </Scripts>来定义事件。在上面的例子里面 我们只用了<OnLoad></OnLoad>这一个事件。
如果想让我们的BUTTON发挥更大的作用。那么在下面 我们将扩展事件部分的讲解。。


进阶（<Scripts>部分）：

现在就让我们的MYBUTTON变的更完美一点

之前。我们点击按扭是不会有任何反应的。现在我们希望像WINDOWS一样。点击之后，他可以变成按下去的样子。
我们用这样的方法来实现这个目的。
定义2个按扭mybutton_off和mybutton_on。
mybutton_off就是mybutton_on按下去的样子
并且把这2个按扭放在同一个位置。
点击mybutton_off的时候。隐藏mybutton_off。显示mybutton_on
点击mybutton_on的时候，则反之。


OK。
首先我们要定义一个按下去的样子的按扭mybutton_off，应该会写了把？
仿造之前的例子。我们可以写出：
<Button name="mybutton_off" parent="Minimap">
        <Size>
            <AbsDimension x="30" y="30" />
        </Size>
        <Anchors>
            <Anchor point="CENTER" relativeTo="Minimap" relativePoint="CENTER">
                <Offset>
                    <AbsDimension x="-55" y="-55"/>
                </Offset>
            </Anchor>
        </Anchor>
        <NormalTexture file="Interface\AddOns\mybutton\mboff"/>
        <Scripts>
            <OnLoad>
                this:hide();
            </OnLoad>
        </Scripts>
</Button>
红色的部分就是我们改动的地方
在这里 我们把按下去的样子的按扭起名字叫mybutton_off，然后把之前的mb.tga图片去个色（这样就比较像是按下去的样子）改名为mboff。做为他的样子，并且在进入游戏的时候他是隐藏的。。

OK我们在mybutton_on和mybutton_off的<Scripts>部分分别添加

<Scripts>
   <OnClick>
      MYBUTTON_DOWN()
   </OnClick>
</Scripts>

和

<Scripts>
   <OnClick>
      MYBUTTON_UP()
   </OnClick>
</Scripts>


<OnClick>就是告诉WOW。点击这个按扭后，执行函数MYBUTTON_DOWN()（或者是MYBUTTON_UP()）

MYBUTTON_DOWN()和MYBUTTON_UP()是我们自己定义的函数
在哪儿定义？回头去看看1楼。知道了把？
OK 我们应该建立一个mybutton.lua文件来定义我们自己的函数
在文件中写下


CODE:[Copy to clipboard]function mybutton_down()      
  mybutton_on:hide
  mybutton_off:show
end

function mybutton_up()
  mybutton_on:show
  mybutton_off:hide
end
解释一下function  就是LUA语言定义函数的意思，
想更多了解LUA语言的语法，去买本LUA语言的书把。这里不做讨论，其实和C++ VB之类差不太多的
mybutton_on:show和mybutton_off:hide就不用多解释了把？
end 么。。。。。如果不晓得什么意思。。就不用再看了。。。

好了 我们现在要告诉WOW。我们用mybutton.lua文件定义了2个自己的函数
那么在mybutton.xml中加入这一句：
<Script file="mybutton.lua" />
现在整个XML文件的代码也就有了


CODE:[Copy to clipboard]<UI>
    <Script file="mybutton.lua" />
    <Button name="mybutton_on" parent="Minimap">
        <Size>
            <AbsDimension x="30" y="30" />
        </Size>
        <Anchors>
            <Anchor point="CENTER" relativeTo="Minimap" relativePoint="CENTER">
                <Offset>
                    <AbsDimension x="-55" y="-55"/>
                </Offset>
            </Anchor>
        </Anchor>
        <NormalTexture file="Interface\AddOns\mybutton\mb"/>
        <Scripts>
            <OnLoad>
                this:Show();
            </OnLoad>
            <OnClick>
                MYBUTTON_DOWN()
            </OnClick>
        </Scripts>
    </Button>

    <Button name="mybutton_off" parent="Minimap">
        <Size>
            <AbsDimension x="30" y="30" />
        </Size>
        <Anchors>
            <Anchor point="CENTER" relativeTo="Minimap" relativePoint="CENTER">
                <Offset>
                    <AbsDimension x="-55" y="-55"/>
                </Offset>
            </Anchor>
        </Anchor>
        <NormalTexture file="Interface\AddOns\mybutton\mboff"/>
        <Scripts>
            <OnLoad>
                this:Hide();
            </OnLoad>
            <OnClick>
                MYBUTTON_UP()
            </OnClick>
        </Scripts>
    </Button>
</UI>
到这里。我们的目标也就达到了。。关于函数的定义应该有深刻的了解了把？
同时你是不是对<Scripts>部分有了强大的兴趣了。。嗯。还不只这样呢。。还有更多的脚本。。~

我们可以打开OPENDOOR.XML
发现第一个按扭Od_MainToggleOn事件部分是这么写的：


CODE:[Copy to clipboard]<Scripts>
        <OnLoad>
                this:Show();
        </OnLoad>
        <OnClick>
                Od_MainOn();
        </OnClick>
        <OnEnter>
                Od_Tooltip("显示传送门","点击显示");
        </OnEnter>
        <OnLeave>
                GameTooltip:Hide();
        </OnLeave>
</Scripts>
翻翻字典就可以大概知道<OnEnter>是进入按扭的区域  <OnLeave>是离开按扭的区域
这2个事件在这里是用来显示提示框的。就是鼠标移动上去显示提示框。鼠标离开则隐藏

Od_Tooltip("显示传送门","点击显示")则是我们自己定义的一个用来显示提示框的函数
打开OPENDOOR.lua自己看看把


进阶2~（WOW其实就是一个最大的UI）：

首先。我们进入WOW的游戏目录。找到DATA目录。会发现这里面有后缀名为MPQ的文件

其中有一个文件叫 interface.MPQ
是不是感到很眼熟呢？
嗯。你的想法是对的。。他就是WOW自己的UI！

OK。现在我们并不能看到里面的内容是什么。。
但是。附件的WINMPQ就是专门对付他的。我们用WINMPQ打开他。
哇。是不是发现了N多的后缀名为LUA  XML的文件。
对的。他们就是WOW自定义的UI。我们自己写的UI完全可以调用他们定义过的函数、框体、按扭等等等等
甚至与。你要是对自己的技术有够信心。可以直接修改这部分的代码~
（有个小小的问题WINMPQ似乎在XP下不能正常工作。。不过WIN2000是非常正常的）

同时我们会看到 里面有很多后缀名为BLP的文件。这些其实就是WOW的图片。~
我们可以用附件的WOW_EDIT打开他们。

现在知道很多UI的框体、按扭的样子是在哪儿找到的了把？
比方还是我们的那个OPENDOOR  现在我们想把他的按扭不用我们自己画的图。而是用WOW自带的。
比方说是传送幽暗的技能。
那么我们用WOW_EDIT可以找到这个文件：interface\icons\spell_arcane_teleportundercity.blp
发现他就是传送幽暗技能的图标

那么我们再打开OPENDOOR.XML。找到到定义传送幽暗技能的按扭的部分
把这句<NormalTexture file="Interface\AddOns\Opendoor\img\ua"/>
修改为：
<NormalTexture file="interface\icons\spell_arcane_teleportundercity"/>

OK。。再进入游戏看看。HOHO。是不是很完美呢？

补遗（陆续补充中）：
一，在UI中出现的任何汉字一定要用UTF-8格式来输入  ANSI格式来保存，这样WOW才会正确识别


结语

就写到这里把。。我想看到这里，应该对写一个UI不再陌生了把？
接下来 可以参考  [OPENDOOR]在小地图附近显示传送门技能 这个帖子提供的例子 用notepad++打开所有的文件 尝试着动手分析一下。很快的。你也可以写出符合自己个性的UI给我们分享。。~~

有问题 提出来。。我们一起研究。~

群8732447

哇 天啦，好复杂哟， 估计学不会了

:sleepy:看不懂~