五、UI系统：layout

一、概念

layout是专门为移动游戏设计的UI系统；

移动游戏的开发中有一个比较麻烦的事情是所对应的设备千奇百怪，屏幕什么样的分辨率都有，长宽比也是多种多样，cocos自带的自适应方案是比较粗糙的，变形、超出屏幕、留黑边3选1；

留黑边是实际中常见的选择，这不无不可，但是这样的东西从技术角度来看是非常简单粗暴的，如果能提供一套方案，不给游戏开发带来额外的负担，又能实现多分辨率的自适应，那是很好的；

为此，layout提供了一套不变形、不超出屏幕、不留黑边的UI系统，而且设计者在把某种分辨率设置为默认分辨率后，在此基础上做好的UI可以自动适应到其他的分辩率，不需要二次开发；

用于存储layout信息的文件为.layout文件，每个layout包含Window和BG两个根节点，它们的类型都是名为Window的控件，一个layout文件也只有这两个默认的根节点是这个控件类型；

一般的控件均添加在Window节点下，这是真正的UI节点，其所管理的所有控件均会绘制在游戏的最上层；BG节点的情况比较特殊，一般在游戏中，UI系统绘制在最上层，盖在游戏内容之上，游戏的背景可由游戏内自己去设置和管理，使其绘制在游戏内容之下，但有的游戏比较简单，背景和UI是一个整体设计，这时BG节点就允许设计者在制作UI时同时加入背景，这个背景会被正确的绘制在游戏内容之下，并且按照制作者所设定的信息去自适应各种分辨率；

除了Window类型的控件，还有一类特殊的控件类型，名为Layout；Window控件下的直接子节点只能是Layout控件，Layout控件决定了自身及其子控件的布局方式，Layout控件下不会再包含Layout控件；

Layout控件是非常重要的一类控件，它是UI系统能够自适应到各个分辨率的灵魂；

.layout的基本结构如下所示：

5-1

二、工具

在工具中查看/编辑layout数据如下所示：

5-2

点击工具栏最右边的cocos2d-x图标，可以打开实时预览窗口，该窗口可以拉伸，设计师可以快捷自由的实时看到在各种分辨率下UI的显示效果，和实际游戏一致；以960x640作为默认分辨率制作的layout，在不同分辨率下的显示效果如下所示；

960x640/3:2的效果如5-3所示：

5-3

1136x640/16:9的效果如5-4所示：

5-4

854x640/4:3的效果如5-5所示：

5-5

控件简介：

• Window控件；属性如图5-6所示；
  • Window控件承载了UI根节点和UI背景的职责；
  • 
    
  • layout文件中有且只有两个Window控件，名为Window和BG；
    • Window是UI根节点，一般的，其他控件均在这个分支下；
    • 
      
    • BG是当UI设计囊括了背景时，可以在其中设置背景，该背景会正确的绘制在游戏层之下，并且拥有设定好的多分辨率自适应机制；
  • 
    
  • Window控件的子节点只能是Layout控件；
  • 
    
  • “背景资源”属性，若需要UI背景，可向其中设置一个与预设分辨率一致的资源，使得在预设分辨率下刚好显示满屏；
  • 
    
  • “资源缩放”属性，会影响到所设置的背景资源在不同分辨率下的表现；
    •  固定大小，不论屏幕分辩率如何，背景资源不会缩放，始终保持自身中心点与屏幕中心点重合，会出现被裁剪或黑边的现象；一般不会使用这种方式；
    • 
      
    • 撑满屏幕，不论屏幕分辩率如何，背景资源的长宽会相应缩放到合适的值，使其整个显示在屏幕中，会出现变形；一般当背景资源画面比较单一，不太看得出来变形时，有可能使用到该方式；
    • 
      
    • 等比缩放，默认的模式，背景资源会根据预设分辨率和屏幕分辨率的比值来等比缩放，保证自身中心与屏幕中心重合，且不出现
• 
  
