简单说下之前我使用的适配方案,也让大家了解下发展史,后面会贴出具体的操作设置,以及lua代码

2013年左右

那基本属于很早期cocos了,那个时候我经历过3种关于适配的方法

1. 纯代码写界面,刚入行的时候,算是纯苦力输出了
2. 使用cocosbuild,布局ui,虽然少打了不少UI代码,但还是需要手动调整ui
3. 使用cocosstudio,同一个场景,导出3份配置文件,根据不同宽高比,代码调用不同配置文件,进行满屏缩放

重点说下第三点:

当时主流机型主要有以下3种比例:

• 1.333

• 1.5

• 1.777

因为主流只有这几个比例,所以部分小众分辨率就没有考虑,如果不满足上面比例,就使用最接近比例的配置文件,进行不等比占满屏缩放,弊端就是那些小众的分辨率机型就有拉伸的情况.

回到2020年

做适配的时候,我第一件事就是去找了下当前主流机型的宽高比,发现多了个比例:

• 2.165  2436 x 1125(iphone X)

本想考虑之前的适配方法,但是因为近几年用的unity,收到启发,所以特意翻阅了下资料,发现cocos出了两个新的适配方案:FIXED_HEIGHT  和 FIXED_WIDTH .  而且cocosstudio 也出了个停靠的功能,如下图:

那适配起来简直不要太简单.(其中不懂的可留言,或自行翻阅资料)

解决方案

1.思路

我大概看了下主流机型的分辨率,1080p是标配了

(排除掉 ipad pro ,这个分辨率大的恐怖,所以不考虑图片在pro上清晰度的问题,如果是有针对性的app,可单独出图)

所以我针对不同比例,拿了几个适中的分辨率比例:

• 1.333 2048 x 1536
• 1.5   1920 x 1280
• 1.777 1920 x 1080
• 2.165 2436 x 1125(iphone X)

以横屏游戏为例:决定使用的设计分辨率为: 1920 x 1280,适配方案:FIXED_HEIGHT ,因为针对不通比例,这个宽高值相对适中,不会出现图片,也就是说美术按这个分辨率来出图,然后你的cocosstudio中的界面使用这个尺寸来拼UI,唯一要注意的就是背景图. 这个背景图一定要做到最大尺寸上铺满,可以做缩放,平铺,或者超大尺寸.

2.CocosStudio设置

场景文件的第一个控件使用,剩下的都是这个容器的child,然后UI控件都是使用停靠关系来设置

这里为了配合代码,这个layout要固定名字:root

我先贴下上面那4种比例分变率的实际效果:

一:1920x1080  1.777

二:2048x1530 1.3333

三:2960x1400  2.114(与iphonex相近)

四:960x640 1.5

 

3.代码

1.config.lua配置

-- design resolution
CONFIG_SCREEN_WIDTH  = 1920
CONFIG_SCREEN_HEIGHT = 1280

-- auto scale mode
CONFIG_SCREEN_AUTOSCALE = "FIXED_HEIGHT"

2.加载使用的公共方法:

--获取csb场景
XXGetRoot = function(name,children,parent)
	local path = XXConfig.CSBPath .. name .. ".csb"
	local csbNode = cc.CSLoader:createNode(path)
	local root = ccui.Helper:seekWidgetByName(csbNode,"root")
	csbNode.XXChildren = {}
	csbNode.XXChildren["root"] = root
	for _,key in ipairs(children) do
		local child = ccui.Helper:seekWidgetByName(csbNode,key)
		if child ~= nil then
			csbNode.XXChildren[key] = child
		else
			XXLogError("csb:" .. name .. ",child is not find <".. key ..">")
		end
	end
	csbNode:addTo(parent)
	root:setContentSize(display.width,display.height)
	ccui.Helper:doLayout(root)
	return csbNode
end

 

一共三个参数:

• name:csb的名字
• children:你需要获取到实例的控件的名字,需要在cocosstudio设置
• parent:父节点

大概流程就是通过引擎去调整我的设计分辨率,然后代码设置我们root节点的大小,跟设计分辨率相同

重点就是这个ccui.Helper:doLayout(root) ,这个会根据你当前父节点的大小,重新布局你设置的那些停靠位置.

3.代码的调用

function testV1View:onCreate()
	local root = XXGetRoot("sizeTest",{"Text_1"},self)
	root.XXChildren["Text_1"]:setString("bbbbbbbbb")
end

我找了个label设置name为"Text_1"

使用的时候就是第一行的代码就可以将ui加载出来了,这里在结合我之前写的mvc,剩下的工作就是设置按钮回调啊,update的数值更新了.

4.其他

目前只是根据经验做出来的效果,还没有进行实际开发,后续如果遇到问题,我会回来更新解决方案的.

还有个要说下,目前这些都只是UI相关的东西,中间区域其实是游戏性的内容,要根据不同类型游戏做不同处理,如果你有问题可以留言,我尽量解答.

2020年5月6日02:09:52...  

(¦3[▓▓] 晚安