CocosWEB前端开发技术杂谈

Cocos Creator 多分辨率完美适配系列-2(部署验证设

2019-02-24  本文已影响182人  天煞魔猎手

本系列教程指引:

  1. Cocos Creator 多分辨率完美适配系列-1(现状与最终效果)
  2. Cocos Creator 多分辨率完美适配系列-2(部署验证设置)
  3. Cocos Creator 多分辨率完美适配系列-3(背景适配实现)
  4. Cocos Creator 多分辨率完美适配系列-4(内容适配实现)
  5. Cocos Creator 多分辨率完美适配系列-5(贴边栏动画实现)
  6. Cocos Creator 多分辨率完美适配系列-6(刘海屏适配)
  7. Cocos Creator 多分辨率完美适配系列-7(封装库使用)

1. 设置多种分辨率

在正式开始之前,我们可能还需要完成一个前置步骤,也是很重要的一步——设置各种各样的分辨率去验证我们当前方案是否能完美适配

Cocos Creator 已经帮我们内置了部分手机的分辨率设置,比如我们运行游戏在网页上进行调试时,可以在浏览器左上角上可以选择不同机型以作为预览的分辨率

Multi-resolution choice

但是,内置的部分机型的分辨率并不足以完成我们多分辨率适配的测试,既然我们要做多分辨率测试,那么我们可能需要极端一点的,比如:100x100,200x400等诸如此类分辨率的作为测试用例参考,那么我们应该怎么设置呢?

Cocos Creator 网页预览模板在运行前会加载 boot.js 文件,在这份文件中,我们可以定义我们期望的设计分辨率,以下为 boot.js 文件在不同平台上的路径

打开上述路径的 boot.js 文件,在 devices 中添加下面我们期望的分辨率内容即可:

比如,填入下面这份参考的分辨率

{ name: 'Apple iPhone X/XS', width: 375, height: 812, ratio: 3 },
{ name: 'Apple iPhone XS Max', width: 414, height: 896, ratio: 3 },
{ name: 'Apple iPhone XR', width: 414, height: 896, ratio: 2 },
{ name: 'MX4', width: 576, height: 960 , ratio: 2 },

填好后,大概这样子

boot.js

然后刷新我们的游戏在浏览器中的页面,就可以在左上角的机型选择中找到我们刚刚添加的几个机型了

result

了解和上面这些操作之后,我们以后就可以随时添加不同分辨率了。

1.1 疑问

Q1:机型分辨率怎么查?

可以自行上该机型官网查询该机型参数,得到实际分辨率

Q2:ratio 是什么意思?

相当于分辨率比率,比如: 1080x1920 的分辨率可以写成

{ name: 'ratio 1', width: 1080, height: 1920 , ratio: 1 },
{ name: 'ratio 2', width: 540, height: 960 , ratio: 2 },
{ name: 'ratio 3', width: 360, height: 640 , ratio: 3 },

以上写法都是等价的,皆都代表实际分辨率为 1080x1920 。那么既然都是表示一样的分辨率,那么为什么还存在ratio这个参数呢,这个参数的意义在哪里呢?

我们先来看一组直观的实际运行结果,同一个场景对应上面3个分辨率设置:

ratio test

可以看到 ratio 1 预览分辨率太大,右方和下方都出现滚动条了,而 radio 2 和 radio 3 则不会。到这里,相信大家已经对 ratio 有一定概念

配合width,height参数,我们整理一下,用文字解释归纳一下:

当前设备的宽高如下:

2. 设计我们的测试分辨率

完成上一节的阅读之后,相信你已经了解如何设置多分辨率预览模式。

为了支持我们的多分辨率完美适配,我们将以 720x1280(9:16) 的分辨率作为设计分辨率,同时设置下面4组分辨率去作为我们的测试分辨率,去模拟实际情况下,有可能出现的不同宽高比。

{ name: '720x1280', width: 360, height: 640, ratio: 2 },
{ name: '720x1280', width: 360, height: 640, ratio: 2 },
{ name: '640x1280', width: 320, height: 640, ratio: 2 },
{ name: '800x1280', width: 400, height: 640, ratio: 2 },
{ name: '720x1360', width: 360, height: 680, ratio: 2 },
{ name: '720x1200', width: 360, height: 600, ratio: 2 },

至此,本章完毕。

3. 进入下一个章节

本系列教程指引:

  1. Cocos Creator 多分辨率完美适配系列-1(现状与最终效果)
  2. Cocos Creator 多分辨率完美适配系列-2(部署验证设置)
  3. 👉Cocos Creator 多分辨率完美适配系列-3(背景适配实现)
  4. Cocos Creator 多分辨率完美适配系列-4(内容适配实现)
  5. Cocos Creator 多分辨率完美适配系列-5(贴边栏动画实现)
  6. Cocos Creator 多分辨率完美适配系列-6(刘海屏适配)
  7. Cocos Creator 多分辨率完美适配系列-7(封装库使用)
上一篇下一篇

猜你喜欢

热点阅读