• Layout控件；属性如图5-7所示；
  • Layout控件承载了UI的布局，多分辨率下的自适应机制的灵魂；
  • 
    
  • Layout控件不会再包含Layout控件，Layout仅存在为Window控件的子节点；
  • 
    
  • “位置参考点”属性，设计上将一个屏幕分出了9个参考点；
    • 无，表示该Layout控件没有多分辨率自适应机制，其距离屏幕左下角（屏幕左下角是原点）在预设分辨率下是多少，在其他分辨率下就是多少；
    • 
      
    • 屏幕中央，该Layout控件会以屏幕中央作为参考点，其偏移量均以屏幕中央作为参考，而不论其与原点的偏移是多少；这个参考在不同分辨率下计算的是百分比，也就是说，在预设分辨率下，该Layout控件中心点距离屏幕中心点的偏移是0.1个屏幕宽，0.12个屏幕高，那么分辨率不论变为多少，其中心点距离屏幕中心点依旧为偏移0.1个屏幕宽，0.12个屏幕高；
    • 
      
    • 上边中央、右边中央、下边中央、左边中央、左上顶点、右上顶点、右下顶点、左下顶点概念和‘屏幕中央’一样，只不过是不同的参考点；
    • 
      
    • 设置了参考点之后，该Layout控件及其子节点的锚点也会被设置为和对应的参考点一致，比如以‘屏幕中央’作为参考点，资源的锚点就是0.5,0.5；以‘下边中央’作为参考点，资源的锚点就是0.5,0.0；（资源的锚点是隐式的数据，并不在属性列表中显示，属性列表中的“控件动画锚点”是独立的概念）
    • 
      
    • 不同的参考点，Layout控件偏移的意思也不同，比如以“屏幕中央”作为参考点，偏移是指Layout中心点和屏幕中心点之间的偏移；以“左下顶点”作为参考点，偏移是指Layout左下顶点和屏幕左下顶点之间的偏移；（结合参考点的锚点设置，这种偏移的过度很自然，你也许都没有感觉到它是这么工作的，只是在实际使用的时候会觉得“很舒服”）
  • 
    
  • “缩放模式”属性，屏幕分辩率变化后，Layout控件会按所设置的方式进行缩放；假定预设分辨率的宽度为w，高度为h；当前设备分辨率的宽度为w1，高度为h1；那么宽高的缩放比例为sw=w1/w、sh=h1/h；
    • 固定大小，Layout控件的大小不变；
    • 
      
    • 同屏幕缩放，Layout控件的宽*sw，高*sh；
    • 
      
    • 等比缩放(大)，宽*MAX(sw, sh)，高*MAX(sw, sh)；
    • 
      
    • 等比缩放(小)，宽*MIN(sw, sh)，高*MIN(sw, sh)；
    • 
      
    • 等比缩放(宽)，宽*sw，高*sw；
    • 
      
    • 等比缩放(高)，宽*sh，高*sh；
    • 
      
    • 仅宽缩放，宽*sw，高不变；
    • 
      
    • 仅高缩放，宽不变，高*sh；
    • 
      
    • 宽(宽)高(大)，宽*sw，高*MAX(sw, sh)；
    • 
      
    • 宽(宽)高(小)，宽*sw，高*MIN(sw, sh)；
    • 
      
    • 宽(大)高(高)，宽*MAX(sw, sh)，高*sh；
    • 
      
    • 宽(小)高(高)，宽*MIN(sw, sh)，高*sh；
• 
  
