使用Cocos2d-x 3.2和Cocos Studio做屏幕适配方案总结

概述今天研究了一下屏幕适配导致的缩放和展示不全的问题（黑边的方案直接淘汰）。细想一下，美工给我们一张图（假设这张图width足够长），在不同的分辨率上我们应该如何对其展示？肯定不可能在所有的分辨率上把这张图完美的按照原比例展示出来，那答案就只有两种了： 1、铺满屏幕（长宽非等比缩放 EXACTFIT） 天天德州就采用了这种方法，在不同的分辨率上能明显看到元素被缩放或者拉伸了，对于休闲类游戏不必太过追求

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

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

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

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

保卫萝卜即用了这种方式，场景中的控件相对布局大小等比缩放。 由于背景图采用了足够长的图片，在较宽的手机上背景图会展示的多，较窄的手机上展示的比较少。

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

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="20141115214736337.jpg" src="http://API.cocoachina.com/uploads/20141118/1416297796753243.jpg">

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="1416298548299548.jpg" src="http://API.cocoachina.com/uploads/20141118/1416298548299548.jpg">

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

方案测试：

第一种fit的方式就不说了，960*640的布局就OK。下面就使用Cocos Studio来测试制作一下第二种方案的场景。

测试方案一：

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

Cocos Studio如下：

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="20141115222106978.jpg" src="http://API.cocoachina.com/uploads/20141118/1416299066240143.jpg">

修改屏幕大小：

glvIEw->setFrameSize(480,320);

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

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="1416299260889735.jpg" src="http://API.cocoachina.com/uploads/20141118/1416299260889735.jpg">

2.

glvIEw->setFrameSize(640,320);

下图可以看到控件都未做任何拉伸，背景图明显小了。

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="1416299667777770.jpg" src="http://API.cocoachina.com/uploads/20141118/1416299667777770.jpg">

测试方案二：

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

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="20141115221659359.jpg" src="http://API.cocoachina.com/uploads/20141118/1416299899526497.jpg">

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="20141115222035656.jpg" src="http://API.cocoachina.com/uploads/20141118/1416301862436253.jpg">

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="1416301870450203.jpg" src="http://API.cocoachina.com/uploads/20141118/1416301870450203.jpg">

修改屏幕大小

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="20141115222952796.jpg" src="http://API.cocoachina.com/uploads/20141118/1416301883181748.jpg">

结论：

测试用例为了展示效果使用的分辨率比较夸张，正常情况下长宽比是不会不会差距这么明显。如果对于背景要求不是很严格的游戏，可以采用第二种来做屏幕适配。 控件宽高保持等比缩放，背景图部分展示即可。

原文地址：http://cn.cocos2d-x.org/tutorial/show?ID=1909

总结

以上是内存溢出为你收集整理的使用Cocos2d-x 3.2和Cocos Studio做屏幕适配方案总结全部内容，希望文章能够帮你解决使用Cocos2d-x 3.2和Cocos Studio做屏幕适配方案总结所遇到的程序开发问题。

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