***手把手系列 之 二***【修改界面】 by月

templarmxb

原帖地址：找不到了，


這一節里，我們來看一下怎么修改游戲的界面。
這樣你就可以按照自己的喜好設計界面啦。
好了，先看下效果


可以看到我改變了小地圖，單位顯示欄，技能欄，還有選中單位頭像，英雄單位頭像的位置了，
看起來是不是有點好玩啊，好了，接下來，我們詳細看一下如何修改界面。

首先我們來看一下控制界面文件的位置。
我們用【MPQEditor】解開【installpath】/Mods/ Core.SC2Mod/ Base.SC2Data文件，
在路徑UI/Layout/UI下面，你就會發現一堆的SC2Layout文件，這就是我們要修改的文件了。

界面的整體控制是在GameUI.SC2Layout里

1. 
   
2. <Desc>
   
3. <Frame type="GameUI" name="GameUI">
   
4. <Anchor relative="$parent"/>
   
5. <!--這應該就是我們玩游戲的整個桌布，就是你滿眼能看到的畫面了-->
   
6. <Frame type="WorldPanel" name="WorldPanel">
   
7. <Anchor side="Top" relative="$parent" pos="Min" offset="0"/>
   
8. <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
   
9. <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
   
10. <Anchor side="Right" relative="$parent" pos="Max" offset="0"/>
    
11. </Frame>
    
12. 
    
13. <!--.........................省略...........................-->
    
14. 
    
15. <!-- 這里是為了清晰，所以命名了一個名為UIContainer的Frame來控制畫面上其他的Frame位置 -->
    
16. <Frame type="Frame" name="UIContainer">
    
17. <!--申明父親是整個Parent，而沒有指定偏移，這樣它的大小其實和Parent的大小一致-->
    
18. <Anchor relative="$parent"/>
    
19. 
    
20. <!-- 控制欄上的一些Frame -->
    
21. <Frame type="Frame" name="ConsoleUIContainer">
    
22. <Anchor relative="$parent"/>
    
23. <!--小地圖的位置-->
    
24. <Frame type="MinimapPanel" name="MinimapPanel" template="MinimapPanel/MinimapPanelTemplate">
    
25. <BatchImages val="true"/>
    
26. <!--左邊坐標位置，最左邊的坐標-->
    
27. <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
    
28. <!--下部坐標位置，最下部的坐標-->
    
29. <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
    
30. <!--寬度-->
    
31. <Width val="391"/>
    
32. <!--高度-->
    
33. <Height val="327"/>
    
34. </Frame>
    
35. 
    
36. <Frame type="CommandPanel" name="CommandPanel" template="CommandPanel/CommandPanelTemplate">
    
37. <BatchImages val="true"/>
    
38. <BatchText val="true"/>
    
39. <!--下部的坐標位置，最下面位置開始向上偏移18-->
    
40. <Anchor side="Bottom" relative="$parent" pos="Max" offset="-18"/>
    
41. <!--最右部的坐標位置，從最右邊的位置開始向左偏移21-->
    
42. <Anchor side="Right" relative="$parent" pos="Max" offset="-21"/>
    
43. <!--寬度-->
    
44. <Width val="400"/>
    
45. <!--高度-->
    
46. <Height val="242"/>
    
47. </Frame>
    
48. 
    
49. <!--.........................省略...........................-->
    
50. </Frame>
    
51. 
    
52. <!--.........................省略...........................-->
    
53. </Frame>
    
54. </Frame>
    
55. </Desc>
    

复制代码

從上面的的代碼中可以看到，SC2中畫面其實是用Frame來管理的，整個游戲桌面為一個大的Frame，
其他在其上的界面效果則通過相對坐標位置來指定，很簡單不是么。

怎么確定一個Frame的相對位置和大小？

1. 
   
2. <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
   
3. <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
   
4. <Width val="391"/>
   
5. <Height val="327"/>
   

复制代码

通過指定兩個偏移以及寬高來實現。

1. <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
   
2. <Anchor side="Right" relative="$parent" pos="Max" offset="-391"/>
   
3. <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
   
4. <Height val="327"/>
   

复制代码

通過指定三個偏移和高或者三個偏移加寬來實現。

1. <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
   
2. <Anchor side="Right" relative="$parent" pos="Max" offset="-391"/>
   
3. <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
   
4. <Anchor side="Top" relative="$parent" pos="Max" offset="-327"/>
   

