自制界面的两种方法的简单解析

cccty1l · 发表于 2011-7-5 00:12:12

说说自制UI吧，这里的自制范围只是在SC2游戏默认的界面元素的基础上进行修改，只稍微涉及到自建界面元素。

我们应该知道，自制UI在分类上可以说有两种方法，一个是将原有的界面元素移动位置来完成，另外一个是使用模板来创建新的界面元素。

这两种方法需要修改的地方并不一样，实际能达到的效果也有一定的区别。

首先，我们先介绍第一种方法，也就是说如何移动原有的界面元素。
1，准备工作，请先使用MPQEditor将Base.SC2Data中UI\Layout\UI路径内所有的文档都解压出来，这些东西都是有助于大家研究的，有能力和时间的童鞋可以仔细看看它们。

2，因为我们先要介绍第一种方法，所以大家先打开GameUI.SC2Layout这个文件。这个文件中描述的就是游戏界面内各元素的从属关系、创建顺序、引用模板以及相应的属性。

3，接下来，我们就试着移动一下小地图的位置，将其从左下角移动到右上角吧。

4，我们先新建一个文本文档，命名为DIY，将其后缀修改为SC2Layout，在文档中写下如下内容：
[codes=xml]
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Desc>
<Frame type="GameUI" name="GameUI" file="GameUI">

</Frame>
</Desc>
[/codes]
这是一个标准的xml文档，其根节点为Desc，我们在其中新建了一个子节点Frame，游戏中，每个窗体元素都对应了一个Frame节点。注意我填写的3个属性，因为我们只是需要移动原窗体元素的位置，因此请注意type和name需要与你要修改的窗体元素保持一致，另外一个file也请注意不要落下，表示其要覆盖哪个文档的数据。
将其导入地图中，在数据编辑器中的“游戏UI数据”中“自定义布局文件”将它挂接上，以后DIY.SC2Layout有了变动，请重新将其导入地图，然后再查看效果。

5，我们要修改小地图的位置，所以在GameUI.SC2Layout中搜索MinimapPanel，然后在DIY.SC2Layout将MinimapPanel的Frame节点复制过去(template属性不要复制了，之后我会讲到它是什么作用)。但是请注意，此时的name属性应当做一下修改，我们向上寻找MinimapPanel的父节点并记录下来，直至找到GameUI为止，如下填写：
[codes=xml]
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Desc>
<Frame type="GameUI" name="GameUI" file="GameUI">
         <Frame type="MinimapPanel" name="UIContainer/ConsoleUIContainer/MinimapPanel">
            <BatchImages val="true"/>
            <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
            <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
            <Width val="391"/>
            <Height val="327"/>
         </Frame>
</Frame>
</Desc>
[/codes]
意思很明显，name中填写的该窗体元素的路径。所以如下的两种写法和上面的写法是等同的，但是我推荐使用下面的第二种，方法以后大家增加修改的元素。
[codes=xml]
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Desc>
      <Frame type="MinimapPanel" name="GameUI/UIContainer/ConsoleUIContainer/MinimapPanel" file="GameUI">
         <BatchImages val="true"/>
         <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
         <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
         <Width val="391"/>
         <Height val="327"/>
      </Frame>
</Desc>
[/codes]
[codes=xml]
我推荐大家使用这种方法，不过各个方法相差不大，还是看个人的习惯了。
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Desc>
<Frame type="GameUI" name="GameUI" file="GameUI">
      <Frame type="Frame" name="UIContainer">
         <Frame type="Frame" name="ConsoleUIContainer">
                  <Frame type="MinimapPanel" name="MinimapPanel">
                     <BatchImages val="true"/>
                     <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
                     <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
                     <Width val="391"/>
                     <Height val="327"/>
                  </Frame>
         </Frame>
      </Frame>
      </Frame>
</Desc>
[/codes]

