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