CocosStudio UI编辑器（1.6.0）使用调研 （基于cocos2dx-3.2)

CocosStudio UI编辑器（1.6.0）使用调研 （基于cocos2dx-3.2)

1. 游戏使用的分辨率适配模式

核心设计区域960*640, 对于宽屏使用fix height 640, 对于方屏（如ipad)使用fix width 960, 保证任意屏幕设计分辨率至少为960*640
例如： iphone5 设计分比率为 1136*640， ipad为960*720
因此，UI需要在水平/竖直两个方向上自适应
ps: 之所以没统一采用fix height，是因为ipad在fix height 640的情况下，design width只有853, 美术设计的核心区域被压缩，难于设计且在宽屏上效果不好。

2. CocosStudio UI编辑器对于自适应的处理

2.1 官方提供的功能
在根节点上勾选“自适应分辨率”，且使用百分比坐标/尺寸。
对于UI控件的位置，是可以自适应的，但是对于需要动态调整大小的控件，如九宫格图片，百分比尺寸只能在两个方向上同时起作用，
不能只延伸一个方向，另一个方向保持不变。

而当我们想用代码去调整九宫格尺寸，在代码中取得控件的坐标并计算出合适的位置和尺寸时，发现了另外一个问题：在“自适应分辨率”情况下，用代码获得的控件坐标是和导出时使用的画布的尺寸相关的！这导致无法使用代码进行自适应的调整。

结论是：如果游戏完全不使用代码去调整控件尺寸和位置，所有的坐标和尺寸都只在编辑器中设置，官方提供的“自适应分辨率”功能是可以用的。但是实际肯定会有用代码调整的需求，所以我们不能使用这个方案。

2.2 我们使用的方案

画布使用和核心设计区域一致的固定尺寸 960*640。
保证核心区域整体处于屏幕中心，通过代码调整一些控件的位置和尺寸，在水平和竖直两个方向上做自适应调整。

例如以下代码是讲编辑器制作的UI载入，并居中显示：
local root = ccs.GUIReader:getInstance():widgetFromJsonFile("xx.json")
self:addChild(root)
root:setAnchorPoint(cc.p(0.5,0.5))
root:setPosition(cc.p(design_width/2, design_height/2))

以下代码为将全屏背景图做一个等比缩放，使得铺面全屏：
function scaleBg(bg)
    local visibleSize = cc.Director:getInstance():getVisibleSize()
    local bgSize = bg:getContentSize()
    local scalex = visibleSize.width/bgSize.width
    local scaley = visibleSize.height/bgSize.height
    local scale = scalex
    if scalex<scaley then scale = scaley end
    bg:setScale(scale)
end
注意：这相当于cocos的no border模式，因此会有部分背景图出屏，因此要根据最宽和最方的设备分辨率，计算出背景图的尺寸和核心显示区域，保证所有重要内容不出屏。


以下代码为调整上下两个九宫格长条背景图的尺寸和位置，使得宽度适应屏幕，但高度保持不变，同时调整y坐标使得图上下贴边：
    
    local bgTop = ccui.Helper:seekWidgetByName(root, "bgTop")
    local bgBottom = ccui.Helper:seekWidgetByName(root, "bgBottom")

    local dy = (design_height - 640)/2    -- 640为核心设计分辨率高度
    bgTop:setPositionY(bgTop:getPositionY()+dy)       --由于核心区域是居中的，bgTop本来就是贴核心区域的上边的，此时加上分辨率高度的差值，使其向上贴边到实际的屏幕上边
    bgBottom:setPositionY(bgBottom:getPositionY()-dy)

    -- 单方向调整九宫格图的宽度
    local function setScale9BgWidth(scale9Bg,width)
        local h = scale9Bg:getContentSize().height
        scale9Bg:setContentSize(width,h)
    end

    setScale9BgWidth(bgTop, design_width)  
    setScale9BgWidth(bgBottom, design_width)

 以下代码为手工设置一个控件居中于屏幕，由于编辑器里面锚点有问题，所以有时候必须在代码里面设置：
 local panTab = ccui.Helper:seekWidgetByName(root, "panTab")
    
 panTab:setAnchorPoint(0.5,0)
 panTab:setPositionX(design_width/2)

 总结：如果控件需要针对实际设计分辨率调整尺寸和坐标，则需要使用代码设置。虽然麻烦一些，但能达到想要的效果。
 而核心分辨率之内的控件，则可以使用编辑器摆放，可以使用绝对坐标，相对坐标（layout)，使用绝对坐标时可使用锚点和百分比，但锚点有bug下面会说。
 绝对坐标和相对坐标可混合使用，注意只有容器才支持layout，layout的好处之一是可以停靠在兄弟控件上，对于控件尺寸可变的布局比较方便。



3 使用UI编辑器对于资源的处理

如果一开始就打算使用编辑器，则可以让美术出散图，使用编辑器导出plist。
如果已经有了美术做好的plist和单张背景，则要把做好的plist资源和图片资源拷贝到编辑器的资源目录中，并在导出时要选择使用小图导出，编辑器还是会将小图导出到export目录，但这些图和plist是和之前一样的，因此不需要再拷贝过去，只需要把导出的json拷贝到游戏资源目录。



4 UI编辑器的一些坑

最大的坑：游戏中以原点为原点，而编辑器中以锚点为原点。这导致当编辑器中锚点不在(0,0)时，编辑器的效果和游戏中是不一样的。我们只能尽量避免使用非(0,0)的锚点，而一定要使用时，只能牺牲编辑器的预览效果，以游戏效果为准。（即在编辑器中位置看起来是错的）

列表不刷新：各种列表都有可能不刷新，比如资源列表，控件列表，停靠列表，这种直接无视或多刷几次。

控件列表里面调整控件顺序后，画布上的控件绘制顺序有可能不改变。必须关闭项目再次打开才行。

颜色选取不支持吸色，这不算是坑，但是应该有。

5 UI编辑器的一些优点

支持跨画布的复制粘贴。这个当然应该是必备的。
cocos2d-x 3.x的Widget控件还是比较好用的，且编辑器里面支持的都是Widget控件，并不支持以前的node控件。
layout布局在某些局部panel里面，有时很好用。
lua绑定比以前要方便了，使用seekWidgetByName可以很方便的查找到控件。


5 总结

编辑器虽然有一些坑，但是可以绕过。虽然要写一些代码去做自适应，但是并不是很多。总体还是可以用的。
使用编辑器可以有效减少代码量。