[心得] 淺學UI心得 Part2(革新二版)

看板Programming作者wa007123456 (大笨羊)時間14年前 (2010/02/11 05:06)推噓0(0推 0噓 0→)

留言0則, 0人參與討論串1/1

※ [本文轉錄自 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="" rel="nofollow">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="" rel="nofollow">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

推

anjohn

02/11 03:06,

02/11 03:06

※ 編輯: wa007123456 來自: 125.226.9.129 (02/11 03:07)

推

xyzyx

02/11 03:10,

02/11 03:10

推

guithawk

02/11 03:13,