界面适配和制作方案

界面适配

Cocos creator的界面适配分为整体的canvas画布缩放和在界面内部使用widget组件的对齐布局。

Canvas 缩放适配

Cocos creator的canvas适配主要通过三个参数来控制：

Design Resolution：UI界面的设计分辨率。

Fit Height：按照高度适配，如果勾选了这个选项，在实际屏幕分辨率与设计分辨率的宽高比不同的情况下，cocos会使用高度优先适配的方式进行缩放。

Fit Width：按照宽度适配，如果勾选了这个选项，在实际屏幕分辨率与设计分辨率的宽高比不同的情况下，cocos会使用宽度优先适配的方式进行缩放。
我们游戏采用的是iphone 6的屏幕尺寸作为设计分辨率，即 1334 * 750。Canvas组件控制的主要是界面元素的缩放比例，cocos推荐的是在实际屏幕尺寸的宽高比大于设计分辨率的宽高比的时候采用按宽度适配，反之使用高度适配。但是我们在实践中发现，这种适配方案会导致在高分辨率手机上出现界面元素过度放大的问题，这使得在下一步使用widget布局的混乱，无法使用一套固定的widget布局适应所有的分辨率，如图1.1-1和1.1-2所示，在1.1-1中使用了宽度适配，中间的坦克logo过度放大了，与下方的文字发生了重叠。而在1.1-2中使用了高度适配，则保持了原有设计分辨率下的布局。所以我们采用了跟cocos推荐相反的canvas缩放方案，在实际屏幕尺寸宽高比大于设计分辨率的时候使用按高度适配，反之使用按宽度适配。

1.1-1

1.1-2

widget组件布局适配

cocos creator提供了widget组件进行界面内布局。

Widget的使用首先是指定一个Target node作为对齐的节点，默认使用父节点对齐。然后通过设置Left，Top，Right，Bottom四个参数调整节点在界面上的布局。其中，Left指的是当前节点的左边界到Target节点左边界的距离，单位可以是像素也可以是百分比，其他的三个参数以此类推。需要注意的是，当使用像素作为距离的单位时，这个距离是相对于设计分辨率而言，实际的距离依赖于屏幕的实际尺寸。例如，设置Left为667px，在iPhone X下，实际的Left距离为（667*（1125/750） = 1000.5px）。在实际使用中，需要在不同分辨率下测试，设置一个合理的数值。
这四个参数也支持在程序运行时动态的修改，在修改完相应的参数之后，需要调用widget组件的updateAlignment接口。

界面制作

在制作一个独立的界面的时候，通常第一步是创建一个充满屏幕的UI根节点，如图2.0-1所示，其它的UI子节点都是直接或者间接的相对于这个根节点进行布局。

2.0-1
接着将美术的设计图拖到根节点下，把设计图作为背景来制作界面，按照设计图给出的样式对UI节点进行布局。如图2.0-2所示，

2.0-2
在界面的制作过程中应尽量将界面按照上下左右和中间拆成不同的小模块来制作，方便布局和适配。

2.0-3