6，因为我们只是覆盖原来的各项属性，并且只修改小地图的位置，因此我们仅保留下MinimapPanel中的Anchor两个子节点，其他的删除即可，是会自动继承的。
   然后我们来看下Anchor节点中各项属性的意义：
         side指该窗口元素被用来定位的边框，有Left、Right、Top、Bottom四个值。
         relative指该窗口元素将锚点设置于哪个窗口元素，"$parent"是指其父窗口，"$parent/$parent"是指其父窗口的父窗口，"$parent/xxx"是指其父窗口内名为xxx的窗体元素，具体请大家自己体会一下。
         pos有3个值，Min、Mid、Max。指定的是锚点在其所依存的窗口元素的位置。所以，有些元素之需要设置Top和Bottom、Left和Right中的任意两个就可以了。如果有的窗体元素将对应的两个边框位置都设定了，因为它们一般会在中间点显示自己。
         offset就是偏移。窗口左上角位置为(0,0)，向右，向下均为正偏移，反向为负偏移。
   所以我们结合<Anchor side="Left" relative="$parent" pos="Min" offset="0"/>来看就可以清楚的知道，小地图的左边框会附着于ConsoleUIContainer的最左边，偏移为0。
   既然我们要把小地图修改到右上角，那么我们修改如下：
[codes=xml]
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Desc>
<Frame type="GameUI" name="GameUI" file="GameUI">
      <Frame type="Frame" name="UIContainer">
         <Frame type="Frame" name="ConsoleUIContainer">
                  <Frame type="MinimapPanel" name="MinimapPanel">
                  <Anchor side="Left" relative="$parent" pos="Max" offset="-355"/>
                  <Anchor side="Bottom" relative="$parent" pos="Min" offset="330"/>
                  </Frame>
         </Frame>
      </Frame>
      </Frame>
</Desc>
[/codes]
至于为什么是修改Left和Bottom，简单的来说是因为我们是覆盖原文件的。大家可以试试修改如下，看看效果。
[codes=xml]
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Desc>
<Frame type="GameUI" name="GameUI" file="GameUI">
      <Frame type="Frame" name="UIContainer">
         <Frame type="Frame" name="ConsoleUIContainer">
                  <Frame type="MinimapPanel" name="MinimapPanel">
                  <Anchor side="Right" relative="$parent" pos="Max" offset="0"/>
                  <Anchor side="Top" relative="$parent" pos="Min" offset="0"/>
                  </Frame>
         </Frame>
      </Frame>
      </Frame>
</Desc>
[/codes]
此时，小地图是在哪里呢？

7，移动小地图之后，大致一看就会发现有两个副作用，一个是编队按钮的位置移动了，另外就是小地图旁边的3个按钮也跟着过来了。
   第一个问题，我们看一下ControlGroupPanel的属性就可以明白了,因为它的左边挂接着MinimapPanel，至于它要怎么处理，随大家的意了，我的地图中直接将它移动到地图界面外了。
[codes=xml]
<Frame type="ControlGroupPanel" name="ControlGroupPanel" template="ControlGroupPanel/ControlGroupPanelTemplate">
<BatchImages val="true"/>
<BatchText val="true"/>
<Anchor side="Left" relative="$parent/MinimapPanel" pos="Max" offset="0"/>
<Anchor side="Bottom" relative="$parent/InfoPanel" pos="Min" offset="-5"/>
<Width val="766"/>
<Height val="64"/>
</Frame>
[/codes]
   第二个问题就稍微复杂一些了，这三个按钮并不是在GameUI.SC2Layout中定义的，而是在UI\Layout\UI的文件夹内的MinimapPanel.SC2Layout文件内定义的。如何追踪到这个文件的呢？还记得大家刚才复制MinimapPanel这个节点时，它的template属性吧，是“MinimapPanel/MinimapPanelTemplate”，这个路径就是模板的路径，小地图就是以其为模板创建的，其内所有的元素属性与名称均与模板的定义相同。一般来说，“MinimapPanel”是指的文件名，“MinimapPanelTemplate”是该文件内的一个窗体定义的名字。
   我们打开MinimapPanel.SC2Layout文件，搜索MinimapPanelTemplate，就可以看到这个模板的结构了，如下：
