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

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

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

常规策略:@H_301_5@

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

1、铺满屏幕(长宽非等比缩放 EXACTFIT)@H_301_5@

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

2、部分图片被遮挡(长宽等比缩放 FIXHEIGHT)@H_301_5@

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


@H_301_5@

请看下面两张图的四个角:@H_301_5@

@H_301_5@

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

方案测试:@H_301_5@

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

测试方案一:@H_301_5@

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

Cocos Studio如下:@H_301_5@

修改屏幕大小:@H_301_5@

1.@H_301_5@

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

2.
@H_301_5@

glvIEw->setFrameSize(640,serif; Font-size:14px"> 下图可以看到控件都未做任何拉伸,背景图明显小了。@H_301_5@

测试方案二:
@H_301_5@

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

2.@H_301_5@
3.@H_301_5@
结论:@H_301_5@

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

Cocos引擎中文官网现面向广大Cocos引擎相关开发者征集优秀教程,欢迎大家投稿!来稿请发送至:support@cocos.org。@H_301_5@ 总结

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

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

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

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

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

发表评论

登录后才能评论

评论列表(0条)