Cocos creator教程 屏幕适配的3个小妙招

引言

cocos creator是什么?

Cocos Creator 是触控科技旗下的产品,以内容创作为核心的游戏开发工具,在 Cocos2d-x 基础上实现了彻底脚本化、组件化和数据驱动等特点。

这里给大家推荐一个cocos creator学习交流群

屏幕适配是cocos creator面试题中必问的一个题目,今天给大家说说怎么样做屏幕适配。

1:  屏幕适配的2个核心的配置

    a: 设计分辨率: 美术设计资源时候的分辨率, 也是我们所有资源的参考分辨率,我们就是基于这个分辨率来适配到其它不同的手机分辨率上的;

    b:  适配策略:  固定高度/固定宽度;

设计分辨率大家都好理解,那么什么是适配策略呢?

   假设我们以设计分辨率是 960x640为例,我们要适配到 1920x1080上面,  大家会发现,这个怎么适配啊? 960x640----> 1920x1080,高度不一样,宽度不一样,有两个不同的纬度需要适配,这样的话处理起来有一些难度。游戏引擎就想了一个办法,我先在一个纬度保持一致,然后在另外一个纬度来进行适配; 那到底是选哪个纬度呢?如果是高度一致,那么就是固定高度,如果是宽度一致,那么就是固定宽度。这个就是固定高度与固定宽度的由来。

    固定高度: 960x640, 先做好逻辑分辨率((1920 * 640 / 1080)x 640)适配,  然后,我们在乘以一个比例scale(1080/640), 到1920x1080上;

   固定宽度: 960x640, 先做好逻辑分辨率适配 (960 x (1080 * 960 / 1920)),  然后我们在剩一个比例scale(1920/960), 到 1920x1080上;

 

游戏引擎处理的大小,坐标,都是逻辑大小,游戏窗口的逻辑大小就是我们固定高度or固定宽度策略算出来以后的分辨率;

所以我们在代码里面的大小位置,都是基于逻辑分辨率的,在最终绘制的时候,大小,位置,都会乘以到目标像素分辨率锁固定的比例scale;

比如 100 * 100, 固定高度, 到 1920x1080后像素大小是  (100x100) * 1080/640, 这样我们最终就适配到 1920x1080上了;

 

 

妙招1: 停靠点

一个纬度和设计是一致的,我们只要考虑另外一个纬度的适配,在另外一个纬度的范围内,把设计里面的主要内容都摆布进来。这个时候就会出现相对的几个点,比如我的类型是基于中心的,基于上面的,基于下面的…  所有在适配的时候,我们一般会做几个标志的参考点,如图红色点点

 

 

 

核心原理就是,不管你的屏幕大小怎么变,我只要动态的根据屏幕大小来调整参考点的位置,这样,相对于参考点的元素也会跟着移动,一般适配我们都是这样来做的,那这个适配我们很多都会有组件来完成,例如Widget等。你上边的logo,无论屏幕怎么变,都是上面的,下边的,无论屏幕怎么变都是下面的。

 

 

妙招2: 内容缩放

即使这样,因为一个纬度毕竟不同,有可能在这个纬度上,内容放不下,粘到一起了,我们还是的要对内容的大小来做一些调整,  可以根据逻辑分辨率,来做一些内容上的缩放,能让这些内容排下;

 

秒招3: 大小调整

有一些UI控件,是区域性的,比如滚动条等,我们希望适配后,区域大小也要随屏幕的变化而变化,那么这个时候,可以设置区域相对于边界的偏移, 如图:

 

 

这样边界变了,大小也跟着变了。

 

其实搞懂了适配的核心原理,一点都不难,下次cocos creator面试题你会回答了么?

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值