[codes=xml]
<Frame type="MinimapPanel" name="MinimapPanelTemplate">
      <Frame type="MinimapPanelTooltip" name="MinimapPanelTooltip" template="MinimapPanel/MinimapPanelTooltipTemplate"/>

      <Frame type="Minimap" name="Minimap">
         <Anchor side="Top" relative="$parent" pos="Min" offset="25"/>
         <Anchor side="Left" relative="$parent" pos="Min" offset="31"/>
         <Width val="291"/>
         <Height val="286"/>
         <TooltipFrame val="MinimapPanelTooltip"/>
      </Frame>

      <Frame type="Button" name="PingButton" template="MinimapPanel/MinimapButtonTemplate">
         <Anchor side="Right" relative="$parent" pos="Max" offset="-6"/>
         <Anchor side="Bottom" relative="$parent" pos="Max" offset="-226"/>
         <Frame type="Image" name="Icon">
            <Texture val="@UI/MinimapPing"/>
         </Frame>
      </Frame>

      <Frame type="Button" name="TerrainButton" template="MinimapPanel/MinimapButtonTemplate">
         <Anchor side="Right" relative="$parent" pos="Max" offset="-6"/>
         <Anchor side="Bottom" relative="$parent" pos="Max" offset="-176"/>
         <Frame type="Image" name="Icon">
            <Texture val="@UI/MinimapTerrain"/>
         </Frame>
      </Frame>

      <Frame type="Button" name="ColorButton" template="MinimapPanel/MinimapButtonTemplate">
         <Anchor side="Right" relative="$parent" pos="Max" offset="-6"/>
         <Anchor side="Bottom" relative="$parent" pos="Max" offset="-124"/>
         <Frame type="Image" name="Icon">
            <Texture val="@UI/MinimapColor"/>
         </Frame>
      </Frame>

      <Frame type="Image" name="ClearSelectionBackground">
         <Anchor side="Top" relative="$parent/ColorButton" pos="Max" offset="10"/>
         <Anchor side="Left" relative="$parent/ColorButton" pos="Mid" offset="0"/>
         <Anchor side="Right" relative="$parent/ColorButton" pos="Mid" offset="0"/>
         <Texture val="@UI/ClearSelectionBackground" layer="0"/>
      </Frame>

      <Frame type="Button" name="ClearSelectionButton" template="MinimapPanel/MinimapButtonTemplate">
         <Anchor side="Left" relative="$parent/ClearSelectionBackground" pos="Mid" offset="0"/>
         <Anchor side="Right" relative="$parent/ClearSelectionBackground" pos="Mid" offset="0"/>
         <Anchor side="Top" relative="$parent/ClearSelectionBackground" pos="Mid" offset="0"/>
         <Anchor side="Bottom" relative="$parent/ClearSelectionBackground" pos="Mid" offset="0"/>
         <Frame type="Image" name="Icon">
            <Texture val="@UI/ClearSelection"/>
         </Frame>
      </Frame>
</Frame>
[/codes]
   这三个多余的按钮就是PingButton、TerrainButton和ColorButton，它们是MinimapPanel的子节点，要修改它们的位置，我们可以直接在DIY.SC2Layout中作出修改。比如我想直接将它们移到屏幕外，就做如下修改：
[codes=xml]
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Desc>
<Frame type="GameUI" name="GameUI" file="GameUI">
      <Frame type="Frame" name="UIContainer">
         <Frame type="Frame" name="ConsoleUIContainer">
            <Frame type="MinimapPanel" name="MinimapPanel">
                  <Anchor side="Left" relative="$parent" pos="Max" offset="-355"/>
                  <Anchor side="Bottom" relative="$parent" pos="Min" offset="330"/>
                  <Frame type="Button" name="PingButton">
                     <Anchor side="Right" relative="$parent/$parent" pos="Max" offset="50"/>
                  </Frame>
                  <Frame type="Button" name="TerrainButton">
                     <Anchor side="Right" relative="$parent/$parent" pos="Max" offset="50"/>
                  </Frame>
                  <Frame type="Button" name="ColorButton">
                     <Anchor side="Right" relative="$parent/$parent" pos="Max" offset="50"/>
                  </Frame>
            </Frame>
         </Frame>
      </Frame>
      </Frame>
</Desc>
[/codes]
   大家可以结合上面的要点，来理解这样修改所能达到的效果。

使用覆盖的方法来修改UI到此为止，请大家多多练习，掌握这个真是小意思了。
但是还有一些窗体元素的设置时需要注意的，比如英雄的头像按钮，它们的创建顺序是逆序的，所以摆放它们的位置的时候请务必记住这一点，否则可能会出现令人抓狂的问题。

cccty1l · 发表于 2011-7-5 00:12:26

使用覆盖的方法重置UI有什么缺陷呢？很明显就是，界面即使重置，它的位置在游戏内依然不能动态修改，所以如果我们想要将窗体元素随心所欲的移动和隐藏时，就需要使用第二种方法了。即使用模板来创建对话框项。

具体的方法，可以看头目的这个演示,http://bbs.islga.org/read-htm-tid-53049-page-1-fpage-1.html

各个模板的路径是什么呢？大家可以在GameUI.SC2Layout中查看各窗体元素的template属性，下面我以创建一个CommandPanel(技能按钮栏)为例。它的模板路径为“CommandPanel/CommandPanelTemplate”。

不要偷懒，还不会创建对话框项模板的童鞋，务必按照链接中头目的演示自己制作一下，在屏幕的中央显示一个CommandPanel界面，不然看下去就没有意义了。

好的，如果成功了的话，咱们就可以继续了，我就偷懒不制作兼截图啦(拍飞...其实是LZ想偷懒)。将CommandPanel独立创建出来以后，大家可能会觉得如果把他们摆成一条直线会比较好看一点，那么如果制作呢？

1，在UI\\Layout\\UI文件夹中复制一份CommandPanel.SC2Layout出来，我们要修改它，完成之后我们要将其导入到地图中去，路径即为UI\\Layout\\UI。

2，打开CommandPanel.SC2Layout文件，我们看到的就是CommandPanel的模板了，里面的CommandButtonXX按钮数一数是不是正好是15个呢？没错了，它们就是技能栏的按钮，如果要将它们排列成一个直线应该如何操作呢？
   按照上一贴的方法就可以了，完全一样的。

3，修改完之后，记得导入CommandPanel.SC2Layout文件，并且将路径设置正确，运行地图看一看是否修改成功了，因为这修改方法依然是上一贴的内容，所以我就不在此方法文档和截图了，这个需要大家自己来练习一下了。

我们来总结一下，这个方法需要用到触发器，使用正常的流程来创建自定义窗体元素，然后在某个Dialog或者Panel内使用模板创建一个窗体元素。需要用到的是以下两个函数：
native int    DialogControlCreateFromTemplate (int dialog, int type, string inTemplate);
native int    DialogControlCreateInPanelFromTemplate (int panel, int type, string inTemplate);

好了，如果对上面的流程十分熟悉了的话，那么我想问大家一个问题，我们刚才创建的以“CommandPanel/CommandPanelTemplate”为模板的窗体元素，其父窗口是哪个？

这个答案大家不需要要在GameUI.SC2Layout中寻找，而是要在触发器中寻找，意思就是如果使用上面的两个api创建了该模板元素的话，其父窗口就是对应的Dialog或Panel。如果你想更精确的知道你所创建的窗体元素的性质时，请务必记得这一点。

cccty1l · 发表于 2011-7-5 00:15:29

