屏幕适配的文章太多了,基本上都是理论性的东西。大家明确了机制就知道了。没有完美的适配方案,除非你们的美工愿意折腾。
常规策略:
今天研究了一下屏幕适配导致的缩放和展示不全的问题(黑边的方案直接淘汰)。细想一下。美工给我们一张图(如果这张图width足够长),在不同的分辨率上我们应该怎样对其展示?肯定不可能在全部的分辨率上把这张图完美的依照原比例展示出来,那答案就仅仅有两种了:
1、铺满屏幕(长宽非等比缩放 EXACTFIT)
天天德州就採用了这样的方法,在不同的分辨率上能明显看到元素被缩放或者拉伸了。对于休闲类游戏不必太过追求完美。
就不上图了。
2、部分图片被遮挡(长宽等比缩放 FIXHEIGHT)
保卫萝卜即用了这样的方式,场景中的控件相对布局大小等比缩放。
因为背景图採用了足够长的图片。在较宽的手机上背景图会展示的多,较窄的手机上展示的比較少。
请看以下两张图的四个角:
上面是手机截图原图。从上图能够看到控件的大小是一样的,可是因为分辨率的不同导致背景图的展示宽度不同。
方案測试:
第一种fit的方式就不说了,960*640的布局就OK。以下就使用cocosstudio来測试制作一下另外一种方案的场景。(吐槽一下。cocos preview实在是不能用。怪不得仅仅能叫preview)
測试方案一:
根节点使用绝对布局,勾选自适应屏幕。 子空间尺寸不勾选百分比(以免宽高非等比缩放导致变形),控件布局勾选百分比。480*320分辨率,背景图片大小也是480*320。
cocosstudio例如以下:
改动屏幕大小:
1.
glview->setFrameSize(480, 320);
glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);
2.
glview->setFrameSize(640, 320);
glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);
下图能够看到控件都未做不论什么拉伸,背景图明显小了。
測试方案二:
根节点使用绝对布局,勾选自适应屏幕。
子空间尺寸不勾选百分比(以免宽高非等比缩放导致变形),控件布局勾选百分比。
480*320分辨率,背景图片大小则改为640*320。
改动屏幕大小:
1.
glview->setFrameSize(480, 320);
glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);
改动屏幕大小:
2.
glview->setFrameSize(640, 320);
glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);
改动屏幕大小:
3.
glview->setFrameSize(640,480);
glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);
结论:
測试用例为了展示效果使用的分辨率比較夸张,正常情况下长宽比是不会不会差距这么明显。
假设对于背景要求不是非常严格的游戏,能够採用另外一种来做屏幕适配。 控件宽高保持等比缩放,背景图部分展示就可以。
PS:1、对于理论性的东西只是与陈述。仅仅问方案究竟行,还是不行!
2、以上图片请勿用作商业用途,版权归光辉和老B同学全部。