笔记

creator 适配屏幕旋转自动横竖屏

Cocos Creator, 笔记

creator 适配屏幕旋转自动横竖屏

  1. 项目 - 项目设置 - 项目预览

去掉勾选“适配屏幕高度”和“适配屏幕宽度”

  1. 项目 - 构建发布

设备方向选择“Auto”

  1. 修改需要横竖都适配的Scene
  • Canvas

修改 Design Resolution：

1
如果原来是竖屏 720 * 1280，则需要改成 1280 * 1280，以最大宽高设置

Fit Height 和 Fit Width 都不要勾选

  • Main Camera

其他节点都不要放到 Main Camera 节点里，都在 Canvas 节点里

  • Canvas 下主干父节点添加 Widget 节点，勾选 Horizontal Center 和 Vertical Center

Align Mode 选择 ON_WINDOW_RESIZE

  1. 代码监听屏幕是否旋转
1
2
3
4
5
6
7
8
9
cc.view.setResizeCallback(() => {
    var rect = cc.game.canvas.getBoundingClientRect();
        var landscape = false; // 判断是否是横屏
        if(rect.width > rect.height){
            landscape = true;
        }
        // 根据横竖屏调整节点的位置适配等
        ......
});
  1. 注意

使用这种方式适配，在使用 Widget 时，其中的 Top，Bottom等适配都是以最大位置适配的，如 1280 为Top和Right。

所以最好以 Horizontal Center 和 Vertical Center 来调整适配