那么，第二种方法有何缺点呢？就拿刚才创建的CommandPanel为例，你用鼠标与它相互作用时，它一切正常，但是它是不会响应热键的，如果你隐藏了游戏自带的CommandPanel时，你按热键它不会有任何反应；而如果没有隐藏的话，它可以在你单位的技能按钮热键按下时，会与自带的CommandPanel一起改变图标，但是如果你打开建造按钮(就是切换CommandPanel的按钮栏)，它不会有任何变化。

知道有上面的一些小瑕疵，我们尽量避免它就好了。

我现在想制作一个可以随时隐藏、改变位置的CommandPanel，但是同时它又是可以响应热键的。那么我们应该如何制作呢？

其实很简单，就是结合上面的两种方法，我们使用第二个方法创建一个新的窗体元素CommandPanel，这样它就可以随时移动了；但是不隐藏游戏自带的CommandPanel，而是使用第一种方法将其移动到界面的外边，这样它就可以响应热键了。

就是这么简单，我附上演示，希望能对大家有所帮助。

Screenshot2011-07-04 20_21_03.jpg

麦德三世 · 发表于 2011-7-5 00:30:05

非常好~~于是我需要写的教程又少了一个呢~~星星来加分吧~~

继续填坑GAx3唉~~

PTR1.4到底啥时候出啊~~

cccty1l · 发表于 2011-7-5 00:35:37

可能会有些错字，这个请大家原谅吧，我这里网速实在太渣，修改起来十分费力。
而且打错字的原因是搜狗的智能选词，太渣了。

嗯，严肃点说，帖子内有其他的表述或者实质性的错误的话，还请大家赐教。

okmpl1350 · 发表于 2011-7-5 12:07:32

拜上～这帖子来得太及时了～

海眼 · 发表于 2011-7-5 21:30:32

强大，正是我想要的！

kidddddd1984 · 发表于 2011-7-6 02:36:54

我只想知道技能上的快捷键是怎么显示的，望赐教

喂喂 · 发表于 2011-7-6 02:48:36

游戏设置里自己选择打开就有显示了。

ga_pzy87 · 发表于 2011-7-6 12:59:57

学习学习，谢谢分享~！

onionhead · 发表于 2011-7-11 10:08:44

解救我与水深火热之中啊

starusermap · 发表于 2013-1-10 22:14:00

数据编辑器中的“游戏UI数据”中“自定义布局文件”将它挂接上，以后DIY.SC2Layout 怎么找这个文件？

四夕水草肃 · 发表于 2013-1-10 22:40:26

回复楼上：由于新的UI编辑页面的出现，本教程已经过时。

starusermap · 发表于 2013-1-10 22:43:33

难怪我怎么导入也导不进去那个文件。那我该怎么做啊？谢谢。

cccty1l · 发表于 2013-1-10 22:44:44

12楼你挖我坟了。

现在SC2都1.5了，可以直接使用UI编辑器了。规则与上面描述的覆盖方法一样，不过不需要在“游戏UI数据”中挂接了。

oneonestar · 发表于 2013-1-10 22:46:42

挖坟了啊，那就顺便上香好了。。

starusermap · 发表于 2013-1-10 22:57:36

UI 编辑器是什么？哪里可以下？谢谢

cccty1l · 发表于 2013-1-10 23:00:51

本帖最后由 cccty1l 于 2013-1-10 23:03 编辑

在模块 - UI 里面，热键是Shift+F6.

然后右键，添加布局，再把DIY.SC2Layout里面的内容复制进去，然后就可以测试了。

//修改分隔线

我记得没错的话，这个布局文件在SC2升级过一次后，会报错了，因为指令按钮的Tips面板挂接错误了，回头我有时间，再发一份1.5的吧。

starusermap · 发表于 2013-1-10 23:17:09

本帖最后由 starusermap 于 2013-1-11 21:04 编辑

Xiexie

四夕水草肃 · 发表于 2013-1-11 21:23:00

所有说花音说的是UI编辑页面不是UI编辑器啊……

		自动登录	找回密码
密码			点一下

自制界面的两种方法的简单解析

评分

点评