• 不同控件的一些公共属性；如图5-8所示的属性是大部分控件都拥有的一些基础属性；
  • “可见”属性，去掉勾选则表示在游戏中默认是不显示该控件及其子控件的；
  • 
    
  • “点击模式”属性，不同控件的默认值不同（还有许多属性也是如此，不同控件的默认值不同，量身定制，帮助使用者减少不必要的工作量），比如Button控件默认是‘仅单指点击’，Panel控件默认是‘不接受点击’；
    • 不接受点击，该控件不响应点击事件，放过该事件传递给下一个控件；（点击事件的相应顺序和视觉顺序一致，在前面的先相应）
    • 
      
    • 仅单指点击，该控件相应点击事件，并且当该控件被按下时，其他手指在屏幕上的任何操作将被抛弃；
    • 
      
    • 可多指点击，该控件相应点击事件，并且当该控件被按下时，若其他手指点击到了同为‘可多指点击’的控件，它们将同时被相应；‘仅单指点击’的控件此时不会相应点击事件；
  • 
    
  • “资源对齐”属性，部分控件可以设置一个或多个图形资源，这一属性指定了这些图形资源在控件中的位置；
    • 自由，图形资源会出现在默认的位置；
    • 
      
    • 中心，图形资源的中心点和控件的中心点重合；
    • 
      
    • 左上角、右上角、右下角、左下角，图形资源的相应点和控件的相应点重合；
  • 
    
  • “尺寸模式”属性；
    • 用户自定义，控件的大小为‘尺寸’属性中设定的值；
    • 
      
    • 资源尺寸，控件的大小和设置进来的图形资源一致，‘尺寸’属性中的值不再起作用；
  • 
    
  • “位置”属性，控件相对于父控件的偏移；
  • 
    
  • “尺寸”属性，控件的大小，是否起作用取决于‘尺寸模式’的设置；
  • 
    
  • “控件动画锚点”属性，控件中可以加入控件动画，动画涉及到的位移、缩放、旋转、倾斜均以该锚点作为参考点；
• 
  
• Panel控件；属性如图5-9所示；Panel控件没什么特殊的功能，作为一种独立的控件，可以为一些其他控件提供父节点，目的在于结构清晰；
• 
  
• GeometryClip控件；属性如图5-10所示；GeometryClip控件会将其子节点裁剪，在其内部的被绘制出来，之外的被裁剪；
  • “裁剪样式”属性；
    • 矩形，取决于控件的‘尺寸’；
    • 
      
    • 圆形，控件‘尺寸’内切的最大圆；
• 
  
• ColorMatte控件；属性如图5-11所示；矩形的色块，可以设定其颜色及透明度，其大小取决于‘尺寸’，一般用于遮罩，屏蔽点击事件之类；
• 
  
• Image控件；属性如图5-12所示；简单绘制一个图形资源，frame、module、action均可；
• 
  
• Label控件；属性如图5-13所示；用于绘制文字的控件，目前的版本只能绘制系统字，可以设定颜色、透明度、大小、对齐方式，设定的字体不会被保存；文字是一个很大的功能块，比如美术字体、富文本等，之后的版本会有很强大的Label控件，目前仅仅是初级阶段；
• 
  
• PushButton控件；属性如图5-14所示；
  • “普通态资源”属性，普通状态下的样子，一般这个是必须设置的；
  • 
    
  • “按下态资源”属性，按下时的样子，如果设置了，那么按下时会显示所设置的资源，如果为空，那么按下时会将普通态的资源做些处理绘制出来，以示区别；
  • 
    
  • “禁用态资源”属性，禁用时的样子，和‘按下态资源’一样，可以不设置，会用‘普通态资源’做些处理；

另一些比如ToggleButton、Controller控件，实际用用就知道了，基本的属性和上面介绍过的差不多；

上面是一些最常见的控件，新的控件正在逐步增加中；

控件动画：

• 勾选绘制窗口上的“编辑”后，会开启控件动画的编辑功能；
• 
  
• 上方的“时间轴”被激活，和编辑action的时间轴差不多；
• 
  
• 图层也是树形结构，是单一父子结构，即各个图层可以有子节点，但只能有一个；
• 
  
• 可以在绘制窗口中实时看到动画的效果；
• 
  
• 动画效果包括位移、缩放、旋转、倾斜；
• 
  
• 预设了6种动画；
  • 出现，控件出现时可以选择播出这段动画，也可直接出现，取决于调用的接口；
  • 
    
  • 消失，控件隐藏时可以选择播出这段动画，也可直接隐藏，取决于调用的接口；
  • 
    
  • 错误，比如不能点击的控件被点击时，可以播出这段动画增强视觉效果；
  • 
    
  • 自定义_1、自定义_2、自定义_3，有时需要特别的动画时，可以灵活使用这些预留的接口；

5-6

5-7

5-8

5-9

5-10

5-11

5-12

5-13

5-14