CocosCreator H5小游戏屏幕适配解决方案
基础概念
1 物理分辨率
物理分辨率简单理解就是硬件所支持的分辨率，以像素（px）为单位，所以我们称这个硬件上的每一个像素点为物理像素，也叫设备像素。将屏幕实际存在的像素以行数 × 列数这样的数学表达方式体现出来，就是物理分辨率。比如 iPhone8 的物理分辨率是1334 × 750 。而我们进行屏幕适配时，表达方式会有所不同，会以屏幕宽的像素数量 × 屏幕高的像素数量这样来体现。例如 iPhone8在默认的竖屏状态下，物理分辨率表达为750 × 1334。横屏状态下，物理分辨率表达为1334 × 750 。所以大家需要能理解这些区别。
2 缩放因子与逻辑分辨率
2.1 缩放因子 起源
iOS绘制图形是以 point （pt）为单位，在早期的时候1 point=1 pixel。在2010年推出的iPhone4开始采用 Retina(视网膜) 屏幕显示技术 ，物理分辨率提升了4倍，此时，如果iPhone4还是1pt=1px这个方案，将会导致如下图一样的显示效果。
在图1中，按 iPhone3GS的320 × 480进行全屏设计，那在iPhone4下的显示效果则如图1左侧，原来的满屏内容只占了四分之一，其余部分留空。而按iPhone4分辨率 640 × 960进行全屏设计，那在iPhone3GS的屏幕下显示效果则如图1右侧，大量内容超出可显示区。
很显然，apple不会让图1的事情发生。实际上，iPhone4的缩放因子为@2X，也就是在这个机型上1个point 用2×2的像素矩阵来表示，如图2中效果所示，完美解决图1中可能发生的问题。
随着时代的发展，后续的机型物理分辨率也越来越高，1个point占用的物理像素也越来越多，见下图。
缩放因子的概念在安卓机型中也适用。
2.2 逻辑分辨率
逻辑分辨率简单理解就是软件所使用的分辨率，我们设计适配全靠他，也是用乘法数学表达方式来体现。为了更好的理解这个概念，我们先看一组数据表格。
通过图4的数据，我们可以看出，随着手机设备的更新，物理分辨率已经越来越高，如果我们按物理分辨率来进行屏幕适配，先不算安卓，光iPhone的机型就很碎片化了，还好，在缩放因子的作用下，我们看到逻辑分辨率基本上变化不大，所以我们后面讲的引擎适配，主要是针对逻辑分辨率进行适配。
3 设计宽高
设计宽高是开发者在设计产品时采用的宽高，面对众多机型，选择哪个作为设计宽高，也是一些新手开发者有点迷茫的，这里简单多说几句。
设计宽高，首先要考虑的是优先兼容多数的常用屏幕比例。通过上面图5的表格，我们看到去掉过时的机型，基本上手机屏幕就分两类，一类是宽高比约为1:1.78的非全面屏手机，另一类是宽高比约为1:2.17全面屏手机。各品牌的安卓机型屏幕比例，大多也是这两种或者接近这两种。
基于性能优先的原则(比如：游戏包大小)，通常开发者都会选择分辨率小一些的作为主效果设计，然后向其它比例屏幕进行适配。比如：常见的宽750高1334或宽720高1280。
以上宽高描述是指竖屏模式设计，横屏需反过来。
适配方案
1 竖屏游戏
在creator界面中，选中Canvas节点，勾选Fit Width选项。同时，画布内的所有节点通过Widget组件进行相对布局即可(如：所有节点都选择底部/顶部对齐)。
2 横屏游戏
在creator界面中，选中Canvas节点，勾选Fit Height选项。同时，画布内的所有节点通过Widget组件进行相对布局即可(如：所有节点都选择左部/右部对齐)。
至此，完毕。以上所述不作为官方适配定义，仅个人经验而谈。CocosCreator V2.1.2
iphoneX屏幕适配可以参考这篇帖子：https://blog.csdn.net/Mr_JiaTao/article/details/106410229
CocosCreator H5小游戏屏幕适配解决方案相关推荐
- 微信小游戏屏幕适配方案
首发于我的个人博客-微信小游戏屏幕适配 很久没有发文了,最近一直在研究微信小游戏,屏幕适配问题真的是哪里都存在. 无奈论坛资料及可行的解决方案还是太少,还是得靠自己. 且来看一看在微信上如何达到适配多 ...
- cocoscreator网页小游戏iphonex/xr等异面屏手机播放动画闪烁问题解决
背景 往app产品内嵌入一款H5小游戏,ios手机型号iphonexr.cocoscreator版本v2.4.2. 问题描述 小游戏,在播放animation动画的时候,整个游戏界面闪烁.在公司iph ...
- “倔驴”一个h5小游戏的实现和思考（码易直播）——总结与整理
3月23日晚上8点半(中国队火拼韩国的时候),做了一期直播分享.15年做的一个小游戏,把核心代码拿出来,现场讲写了一遍,结果后面翻车了,写错了两个地方,导致运行效果有点问题,直播边说话边写代码还真不一 ...
- 个人使用CocosCreator开发小游戏路上的一些“坑坑洼洼”
个人使用CocosCreator开发小游戏路上的一些"坑坑洼洼" 开场自白 微信小游戏 适配 一般界面弹窗节点适配 套路的需求适配 PS ps中的ps 摄像机的新手操作 tiled ...
- html5 游戏制作软件,制作h5小游戏的免费软件有哪些？
刚刚过去的618,过段时间要来临的双十一.这些个节日无一不是商家做营销的噱头,各大电商平台也不会放过这么多机会来做商品宣传的.既然人家都要做活动了,不捧场怎么能行,我们要一起做一个买买买的精致猪猪女孩 ...
- Android 系统（186）---最易懂的Android屏幕适配解决方案--总结版
最易懂的Android屏幕适配解决方案--总结版 本文参考自: Google的官方权威适配文档 郭霖:Android官方提供的支持不同屏幕大小的全部方法 Stormzhang:Android 屏幕适配 ...
- html5制作端午节游戏,意派Epub360怎么制作一个端午节H5小游戏页面？
六月已经过了三分之一,"粽子节"也马上要到了,每当这时候,又到新媒体运营人和设计师头秃的时刻,在传统的节日里,如何把传统的节日使用互联网元素表现,让更多的年轻人能够参与进来,H5这 ...
- Android开发：最全面、最易懂的Android屏幕适配解决方案
目录 Android屏幕适配解决方案.png 定义 使得某一元素在Android不同尺寸.不同分辨率的手机上具备相同的显示效果 相关重要概念 屏幕尺寸 含义:手机对角线的物理尺寸 单位:英寸(inch ...
- 不止于大西瓜，让你的 H5 小游戏一键“起飞”
近期,漫天"瓜"雨刷爆社媒,借助H5类游戏小巧轻便.易于分享的优势,一个个创意十足.与时俱进的花式合成类H5小游戏如雨后春笋般涌现,让广大网友不仅能吃瓜,还能亲手制瓜. △ 真·丢 ...
最新文章
- Flutter 配置
- 机器学习(一)——熟悉tensorflow2.0
- python的property用法_python @property的用法及含义全面解析
- python setup脚本编写
- [react] ＜div onClick={handlerClick}＞单击＜/div＞和＜div onClick={handlerClick(1)}＞单击＜/div＞有什么区别？
- 使用etop查看系统中进程信息
- 机器学习1.3--机器学习所需要的基础数学知识
- (二)为COVID-19诊断准备深度学习环境
- mysql deadlock6_mysql deadlock、Lock wait timeout解决和分析
- 为什么说只有深度思考才能让你持续赚到钱？
- 一步一步写算法（之循环和递归）（转）
- RegisterWindowMessage
- 番茄助手在VS2017中的设置
- 《批判性思维》感1.1-[信念执念断言]
- React 模板封装之基础模板 BaseTable
- python异步和进程_浅谈python异步IO,同步IO,线程与进程~
- 【博弈论】Nim游戏/Nim博弈及其异或的详细易懂理解
- dlib实现人脸识别方法
- Interpolator插值器
- 对标40亿美金Webflow，「Towify」想用无代码方式搭建小程序