※ [本文轉錄自 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)