设为首页收藏
切换到窄版

 找回密码
 点一下
GA地精研究院»论坛 › 幽灵研究院 › 银河引擎∞ - 《星际争霸II》+《英雄风暴》编辑器综合区 › ***手把手系列 之 二***【修改界面】 by月 ...
返回列表 发新帖
查看: 2782|回复: 20

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

[复制链接]
发表于 2010-4-14 15:07:58 | 显示全部楼层 |阅读模式
原帖地址：找不到了，


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

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

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

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

  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>

  13. <!--.........................省略...........................-->

  15. <!-- 這里是為了清晰，所以命名了一個名為UIContainer的Frame來控制畫面上其他的Frame位置 -->
  16. <Frame type="Frame" name="UIContainer">
  17. <!--申明父親是整個Parent，而沒有指定偏移，這樣它的大小其實和Parent的大小一致-->
  18. <Anchor relative="$parent"/>

  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>

  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>

  49. <!--.........................省略...........................-->
  50. </Frame>

  52. <!--.........................省略...........................-->
  53. </Frame>
  54. </Frame>
  55. </Desc>
复制代码
從上面的的代碼中可以看到，SC2中畫面其實是用Frame來管理的，整個游戲桌面為一個大的Frame，
其他在其上的界面效果則通過相對坐標位置來指定，很簡單不是么。

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

  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，這個其實就是小地圖的樣子啦，你可以做一個你想要的樣子，
然后替換地圖文件里的這個文件就可以了。

minimap.png

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

希望大家玩的愉快。

评分

参与人数 1威望 +2 收起 理由
Renee + 2 再接再厉

查看全部评分

回复

使用道具 举报

发表于 2010-4-14 15:27:56 | 显示全部楼层
沙发
回复

使用道具 举报

发表于 2010-4-14 15:33:57 | 显示全部楼层
这可真是太棒了...

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

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

使用道具 举报

发表于 2010-4-14 15:43:46 | 显示全部楼层
帅就一个字
回复

使用道具 举报

 楼主| 发表于 2010-4-14 15:58:39 | 显示全部楼层
黑色，好像不能，那塊區域應該叫ConsolePannel。我試這改變它的位置，根本不動
回复

使用道具 举报

发表于 2010-4-14 16:13:06 | 显示全部楼层
我觉得如果实在没办法可以考虑把那console的贴图改成全透明-，-
不过似乎依然点不到被隐藏了的console遮住了的单位。我也木有试过。。。

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

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

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

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

使用道具 举报

发表于 2010-4-14 17:32:25 | 显示全部楼层
帅[s:149]
回复

使用道具 举报

发表于 2010-4-14 17:37:25 | 显示全部楼层
这个月为普通玩家考虑的很多捏
回复

使用道具 举报

发表于 2010-4-14 18:56:42 | 显示全部楼层
至少在beta版里，界面还是和war3一样，在游戏载入时决定的。

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

使用道具 举报

发表于 2010-4-14 19:05:06 | 显示全部楼层
话说游戏载入时的那个 条条
真难看   
回复

使用道具 举报

发表于 2010-4-16 22:14:07 | 显示全部楼层
这样的话星际争霸2就不是一个游戏而是一个引擎，未来12年的游戏引擎
回复

使用道具 举报

发表于 2010-4-16 23:19:14 | 显示全部楼层
其实魔兽也做得很好 MOD方面还有无冬 战锤 红警 都是拥有很强大mod资源的
回复

使用道具 举报

发表于 2011-5-21 20:15:09 | 显示全部楼层
就是这个了！
回复

使用道具 举报

发表于 2011-5-22 01:01:48 | 显示全部楼层
居然沉水里了
回复

使用道具 举报

发表于 2013-10-14 14:35:17 | 显示全部楼层
修改后的代码是导入替换吗?
回复

使用道具 举报

发表于 2013-10-15 10:25:38 | 显示全部楼层
这是10年的大坟。。。现在已经有可视化UI编辑了（尽管是个坑），但至少有又UI编辑器了。每张地图都可以有独立的UI了，而不是非得做mod。

点评

wyf
可视化ui编辑是在哪里的？  详情 回复 发表于 2013-10-15 11:15
wyf
可视化ui编辑是在哪里的？  详情 回复 发表于 2013-10-15 11:15
回复

使用道具 举报

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

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

使用道具 举报

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

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

点评

空人
那个玩意只能用来看，不能做出实际的更改，所以我说是个坑啦 http://bbs.islga.org/forum.php?mod=viewthread&tid=1802224 具体参见这个帖子  发表于 2013-10-16 01:46
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 点一下

本版积分规则

Archiver|移动端|小黑屋|地精研究院

GMT+8, 2024-11-24 13:45 , Processed in 0.193098 second(s), 24 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表