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 来调整适配