【包教包会】CocosCreator3.x——ScreenAdapter屏幕适配、横竖屏翻转

一、效果演示

二、如何获取

1、https://gitee.com/szrpf/ScreenAdapter3.x

2、解压,导入cocos creator(版本3.8.2),可以直接运行Demo演示

三、算法思路

1、横竖屏自动翻转

Step 1、比较设计分辨率的宽高,获取设备横竖屏

Step 2、比较页面节点宽高,获取页面横竖屏

Step 3、如果页面横竖屏 !== 设备横竖屏,则把摄像机旋转90度实现翻转

2、分辨率自适配

分为 拉伸全屏 和 等比缩放 两种模式。

拉伸全屏:用页面填满设备窗口,会改变页面宽高比

下图绿色矩形代表设备窗口,左边红框是页面,右边是适配后拉伸填满全屏的效果

image

等比缩放:

页面宽高比 < 设备窗口宽高比,则按高度对齐,宽度等比缩放

image

页面宽高比 > 设备窗口宽高比,则按宽度对齐,高度等比缩放

image

3、位置自动居中

计算页面坐标,保持在设备窗口完全居中

4、动态适配

当设备窗口发生改变时,以上3个适配会动态更新。

ScreenAdapter1

三、如何导入自己项目

1、将Demo中ScreenAdapter.ts复制到自己项目assets目录下

2、如果是多场景项目,在每个场景中需要新建一个页面根节点,所有页面内容都是该节点的子节点,将ScreenAdapter挂到根节点。
如果是单场景多预制体项目,将ScreenAdapter挂到页面预制体的根节点

四、结束语

有不明白的,或者优化建议,可以留言评论,或给我发邮件!

包教包会,你会了吗?

创作不易,请多留言讨论,这样我会有动力发更多好玩的东西上来。

Gitee地址:https://gitee.com/szrpf

EMail地址:27185709@qq.com

推荐链接:
1、CocosCreator3.x实战案例——100行代码的追踪导弹Demo

2、2D图片实现3D透视效果(支持3.x、支持原生、可合批)

3、CocosCreator3.x框架——音频声音模块(无需导入、无需常驻节点)

4、2D图片实现3D透视效果(支持3.x、支持原生、可合批)

5、CocosCreator3.x图片和文字渐变色(支持3.x、支持原生、可合批)

6、CocosCreator3.x——拖尾(支持3.x、支持原生、可合批、高性能)

mi

6赞

大佬又更新啦 :+1:

超级赞 :crossed_fingers:

我要把你的绝活都学会

效果真干货

这个有点难啊小兄弟 :laughing:

有个3.x的问题想咨询你。就是3.x挖洞shader。该怎么屏幕适配。

这两个都不是一回事吧,你挖洞肯定要适配屏幕宽高来做,或者挖洞区域大小不变屏幕做成滚屏

新版已上传:
1、Widget会导致自动适配失效。
所以如果页面节点挂了Widget,ScreenAdapter会先禁用它。

2、给ScreenAdapter加了一个自动旋转的开关(默认开启)。
类似于手机设置里的自动旋转开关

4赞

大佬3.x怎么做挖洞的

白玉无冰还是皮皮来着,有个帖子


拿这个改

这个东西其实没什么用,翻转屏幕的时候,修改布局就好了。

3.x不知道行不行

可以,需要适配

牛逼,没有修改设计分辨率了也没有调整宽高适配,就做到了适配。。。。