复制代码

通過制定四個偏移位置來實現。
確立了界面上的每種元素的位置之后，就會考慮每個子Frame內部的相應構造，
這你需要查看其type屬性，在剛展開的UI文件夾下，一定存在一個以這個屬性命名的文件，
打開它你就可以更改詳細了。
譬如你想追加5個CommandButton，你就需要打開CommandPanel.SC2Layout文件。

1. <Frame type="CommandPanel" name="CommandPanelTemplate">
   
2. <!--.........................省略...........................-->
   
3. <Frame type="CommandButton" name="CommandButton00" template="CommandButton/CommandButtonTemplate">
   
4. <Anchor side="Top" relative="$parent" pos="Min" offset="#CommandButtonGap"/>
   
5. <Anchor side="Left" relative="$parent" pos="Min" offset="#CommandButtonGap"/>
   
6. </Frame>
   
7. <!--.........................省略...........................-->
   
8. </Frame>
   

复制代码

每個Button會以CommandButtonXX命名，這樣你可以定義很多個CommandButton，每個Button之間是以各自的相對位置來確定的。
這里還有一個要說明的就是在XML中也是可以使用變量的，譬如這里的#CommandButtonGap其實就是一個小小的變量。

1. <Constant name="CommandButtonGap" val="1"/>

复制代码

關于地圖還有一個小技巧，現在大家看到的地圖是是一個方型的，能不能做成園型呢，答案是可以，
你解開地圖文件后，你會看到一個Minimap.tga，這個其實就是小地圖的樣子啦，你可以做一個你想要的樣子，
然后替換地圖文件里的這個文件就可以了。



但是現在還存在幾個問題：
1 雖然CommandButton的位置是加出來，但是在Unit里定義技能的位置時，不管怎么指定位置，技能都不能顯示并使用。
   懷疑現階段是不是Unit的技能總數就只是15個啊。
2 這個UI感覺無法放到地圖里，如果是這樣的話，它的實用價值就需要重新考慮了。
我試過很多位置，但是對界面都沒有影響。

希望大家玩的愉快。

gg021308106

沙发

Conflux

这可真是太棒了...

----------- 帖子于 15:33 更新 --------- 之前内容发布于 15:33 ------------

不知道主界面下边控制台那里的黑色可以干掉不...

gamedsn

帅就一个字

templarmxb

黑色，好像不能，那塊區域應該叫ConsolePannel。我試這改變它的位置，根本不動

gamedsn

我觉得如果实在没办法可以考虑把那console的贴图改成全透明-，-
不过似乎依然点不到被隐藏了的console遮住了的单位。我也木有试过。。。

----------- 帖子于 16:09 更新 --------- 之前内容发布于 16:07 ------------

我又想了个YD的方法，，直接用空模型把console的原模型替换了-,-!!这个应该省事了

----------- 帖子于 16:13 更新 --------- 之前内容发布于 16:09 ------------

我看错了-。。。貌似楼主已经把console 去掉了- -

『四褲全輸』

帅[s:149]

灵魂仲裁者

这个月为普通玩家考虑的很多捏

Renee

至少在beta版里，界面还是和war3一样，在游戏载入时决定的。

所以目前还无法通过修改地图来修改界面。只能做mod。

曾经拥有

话说游戏载入时的那个 条条
真难看   

真·无翼天使

这样的话星际争霸2就不是一个游戏而是一个引擎，未来12年的游戏引擎

灵魂仲裁者

其实魔兽也做得很好 MOD方面还有无冬 战锤 红警 都是拥有很强大mod资源的

okmpl1350

就是这个了！

腋来香

居然沉水里了

乳汁可浇也

修改后的代码是导入替换吗?

空人

这是10年的大坟。。。现在已经有可视化UI编辑了（尽管是个坑），但至少有又UI编辑器了。每张地图都可以有独立的UI了，而不是非得做mod。

wyf

空人 发表于 2013-10-15 10:25
这是10年的大坟。。。现在已经有可视化UI编辑了（尽管是个坑），但至少有又UI编辑器了。每张地图都可以有独 ...

可视化ui编辑是在哪里的？

wyf

空人 发表于 2013-10-15 10:25
这是10年的大坟。。。现在已经有可视化UI编辑了（尽管是个坑），但至少有又UI编辑器了。每张地图都可以有独 ...

可视化ui编辑是在哪里的？