CocosCreator简易开源框架SCL之屏幕适配

Creator 3.x
#1

适配

如果各位关注安卓或者IOS这块招聘，可能都会关注到有个基本要求是”UI适配“，可能对于做了多年的Cocos程序员而言，适配？可能觉得适配很简单！那今天的主题就是适配。

目前主流的适配方案主要有两种：拉伸适配、屏幕密度与尺寸适配。

Cocos的适配其实就是拉伸适配，也称之为百分比适配，这种适配方式

优点：

  1. 适配简单
  2. 不需要多套资源

劣势：

  1. 无法完美适配各种机型
  2. 实际效果与设计效果有差距

当然，另外一种方式的优劣基本就与此相反，此处不作为主要讨论。

PS：做为一个曾经的安卓开发人员而言，适配真的是噩梦，各种机型和奇葩分辨率，还有各种横竖屏等等。

Cocos适配模式讨论

既然是拉伸适配，无非就是宽拉伸多少，高拉伸多少，拉伸自然有两种结果：

  • 等比拉伸：当宽拉伸的比例和高拉伸的比例相同时。

  • 变形拉伸：当宽拉伸的比例和高拉伸的比例不相同时。

同时，我们要适配，其实是相对于屏幕而言的，那么拉伸造成的表现应该有：

  • 铺满屏幕

  • 有一边铺满屏幕

而不存在两边都留空隙，或者两边都超出边界。

既然我们知道了Cocos适配的基本方式，那我们来讨论下Cocos的各种模式：

  1. EXACT_FIT

变形拉伸方式，使整个内容铺满整个屏幕而内容也不超出。这种好处就是屏幕被铺盖得满满的，不好的地方就是如果屏幕比例和设计比例不一致(以下劣势皆指屏幕比例和设计比例不一致时)，就会变形，因此官方也将这种方式废弃了。

  1. NO_BORDER

此方式，对应CocosCreator的fit width/fit height都不勾选。

这种拉伸方式就是，要将屏幕铺满且不产生变形。于是，就只能按最大比例拉伸或者最小比例缩小，产生的问题就是内容超出屏幕。

  1. SHOW_ALL

此方式，对应CocosCreator的fit width/fit height都勾选上。

这种拉伸方式就是，将内容要全部显示在屏幕里，但是不能变形，于是，就只能按最小比例拉伸或最大比例缩小，产生的问题就是有黑边。

  1. FIXED_HEIGHT

此方式，对应CocosCreator的勾选fit width，不勾选fit height。

这种拉伸方式就是，不管怎么样，要将高度铺满屏幕。于是，就只能按高度的比例进行缩放，所以产生的问题就是宽度有黑边或超出屏幕。

  1. FIXED_WIDTH

此方式与FIXED_HEIGHT原理一致，所以产生的问题就是高度有黑边或超出屏幕.

我们的改良

  • 我们要的是什么？
  1. 如果能铺满宽，但是高的内容能全部展示，或者铺满高，宽的内容能全部展示。
  2. 留的黑边，可以通过大背景填充。
  3. 可以使用widget使某些控件能够对齐。
  • 分析

首先，SHOW_ALL方式，虽然看着挺符合我们需求的，但是，官方对SHOW_ALL方式进行了Canvas裁剪，造成黑边无法弥补的遗憾，所以我们没法直接拿来用，但是，我们可以借鉴一下这种思路。

即，如果宽屏我们适配高，长屏我们就适配宽。（所谓长屏和宽屏都针对设计分辨率而言的），所以我们的适配代码可以如下

if(长屏){
    适配模式 = FIXED_WIDTH;
} else {
    适配模式 = FIXED_HEIGHT;
}

至此，我们的适配就写完了。

问题

  1. 在CocosCreator3.0上，因为Canvas没法单独适配，所以会对所有Canvas生效。

  2. 这是对屏幕的适配方案，我们打出的web包，在PC端可能不能很好适配，这个时候，我们需要模拟手机的分辨率，可以看我的另外一篇文章

PC网页适配优化原理

同时，也制作了对应的插件，如有需要可以去看看

H5适配优化插件地址

系列文章

  1. CocosCreator简易开源框架SCL之白皮书
  2. CocosCreator开源框架SCL之弹框管理
  3. CocosCreator开源框架SCL之本地化存储

该框架开发的小游戏：翻棋子游戏

代码已上传到git: github / 同步镜像gitee

  • 如需2.x版本，请看CCCLibs仓库该仓库并没有整理，请自行参考

有任何建议或者疑问，可以关注作者公众号
image

2赞
CocosCreator开源框架SCL之吐司