CocosCreator屏幕适配小结

1 原理

CocosCreator引擎通过CanvasWidget组件来适配不同分辨率的屏幕。

  • Canvas(画布):可以随时获得设备的实际大小并对所有渲染元素进行缩放。
  • Widget(对齐组件):能够将元素对齐父节点的不同参考位置。
  • 设计分辨率:场景制作时使用的模版分辨率。
  • 屏幕分辨率:设备运行时的屏幕显示的实际分辨率。

假设设计分辨率的宽度为w1,高度为h1;屏幕实际分辨率的宽度为w2,高度为h2。那么

  • 设计分辨率宽高比(w1/h1)小于屏幕分辨率宽高比(w2/h2) 时,说明实际屏幕更宽,为了避免屏幕左右两侧留下黑边,应该适配宽度,即把画面按宽度比值(w2/w1)进行缩放,使画面正好撑满屏幕宽度。这种情况下,屏幕画面的上下两边可能会被裁剪掉一部分。

  • 设计分辨率宽高比(w1/h1)大于屏幕分辨率宽高比(w2/h2) 时,说明实际屏幕更高,为了避免屏幕上下两边留下黑边,应该适配高度,即把画面按高度比值(h2/h1)进行缩放,使画面正好撑满屏幕高度。这种情况下,屏幕画面的左右两侧可能会被裁剪掉一部分。

2 使用

CocosCreator 3.x开始,去掉了Canvas组件中的fitWidthfitHeight属性,而改为在项目 -> 项目设置 -> 项目数据页面中配置。

  • 根据场景设计,自行选择适配高度适配宽度。一般来说,横屏游戏选择适配高度,竖屏游戏选择适配宽度
  • 如果适配高度适配宽度同时开启,则无论在任何屏幕上,都按照屏幕分辨率的较小一维来计算缩放比例,使所有内容都能显示,但屏幕上可能出现黑边。
  • 如果适配高度适配宽度都不开启,则根据屏幕宽高比,自动选择适配高度适配宽度

之后通过Widget组件调整UI元素的位置,保证UI元素出现在屏幕可见范围内。

欢迎关注微信公众号“楚游香”,获取更多文章和交流。

标签:

发表回复

您的电子邮箱地址不会被公开。