Cocos Creator 多分辨率完美适配系列-6(刘海屏适配
2019-02-24 本文已影响178人
天煞魔猎手
本系列教程指引:
1. 策略
- 策划时,尽可能不往屏幕上方放置重要的信息
- 如果一定要在屏幕上方放置重要信息
2.1 可以寻找市面上不同刘海屏的尺寸,记录起来尺寸,根据不同机型判断实际可视尺寸
2.2 也可以根据屏幕宽高比进行适配,如宽高比小于9:16的,一般为窄屏手机,可以适当在内容区域上距离上方留一定空白
2.3 巧用不同平台的API(以下方微信小游戏为例)
2. 微信小游戏适配
https://developers.weixin.qq.com/minigame/dev/api/wx.getMenuButtonBoundingClientRect.html
微信小游戏有官方API可以获取到右上方菜单按钮坐标,可以以此坐标作为内容区域最上方的内边距
- 需要注意 微信小游戏坐标系和 Cocos Creator 坐标系是不同的(详见 官方文档),微信小游戏是标准坐标系,Cocos Creator 是笛卡尔右手坐标系,需要适当转换一下
- 需要注意 SHOW ALL 模式适配,假设返回的是 10px ,并不一定等于设计分辨率下的10px,可以详见「内容适配第3节」
3. 章节说明
大半夜的,本章写得比较赶,后续会完善一下,激活一下作者吧~

本系列教程指引: