3rd
7
XArt制作图形界面教程
Posted by 可乐 under 游戏人生
Part1.XArt插件介绍：
XArt插件是一款ACE2类型的界面制作插件，功能强大，占用内存情况不明(- -!自己用的2G的内存条，所以内存占用什么的从来不考虑，有心人可以测试一下)需要的可以使用WowAceUpdater上直接下载安装。
下载下来的XArt文件包内包含以下文件：
图片附件: [pic1] pic1.jpg (2007-7-2 05:15, 37.71 K)
http://www.baidu.com
.tga文件可以用Photoshop软件来制作编辑。此软件功能强大，下载站点众多(最新的Photoshop CS3简体中文版将于7月10如正式发布！！激动啊！！)唯一的缺点是上手比较难。这个我就没办法教你了，我只能尽可能的把素材制作部分介绍给大家。
废话不多少，直接进入主题.tga文件制作的素材最重要的2个注意事项就是：
1、素材用的.tga图片的长和宽的象素数值必须是2的N次方，比如2，4，8…128，256，512…以此类推，如果不是的话，游戏的界面上就不会显示出来。切记！我最初开始做界面就是被这个问题困扰了半天(baidu真强大！！)至于这是这个插件的要求呢还是.tga本身的特点呢我还没有深究，貌似是后者。反正你知道就可以了。图片长宽的象素值必须是2的N次方！！
2、这部分内容比较难懂一些，我尽量用最通俗地语言讲清楚，希望大家耐心看下去。
以Xart官方素材包中的royalbar2-1.tga文件为例，如图2所示：
图片附件: [pic2] pic2.jpg (2007-7-2 05:19, 26.24 K)
图片附件: [pic3] pic3.jpg (2007-7-2 05:21, 41.5 K)
图片附件: [pic4] pic4.jpg (2007-7-2 05:23, 45.01 K)
图片附件: [pic5] pic5.jpg (2007-7-2 05:24, 47.37 K)
moonsorrow@gmx.de
## X-Website: http://www.for-the-horde.de
## SavedVariables: XArtDB
embeds.xml
XArt.lua
最后面那个XArt.lua就是告诉它进入游戏后需要调用XArt.lua文件。然而，官方的版本中的界面是只有下面部分是美化的，而上面部分没有。如果你需要在画面顶端也进行美化一下，那你只需新建一个TopArt.lua文件(文件内容下面介绍)，然后再XArt.toc文件的最下面添加一行TopArt.lua即可。如下：
## Interface: 20100
## Author: Moonsorrow
## Title: XArt |cff7fff7f -Ace2-|r
## Notes: Provides a background texture at the bottom
## Version: 1.12.1
## DefaultState: Enabled
## X-Build: $Revision: 41195 $
## X-ReleaseDate: “$Date: 2007-06-22 04:29:18 +0200 (Fri, 22 Jun 2007) $”
## X-Category: Miscellaneous
## X-eMail: moonsorrow@gmx.de
## X-Website: http://www.for-the-horde.de
## SavedVariables: XArtDB
embeds.xml
XArt.lua
TopArt.lua
这样，进入游戏后就能调用出你美化过的上半部分了。
接下来就是关键的XArt.lua文件的内容了，在这里首先感谢netcookies同学，他写的教程详细而又易懂，省了我不少劲。
XArt.lua文件内容如下：
–[[
Full credits of the textures go to nbistudio from ui.worldofwar.net!
Description: Adds a texture at the bottom of the UI and moves the
Minimap and right ActionBars.
]]
XArt = AceLibrary(”AceAddon-2.0″):new(”AceEvent-2.0″, “AceDB-2.0″, “AceConsole-2.0″)
function XArt:OnInitialize()
self:RegisterDB(”XArtDB”)
self:RegisterChatCommand({”/xart”})
如果文件名为XArt.lua这里就是/xart，如果是TopArt.lua就是/TopArt
end
function XArt:OnEnable()
self:CreateArtFrame()
self:AlignTexture()
self:MoveMinimap()
开启自定义小地图位置功能
self:MoveActionbars()
开启自定义动作条位置功能，以上两项建议在self:前面加一个“–”关闭此功能
end
function XArt:OnDisable()
self.frame:Hide()
self.frame = nil
end
function XArt:CreateArtFrame()
self.frame = CreateFrame(”Frame”, “XArtFrame”, UIParent)
创建一个FRAME
self.frame:SetFrameStrata(”BACKGROUND”)
设置FRAME的层次,默认在最下层
self.frame:EnableMouse(false)
允许鼠标反应，不建议开启
self.frame:SetMovable(false)
允许移动，不建议开启
self.frame:SetWidth(1680)
设置这块FRAME的宽，只要等等能放得下你的素材就行，注意设置成2的N次方
self.frame:SetHeight(512)
设置高
self.frame:ClearAllPoints()
self.frame:SetPoint(”BOTTOMLEFT”, UIParent, “BOTTOMLEFT”, 0, 0)
for i=1,4 do
这里的4为你总共要放几块素材在这个FRAME里
self["art"..i] = self.frame:CreateTexture(”$parentArt”..i,”BACKGROUND”)
self["art"..i]:SetWidth(512) 每块素材的宽
self["art"..i]:SetHeight(512) 每块素材的高
self["art"..i]:SetTexture(”Interface\\Addons\\XArt\\Textures\\Bg”..i)
素材名字,我的素材是BG1到BG4所有前面写BG，i为变量
self["art"..i]:ClearAllPoints()
if i == 1 then
self["art"..i]:SetPoint(”BOTTOMLEFT”, self.frame, “BOTTOMLEFT”, 0, 0)
else
self["art"..i]:SetPoint(”BOTTOMLEFT”, self["art"..i-1], “BOTTOMRIGHT”, 0, 0)
end
self["art"..i]:Show()
end
self.frame:Show()
end
这下面是素材的缩放大小
function XArt:AlignTexture()
self.frame:SetScale(UIParent:GetWidth()/1680)
这的1680为我的四块素材可见部分加起来的宽。总共是四块，前三块都是512 最后一块只用了靠左边的144宽的空间,所以我需要显示的总大小为512+512+512+144=1680
end
主体部分到此结束，如果你没有关闭自定义小地图位置和自定义动作条位置的功能那就需要下面的话
function XArt:MoveMinimap()
local mmc = getglobal(”MinimapCluster”)
mmc:ClearAllPoints()
mmc:SetPoint(”BOTTOMLEFT”, UIParent, “BOTTOMLEFT”,XXX,XXX)
其中XXX，XXX为横纵坐标，可自行修改到合适位置
end
function XArt:MoveActionbars()
local mbr = getglobal(”MultiBarRight”)
mbr:ClearAllPoints()
mbr:SetPoint(”TOPRIGHT”, UIParent, “TOPRIGHT”, XXX,XXX)
其中XXX，XXX为横纵坐标，可自行修改到合适位置
End
XArt.lua部分介绍完毕，如果需要制作TopArt.lua，只需要复制以上内容，并改动相应部分的参数。其中
if i == 1 then
self["art"..i]:SetPoint(”BOTTOMLEFT”, self.frame, “BOTTOMLEFT”, 0, 0)
else
self["art"..i]:SetPoint(”BOTTOMLEFT”, self["art"..i-1], “BOTTOMRIGHT”, 0, 0)
end
改为
if i == 1 then
self["art"..i]:SetPoint(”TOPLEFT”, self.frame, ” TOPLEFT “, 0, 0)
else
self["art"..i]:SetPoint(”TOPLEFT”, self["art"..i-1], “TOPRIGHT”, 0, 0)
end
Part3结束，终于…
Part4：总结语：
好了，基本就这么多了，终于结束了！没想到写个教程居然这么累！希望我整晚的努力能给界面制作爱好者们带来一点帮助。说实话，制作界面并不是什么技术含量很高的活儿，看完这篇教程自己试一下，掌握了原理真的很简单，关键还是创意！
以下是我制作的界面，素材包已经放出了，欢迎大家拍砖
【7月1日】华丽的奔向TBC吧!Spark自制和谐界面【Xart素材包放出】
