官方文档-多分辨率适配方案:

//概念解释//

Canvas(画布)

组件随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放

Widget(对齐挂件)

放置在渲染元素上,能够根据需要将元素对齐父节点的不同参考位置

设计分辨率

游戏在设计制作时场景的分辨率,即Canvas中的Design Resolution 属性,也就是图中紫色边框的区域

qml获取屏幕分辨率_获取屏幕分辨率_mfc 获取屏幕分辨率

屏幕分辨率

顾名思义,就是设备上屏幕的分辨率

//Canvas//

Canvas(画布)组件能够随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。场景中的 Canvas 同时只能有一个,建议所有 UI 和可渲染元素都设置为 Canvas 的子节点。

获取屏幕分辨率_mfc 获取屏幕分辨率_qml获取屏幕分辨率

选项:

Design Resolution:设计分辨率(内容生产者在制作场景时使用的分辨率蓝本)

Fit Height:适配高度(设计分辨率的高度自动撑满屏幕高度)

Fit Width:适配宽度(设计分辨率的宽度自动撑满屏幕宽度)

// 常见设计分辨率//

通常设计分辨率宽高比采用当前主流设备屏幕分辨率的宽高比,比如:

iPhone7Plus

屏幕分辨率:1920*1080

宽高比:16:9

设计分辨率:1280*720 或者 1334*750

iPhoneX

屏幕分辨率:2436*1125

宽高比:2:1

设计分辨率:1624*750

iPad

屏幕分辨率:2048*1536

宽高比:4:3

设计分辨率:1624*1218

当然,实际开发中并不是必须要按照上述分辨率来进行设计,可根据项目需求来决定,但还是保持同宽高比比较妥当

//分辨率适配//

Canvas 在做屏幕适配时,只会对整个游戏的画面进行缩放,并不会修改所在节点的尺寸,节点尺寸将默认跟设计分辨率保持一致

理想状态下,游戏设计分辨率的宽高比和屏幕分辨率的宽高比相同,就可以完美的适配设备屏幕:

游戏画面缩放比例 =屏幕分辨率 /设计分辨率

但越来越多异形屏的出现,甚至有时需要同时适配 phone 和 pad,理想离我们越来越遥远······

·下面来看下几种适配方案,具体取舍,需要根据项目需求来定夺

这里以设计分辨率:1334*750 为例,介绍下几种适配方案

Canvas 设计分辨率:1334*750

获取屏幕分辨率_mfc 获取屏幕分辨率_qml获取屏幕分辨率

图片尺寸:1334*750

qml获取屏幕分辨率_获取屏幕分辨率_mfc 获取屏幕分辨率

为了更方便直观,我们在场景里添加一些位置标识

mfc 获取屏幕分辨率_qml获取屏幕分辨率_获取屏幕分辨率

1只勾选 Fit Height(高度适配)

适配方法:设计分辨率的高度自动撑满屏幕高度

mfc 获取屏幕分辨率_获取屏幕分辨率_qml获取屏幕分辨率

游戏画面缩放比例=屏幕分辨率高度 /设计分辨率高度

在 iPhone7 Plus 上的表现

qml获取屏幕分辨率_获取屏幕分辨率_mfc 获取屏幕分辨率

完美适配,图片完全显示

分析:

游戏画面缩放比例 =1080 /750 =1.44

游戏画面缩放后的宽度 =1334*1.44=1920

1920= 1920(屏幕分辨率宽度)

宽度恰好等于屏幕的宽度,所以完全显示

在 iPhoneX 上的表现

mfc 获取屏幕分辨率_获取屏幕分辨率_qml获取屏幕分辨率

图片全部显示,但左右会有黑边,也就是横向没有铺满屏幕

分析:

游戏画面缩放比例=1125/750=1.5

qml获取屏幕分辨率_mfc 获取屏幕分辨率_获取屏幕分辨率

游戏画面缩放后的宽度 =1334 *1.5 =2001

2001 2048(屏幕分辨率宽度)

设计分辨率缩放后的宽度 > 屏幕分辨率的宽度,所以无法完全显示

2只勾选 Fit Width(宽度适配)

适配方法:设计分辨率的宽度自动撑满屏幕宽度

qml获取屏幕分辨率_获取屏幕分辨率_mfc 获取屏幕分辨率

游戏画面缩放比例=屏幕分辨率宽度 /设计分辨率宽度

其原理同Fit Height一样,此处不再赘述

3同时勾选 Fit Height和Fit Width

适配方法:完整显示设计分辨率

mfc 获取屏幕分辨率_获取屏幕分辨率_qml获取屏幕分辨率

在 iPhone7Plus上依然是完美适配,原理同Fit Height

在 iPhoneX上的表现和Fit Height 的表现一样,但原理不一样

分析:

Fit Height:

游戏画面缩放比例=1125/750=1.5

游戏画面缩放后的宽度 =1334 *1.5 =2001

2001 屏幕分辨率的高度获取屏幕分辨率,无法完全显示

因为需要完整的显示出设计分辨率,所以采用缩放比例较小的方式获取屏幕分辨率,即:

游戏画面缩放比例=Fit Height = 1.5

在 ipad 上的表现

qml获取屏幕分辨率_获取屏幕分辨率_mfc 获取屏幕分辨率

图片完全显示,但上下会有黑边,也就是纵向没有铺满屏幕

分析:

Fit Height:

游戏画面缩放比例=1536/750=2

游戏画面缩放后的宽度 =1334 *2=2668

2668>2048(屏幕分辨率宽度)

设计分辨率缩放后的宽度 >屏幕分辨率的宽度,无法完全显示

Fit Width:

游戏画面缩放比例=2048/ 1334 =1.5

游戏画面缩放后的高度=750*1.5=1125

1125

———END———
限 时 特 惠: 本站每日持续更新海量各大内部创业教程,一年会员只需98元,全站资源免费下载 点击网站首页每天更新
站 长 微 信: aiwo51889