首页 - 神途资讯 > CocosCreator H5小游戏屏幕适配解决方案

CocosCreator H5小游戏屏幕适配解决方案

发布于:2024-09-07 作者:admin 阅读:93

基础概念 1 物理分辨率

物理分辨率简单理解就是硬件所支持的分辨率,以像素(px)为单位,所以我们称这个硬件上的每一个像素点为物理像素,也叫设备像素。将屏幕实际存在的像素以行数 × 列数这样的数学表达方式体现出来,就是物理分辨率。比如 的物理分辨率是1334 × 750 。而我们进行屏幕适配时,表达方式会有所不同,会以屏幕宽的像素数量 × 屏幕高的像素数量这样来体现。例如 在默认的竖屏状态下,物理分辨率表达为750 × 1334。横屏状态下,物理分辨率表达为1334 × 750 。所以大家需要能理解这些区别。

2 缩放因子与逻辑分辨率 2.1 缩放因子 起源

iOS绘制图形是以 point (pt)为单位,在早期的时候1 point=1 pixel。在2010年推出的开始采用 (视网膜) 屏幕显示技术 ,物理分辨率提升了4倍,此时,如果还是1pt=1px这个方案,将会导致如下图一样的显示效果。

在图1中,按 的320 × 480进行全屏设计,那在下的显示效果则如图1左侧,原来的满屏内容只占了四分之一,其余部分留空。而按分辨率 640 × 960进行全屏设计,那在的屏幕下显示效果则如图1右侧,大量内容超出可显示区。

很显然,apple不会让图1的事情发生。实际上,的缩放因子为@2X,也就是在这个机型上1个point 用2×2的像素矩阵来表示,如图2中效果所示,完美解决图1中可能发生的问题。

随着时代的发展,后续的机型物理分辨率也越来越高,1个point占用的物理像素也越来越多,见下图。

缩放因子的概念在安卓机型中也适用。

2.2 逻辑分辨率

逻辑分辨率简单理解就是软件所使用的分辨率,我们设计适配全靠他,也是用乘法数学表达方式来体现。为了更好的理解这个概念,我们先看一组数据表格。

通过图4的数据,我们可以看出,随着手机设备的更新,物理分辨率已经越来越高,如果我们按物理分辨率来进行屏幕适配,先不算安卓,光的机型就很碎片化了,还好,在缩放因子的作用下,我们看到逻辑分辨率基本上变化不大,所以我们后面讲的引擎适配,主要是针对逻辑分辨率进行适配。

3 设计宽高

设计宽高是开发者在设计产品时采用的宽高,面对众多机型,选择哪个作为设计宽高,也是一些新手开发者有点迷茫的,这里简单多说几句。

设计宽高,首先要考虑的是优先兼容多数的常用屏幕比例。通过上面图5的表格,我们看到去掉过时的机型,基本上手机屏幕就分两类,一类是宽高比约为1:1.78的非全面屏手机,另一类是宽高比约为1:2.17全面屏手机。各品牌的安卓机型屏幕比例,大多也是这两种或者接近这两种。

基于性能优先的原则(比如:游戏包大小),通常开发者都会选择分辨率小一些的作为主效果设计,然后向其它比例屏幕进行适配。比如:常见的宽750高1334或宽720高1280。

以上宽高描述是指竖屏模式设计,横屏需反过来。

适配方案 1 竖屏游戏

在界面中,选中节点,勾选Fit Width选项。同时,画布内的所有节点通过组件进行相对布局即可(如:所有节点都选择底部/顶部对齐)。

2 横屏游戏

在界面中,选中节点,勾选Fit 选项。同时,画布内的所有节点通过组件进行相对布局即可(如:所有节点都选择左部/右部对齐)。

至此,完毕。以上所述不作为官方适配定义,仅个人经验而谈。 V2.1.2

屏幕适配可以参考这篇帖子:

二维码

扫一扫关注我们

版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容,请告知我们,本站将立刻删除涉嫌侵权内容。

相关文章