Cocos屏幕适配方案解析

Cocos屏幕适配方案解析,第1张

概述昨天在新公司上班,然后和美术讨论cocos分辨率的问题,我居然解释不清楚,深感惭愧,一直以来的思维定势,认为就是那样,或者说我平常就是那么做的,这已经最好的策略,但这真的是一种极为可怕的思想,很容易让人固步自封不能进步。很多时候,我知道那种做就行了,然后就不愿意进行深入的探究,其实知道其所以然,然后再去做的时候才有可能得到更好的方案,万一搞出个完美的方案呢,虽然概率很低。万一得到一点其他方面的长进

昨天在新公司上班,然后和美术讨论cocos分辨率的问题,我居然解释不清楚,深感惭愧,一直以来的思维定势,认为就是那样,或者说我平常就是那么做的,这已经最好的策略,但这真的是一种极为可怕的思想,很容易让人固步自封不能进步。很多时候,我知道那种做就行了,然后就不愿意进行深入的探究,其实知道其所以然,然后再去做的时候才有可能得到更好的方案,万一搞出个完美的方案呢,虽然概率很低。万一得到一点其他方面的长进呢?这是肯定的。

分辨率概念

通常我们会将分辨率分为2种,设计分辨率以及屏幕分辨率。
设计分辨率可以理解为美术在ui设计的时候的原始分辨率
屏幕分辨率可以理解为手机的实际屏幕分辨率,不过千万不要和屏幕大小混为一谈,比方早期的iPhone3GS的屏幕分辨率是320480(PPI=163),iPhone4中,同样大小(3.5 inch)的屏幕采用了Retina显示技术,横、纵向方向像素密度都被放大到2倍,像素分辨率提高到(320x2)x(480x2)= 960x640(PPI=326),两个屏幕一样大的手机,但是分辨率是不一样的,如果把320480的图片放到iPhone3GS正好是全屏,而在iPhone4中只占据了屏幕的1/4.如果要将图片在iPhone4也正好看起来全屏的话,需要将图片放大4倍。不错,游戏里的适配就是这么干的。对于长宽比一样的屏幕,只要简单的缩放就可以了。

常用的适配方案

1.ShowAll

等比例拉伸,保证宽度和高度都全部显示,这种情况当设计分辨率和屏幕分辨率不同的时候宽或者高必然会有黑边

2.ExactFit

宽高非等比拉伸,这样就会导致变形

3.Noborder

等比例拉伸,和showall模式是一样的,只是拉伸的因子是与showall相反,是根据拉伸因子比较大的来的,所以肯定会有长度或者宽度被截

4.FixedHeight

等比例拉伸,理解上来说是固定高度,实际上只是将拉伸因子固定以高度比来表示而已,一般来说竖屏的通常会采用这种方式,

5.FixeDWIDth

等比例拉伸,以宽度比作为拉伸因子,一般横版会采用这种方式

其实一开始只有前面3种可选的模式,然后有网友研究出了后面两种形式可以更好的解决屏幕适配问题。发展到目前,实际上也有第六种模式,FixedHeight和FixeDWIDth的组合模式,甚至更为复杂的情况。因为极限情况下很多游戏在pad上显示看起来有些怪异,所以往往会FixedHeight与FixeDWIDth进行结合。甚至有的游戏会看界面来修改适配方案(cocos creator目前默认支持根据界面来选择适配方案)

6.FixedHeight和FixeDWIDth组合

如果屏幕设计分辨率是1136*640的话,基本上不会考虑这种组合形式。为什么呢?1136*640是所有屏幕中长宽比最小的,这种情况下只要换成FixeDWIDth必然导致有效图形会到屏幕外面。通常会采用960*640,这个是所有屏幕中比较中庸的的一个屏幕.我们将3者屏幕先进行一个变换:ipad的屏幕我们可以看作853*640

所以我们实际上要适配的就是1136 960 853三个屏幕。那么到底选用哪一种作为方案?如果说既要考虑ipad又要考虑1136,显然用960会比较合适,因为无论到1136还是853其变化都相对比较小。如果说我们更考虑的是1136屏幕,而其他屏幕要求不高,还是可以采用1136,实际上对于固定宽度的做法,采用哪一个作为设计分辨率都是没有区别的,无非图片大小。当然了到底采用设计分辨率来处理有几个要素:1.市面上哪类手机占比最多2.现在的资源状况3.美术效果 从目前来看,历史原因,必须采用1136,这样才能保证资源的统一。其实960这个屏幕也在慢慢退出历史舞台,以后很可能出现的一种情况就是只要考虑1136以及853情况。分辨率和适配方案只是决定一个大体,在此基础上还有很多布局的方式,固定坐标,百分比坐标,相对坐标,可以进行一个更多的深入的探讨和设计。

总结

以上是内存溢出为你收集整理的Cocos屏幕适配方案解析全部内容,希望文章能够帮你解决Cocos屏幕适配方案解析所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1082772.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存