※ [本文转录自 Programming 看板 #1BSn_Gso ] 作者: wa007123456 (大笨羊) 看板: Programming 标题: [心得] 浅学UI心得 Part2(革新二版) 时间: Thu Feb 11 05:06:23 2010 这是很久以前的文章 我知道有很多地方写错了 但是希望里面(UI入门) 可以放进Part2的部分 感谢.... ※ [本文转录自 WOW 看板] 作者: wa007123456 (大笨羊) 看板: WOW 标题: [心得] 浅学UI心得 Part2(革新二版) 时间: Thu Feb 11 03:04:18 2010 一、前言 今天我们要介绍的是有关外观的部分，一个UI 其实我认为先是从外观做起，然後再开始写内 部的程式码。而魔兽世界的表单，是用一个叫 做XML的标记语言，然完成外观的动作。 二、XML 甚麽是XML? 如果你有学过Html你可以这样想 XML是自己定义标签的意义，而HTML则是帮你 定义好的语法。 例如: <小纸条> <收件人>李四</收件人> <发件人>张三</发件人> <主题>问候</主题> <具体内容>最近可好？</具体内容> </小纸条> 感觉很像HTML，但是只是标签是自行定义。 下面是书的介绍: XML(Extensible Markup Language)可扩展标示语言 XML写法上十分类似HTML，属於SGML字集，继承SGML 自订标签的优点，并且删除一些SGML复杂的部分，功 能上能够弥补HTML的不足，拥有更多的扩充性。 不过，XML并不是编排文件内容，而是描述资料本身 所以他没有HTML的预设标签，事实上使用者需要自己 定义描述资料的标签，例如:定义聊天讯息的<chatroom> <message> <text>和<user>标签。 三、XML的规则 XML文件的撰写规则，其注意事项如下所示: 1.不可以省略结尾标签，保证所有的标签都是成双成对。 2.标签和属性使用小写英文字母。 3.属性值的值需要使用引号""括起来。 四、做一个魔兽世界的XML 在实做魔兽世界的XML之前，我们必须先行定 义这个XML的版本和内容。 一个魔兽世界的基本XML宣告如下: <Ui xmlns="http://www.blizzard.com/wow/ui" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> </Ui> Ui是自行定义的标签，而xmlns则是属性值 其中ns的意思是名称空间(NameSpace) 也就像是C#或是Java那样使用某个名称空间 我们把http://www.blizzard.com/wow/ui的内容里面 定义的标签拿来使用，然後再用xmlns:xsi宣告这文件 的轮廓使用http://www.w3.org/2001/XMLSchema-instance 的轮廓。 五、魔兽世界自行定义标签元件大全 button - 按钮 checkbutton - 核取方块(就是打勾勾的那个元件) colorselect - 颜色选择 cooldown - 快捷键的CD dressupmodel - 更衣室 editbox - 可以输入文字的方块 fontstring - 文字 frame - 版面 gametooltip - 游戏提示 messageframe - 聊天视窗 minimap - 小地图 model - 模组 playermodel - 玩家模组 scrollframe - 可卷动的版面 scrollingmessageframe - 这我不知道跟上面一个的差别 窘 simplehtml - 在这个标签内可以使用一些简单的HTML标签 slider - 卷动滚轮 statusbar - 状态条 tabardmodel - ??? taxirouteframe - ??? worldframe - 可以显示3D物件的版面 uiparent - ??? include - 你可以在加入某些插件需要的东西(toc档案里面没有的) script - 直译 font - 字型样板(只能在UI标签里面使用) texture - 材质样板 (只能在UI标签里面使用) 五、子标签和属性大全 a.属性 name:设定此标签的名称 autofocus:设定此标签是否自动选取 alphamode:透明混合模式 alpha:透明度 bytes:??? checked:是否被勾取 clampedtoscreen : 是否压缩到萤幕上面 defaultvalue :??? drawlayer :??? enablekeyboard :是否接受键盘输入 enablemouse :是否接受滑鼠输入 file:档案位置 font:字型 framestrata :??? hidden:是否隐藏 historylines :??? id:编号 ignorearrows:忽略滑鼠游标 inherits:继承某些元件，继承的元件的 virtual 必须设为 true insertmode:插入模式 justifyh :文字排版 justifyv :文字排版 letters :设定字元的最高数量 maxlines :设定行数的最高数量 maxvalue :设定最高能接受的数值 minimaparrowmodel :??? minimapplayermodel :??? minvalue :设定最低能接受的数值 monochrome :??? movable :设定是否可移动 multiline :设定是否可换行 nonspacewrap :不自动换行 numeric :设定只能输入数字 orientation :??? outline :??? parent : 你可以设定另外一个父物件，例如让按钮能环绕小地图 protected : 设定是否禁止继承 resizable :设定是否可变换大小 scale :缩放大小(不能为0) setallpoints : ??? text :文字 toplevel :??? valuestep :设定滑轮每一个加多少数值 virtual :如果物件还没做好，可以先将他设为虚值。 b.子标签 anchors : 座点，可以是多个位置，每个座点有四个属性 ============================================================================== 1.Point:位置，座点的位置。可以是下列的值: TOP:顶部 BOTTOM :底部 LEFT :左边 RIGHT :右边 CENTER :中间 TOPLEFT :左上 BOTTOMLEFT :左下 TOPRIGHT :右上 BOTTOMRIGHT :右下 2.RelativePoint :和Point一样，只是使用的是继承元件的位置。 3.RelativeTo :通常元件继承对它的父类别，但是你能指定另一个元件使用 与这个属性，给名字作为值。 4.Offset :偏移量 里面有两个属性 x 和 y 如果x变大 物件会往右移，如果y变大 物件会往下移动。反之则左或上。 ============================================================================= attributes:属性标签 backdrop :??? barcolor :施法条颜色标签 bartexture :施法条材质标签 buttontext :按钮文字标签 checkedtexture :核取方块材质标签 color :颜色标签 colorvaluetexture:颜色材质标签 colorvaluethumbtexture:??? colorwheeltexture:??? colorwheelthumbtexture:??? disabledcheckedtexture:关闭核取方块材质标签 disabledfont:关闭字体标签 disabledtexture :关闭材质标签 fontheight :文字高度标签 fontstring :字体字串标签 highlightfont:滑鼠停住时文字字体的标签 highlighttexture :滑鼠停住时材质的标签 hitrectinsets :??? layers:这是用来控制UI能显示范围的标签 normalfont: 预设文字标签 normaltexture :预设材质标签 pushedtextoffset :按下文字，放开时会回到原来样子的标签 pushedtexture :按下材质，放开时会回到原来样子的标签 resizebounds:设定最大最小能缩放范围的标签 scripts:开启直译，下面会是程式码的标签 scrollchild :??? shadow:元件影子的标签 size :设定物件大小的标签 texcoords:材质座标标签 thumbtexture:??? titleregion :??? 六、工欲善其事，必先利其器 在这里我推荐大家下载一个东西，他叫做Notepad++ 下载点:http://tinyurl.com/a3kn6 他支援多种语言，我们的Lua和XML都可以用到它! 他的好处就是会帮你的标签上色，让你看的更清楚 不会写得头昏脑胀。 这是他的官网:http://notepad-plus.sourceforge.net/tw/site.htm 七、做一个按钮到游戏中 首先开启Notepad++，新增一个档案，编码选择UTF-8(这样才支援中文字) 程式语言选择XML，然後就让我们开工吧!! 1.首先要宣告定义文件的内容: <Ui xmlns="http://www.blizzard.com/wow/ui" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> </Ui> 2.之後在里面产生一个Button <Button> </Button> 3.把Button命名一下 <Button name="MyFirstButton"> </Button> 4.接下来我们来选择材质 大小 位置 a. <Button name="MyFirstButton"> <Size> <AbsDimension x="142" y="40"/> </Size> </Button> 设定了一个宽142像素 高40像素的按钮 注意<Size>标签 是<Button>标签的子标签 然後<AbsDimension>又是<Size>的子标签 ps:<AbsDimension>是绝对大小的标签 但是还缺少了材质 和 位置 所以 程式码:http://nopaste.csie.org/d2bf5 这段XML码有点长 重头开始就是 先设定大小 然後给他的座点是中央(CENTER) 偏移量X和Y都是零 <NormalTexture> 是当按钮普通状态的时候的材质 从档案里面找到一个按钮(这范例是找WOW里面预设的) <TexCoords>则是材质座标 file属性可以用来找档案 <PushedTexture>则是当按钮被按下去的时候的材质 <DisabledTexture>则是按钮不能按下去的时候的材质 <HighlightTexture>则是按钮被选取时候的材质 <NormalFont style="GameFontNormal" /> <HighlightFont style="GameFontHighlight" /> <DisabledFont style="GameFontDisable" /> 这个则是告诉按钮三种状态时候的字体 完整XML档则是如下: http://paste.plurk.com/show/170251/ 现在把你的XML载入到UI里面去 如下例: ## Interface: 30300 ## Title: 测试 ## DefaultState: Enabled ## LoadOnDemand: 0 你的XML档案名称.xml 执行游戏 就会看到中间有一个Hello World!的按钮 明天再跟大家介绍 直译 事件 还有Wow API 跟更多XML ====================================Part2 结束================================ --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 125.226.9.129 ※ 编辑: wa007123456 来自: 125.226.9.129 (02/11 03:07) ※ 编辑: wa007123456 来自: 125.228.227.4 (02/11 03:32) ※ 编辑: wa007123456 来自: 125.228.227.4 (02/11 03:35) --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 125.228.227.4 --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 125.226.156.113 ※ 编辑: wa007123456 来自: 125.226.156.113 (07/10 14:41) ※ 编辑: wa007123456 来自: 125.226.156.113 (07/11 07:49)