使用cocos2dx 3.2和cocosstudio屏幕适配总结----相对布局

屏幕适配的文章太多了，基本上都是理论性的东西。大家明确了机制就知道了。没有完美的适配方案，除非你们的美工愿意折腾。

常规策略：

今天研究了一下屏幕适配导致的缩放和展示不全的问题（黑边的方案直接淘汰）。细想一下。美工给我们一张图（如果这张图width足够长），在不同的分辨率上我们应该怎样对其展示？肯定不可能在全部的分辨率上把这张图完美的依照原比例展示出来，那答案就仅仅有两种了：

1、铺满屏幕（长宽非等比缩放 EXACTFIT）

天天德州就採用了这样的方法，在不同的分辨率上能明显看到元素被缩放或者拉伸了。对于休闲类游戏不必太过追求完美。

就不上图了。

2、部分图片被遮挡（长宽等比缩放 FIXHEIGHT）

保卫萝卜即用了这样的方式，场景中的控件相对布局大小等比缩放。

因为背景图採用了足够长的图片。在较宽的手机上背景图会展示的多，较窄的手机上展示的比較少。

请看以下两张图的四个角：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFuYmluZ2Zlbmd5aW5n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

上面是手机截图原图。从上图能够看到控件的大小是一样的，可是因为分辨率的不同导致背景图的展示宽度不同。

方案測试：

第一种fit的方式就不说了，960*640的布局就OK。以下就使用cocosstudio来測试制作一下另外一种方案的场景。（吐槽一下。cocos preview实在是不能用。怪不得仅仅能叫preview）

測试方案一：

根节点使用绝对布局，勾选自适应屏幕。子空间尺寸不勾选百分比（以免宽高非等比缩放导致变形），控件布局勾选百分比。480*320分辨率，背景图片大小也是480*320。

cocosstudio例如以下：

改动屏幕大小：

glview->setFrameSize(, 320);

glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);

下图能够看到控件都未做不论什么拉伸，背景图明显小了。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFuYmluZ2Zlbmd5aW5n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

測试方案二：

根节点使用绝对布局，勾选自适应屏幕。

子空间尺寸不勾选百分比（以免宽高非等比缩放导致变形），控件布局勾选百分比。

480*320分辨率，背景图片大小则改为640*320。

改动屏幕大小：

glview->setFrameSize(, 320);

glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);

改动屏幕大小：

glview->setFrameSize(, 320);

glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFuYmluZ2Zlbmd5aW5n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

改动屏幕大小：

glview->setFrameSize(,);

glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);

结论：

測试用例为了展示效果使用的分辨率比較夸张，正常情况下长宽比是不会不会差距这么明显。

假设对于背景要求不是非常严格的游戏，能够採用另外一种来做屏幕适配。控件宽高保持等比缩放，背景图部分展示就可以。

PS:1、对于理论性的东西只是与陈述。仅仅问方案究竟行，还是不行！

2、以上图片请勿用作商业用途，版权归光辉和老B同学全部。