【包教包会】零代码实现CocosCreator屏幕自适配

Creator 2.x 扩展插件
#1

​分享一个屏幕自适配的组件SceneAdapter。

一、效果演示

浏览器环境下的适配效果。

0

1
1453×744 3.7 MB

真机版本不允许出现黑边、不允许子节点缩放比例失调，因此SceneAdapter确保

Canvas尺寸 = 屏幕尺寸

至于每个子节点，需要根据项目实际需求去单独适配。

2
2391×699 3.83 MB

3
3391×699 2.69 MB

二、如何获取

1、https://github.com/szrpf/SceneAdapterDemo/archive/refs/heads/master.zip

2、解压，导入cocos creator（版本2.4.11），可运行演示Demo。

3、浏览器
3

运行后按F12，点Elements左边的按钮切换到手机模式，再F5刷新页面可以改变窗口大小查看效果。

注意！切换到手机模式后一定要刷新一次页面才会生效。
5

4、模拟器

直接改变模拟器窗口大小，就可以查看适配效果。

5、Web正式版
4

打包web-mobile版本，部署到服务器，可通过PC或手机浏览器打开url查看适配效果。

三、如何在自己项目中使用场景适配器

1、复制SceneAdapter.ts文件到自己的项目代码目录。

0

2、给每个场景（.fire文件）的根节点添加SceneAdapter组件

1

四、结束语

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

包教包会，你会了吗？

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

GitHub地址：szrpf (Bruce) · GitHub

EMail地址：27185709@qq.com

推荐链接：

1、【包教包会】对CocosCreator拖尾组件MotionStreak做了全面优化

2、【包教包会】分享一个CocosCreator实用组件EffectBar，炫酷的特效进度条

3、【包教包会】分享一个CocosCreator组件——动作残影

4、【包教包会】对CocosCreator拖尾组件MotionStreak做了全面优化

5、【包教包会】CocosCreator怎么用namespace实现类似于cc的全局变量

8赞
【包教包会】分享一个支持合批的ccLabel
creator 2.4.11屏幕适配求助
#2

赞

#3

挺好的，适合新手

#4

不留黑边的模式 看起来是背景适配变形 子ui变形位置适配的样子

1赞
#5

对啊，真机版本要对子ui做单独适配才能达到最佳效果。
因为真机不能像浏览器一样留黑边，也不能简单粗暴的整体缩放。

1赞
#6

其实也可以 看需求 愿意留黑边都可以这么做

#7
  1. ui变形这种方式不太合理，一般不会使用这种方式处理
  2. 留黑边可以通过:大背景+widget解决
    我的一般方式【不改变node本身的大小】
    3.x 
            const visibleSize = view.getVisibleSize();
            const designSize = view.getDesignResolutionSize();
            if (visibleSize.height / visibleSize.width > designSize.height / designSize.width) { // 长屏
                view.setDesignResolutionSize(designSize.width, designSize.height, ResolutionPolicy.FIXED_WIDTH);
            } else { // 宽屏
                view.setDesignResolutionSize(designSize.width, designSize.height, ResolutionPolicy.FIXED_HEIGHT);
            }

2.x

        const designResolution = cc.view.getDesignResolutionSize();
        const canvas = this.node.getComponent(cc.Canvas);
        if (cc.winSize.width / cc.winSize.height < designResolution.width / designResolution.height) {
            canvas.fitWidth = true;
            canvas.fitHeight = false;
        } else {
            canvas.fitWidth = false;
            canvas.fitHeight = true;
        }
2赞
#8

嗯嗯，愿意留黑边，那就可以跟浏览器一样适配了，具体看项目需求

#9

浏览器环境是等比缩放，留白边，不存在ui变形
真机环境要想完美适配，没有捷径，只能对子ui分别做适配处理，但确保Canvas所在的根节点尺寸与屏幕尺寸一致是前提。

#10

想问下用了刚才2.x的方法会出现这种情况 web-moblie尺寸更改点击事件无效 - Creator 2.x - Cocos中文社区 要怎么处理呀 :joy:

#11

还挺有空回复的 最近没被pua啦 没人说你这不行那不行了

#12

能不能不要这么恶心

#13

尺寸更改，点击事件完全不会受影响
4

#14

多谢，估计我用错了，我再试试

#15

加油吧 经济捆绑人生

#16

可怜之人必有可恨之处

#17

可怜的人 可恨的房贷

#19

请问怎么不留黑边呢？我用你的改成了3.7版本的，然后适配不了，背景两边会有黑边

image
image1102×865 47.8 KB

#20

打印一下sys.isMobile和view.getVisibleSize()的值看看

#21

image image image
您好，我是适应宽度的，请问怎么实现从底部开始渲染，就是对方知道适配这个问题，但是不是想从中间渲染，而是从底部开始渲染？