html5游戏开发对游戏原型进行屏幕适配完善.docVIP

cocos引擎—《保卫萝卜》05：对游戏原型进行屏幕适配完善 本文关键词：游戏引擎，游戏开发引擎，cocos引擎html5游戏开发 一、前提： 完成前一篇的内容。 具体参考：Cocos2d-x 3.3开发《保卫萝卜》04：实现简单的游戏原型 二、本篇目标： 说说关于Cocos2d-x手机分辨率适配 对前一篇完成的塔防游戏原型进行屏幕适配完善 三、内容： 说说关于Cocos2d-x手机分辨率适配 在上一篇的结尾我们遗留了一个问题，在真机上运行时女主角、色狼的位置相当于道路都有点偏上了，并且好像背景地图也没有显示全背景的顶部和底部有一部分没有显示出来，但是在windows下运行确正常，这个是什么原因呢，该怎么调整呢？我的手机分辨率是：960x540 而我们的地图素材图片分辨率是：960x640，两个尺寸的不同导致了这个问题，这个是关于不同手机屏幕分辨率适配问题，Android手机品种繁多屏幕尺寸分辨率也同样繁多，为了让游戏适应不同的Android手机需要多做很多的工作，这个做IOS的游戏要幸福多毕竟就这么几个尺寸分辨率。 影响游戏的两个因素屏幕大小（分辨率）、宽高比，屏幕大小从小屏的480×320手机到大屏甚至平板的2048×1536，如果用低分辨率的素材图在高分辨率的设备上就会图像模糊，如果用高分辨率的素材在低分辨率设备上时增加系统负担，所有一般我们采取多套不同分辨率素材进行匹配，这个问题还算容易解决。但是宽高比就麻烦的多，手机有3:2，16:9 标准宽屏等，本篇中我测试用的华为手机为16:9的宽屏，宽高比会造成游戏不按比例的压缩或者拉伸造成游戏上的元素显示、位置等发生变异甚至导致游戏无法使用，所以宽高比造成的问题比屏幕大小要严重的多，比如我们的这个塔防游戏就因为这个问题造成了游戏人物位置偏移。那宽高比是否也可以像分辨率一样采用多套宽高比的素材解决？肯定可以！但是如果不同的宽高比结合不同的分辨率这样得提供多少套的素材啊？并且新的宽高比的手机在不断的新出来为了每出一款手机就做一套素材这样的成本太大。 在cocos2d-x-3.3/tests目录下有一个名为cpp-empty-test示例工程，用Microsoft Visual Studio 2012打开proj.win32下的工程，可以看到它对于这个问题的解决方案，参考其中的AppMacros.h、AppDelegate.cpp、Resources目录下的素材。 通过这个示例项目可以如下总结： 1、屏幕大小（分辨率）解决方案 按照上面的思路提供多套的素材，一般游戏做法提供低、中、高、超高四套不同的分辨率的素材，低的应付一般小屏手机、中的应付高分辨率手机、高的应付平板、超高的应付高清平板或者电视之类的设备。四套素材分4个文件夹放置到项目Resources文件下比如叫iphone、iphonehd、ipad、ipadhd。在设备载入游戏时，判断当前设备的分辨率然后选择不同文件夹下的素材进行载入以适应不同分辨率的设备。 2、宽高比解决方案 为了适应设备各种屏幕宽高比，在 Cocos2dx中，提供了相应的解决方案，以方便我们在设计游戏时，能够更好的适应不同的屏幕。Cocos2dx提供了ResolutionPolicy（分辨率策略），通过给GLView设置不同ResolutionPolicy来解决这个问题。 ResolutionPolicy的五种类型： 1、EXACT_FIT 2、NO_BORDER 3、SHOW_ALL 4、FIXED_HEIGHT 5、FIXED_WIDTH 对前一篇完成的塔防游戏原型进行屏幕适配完善 1、屏幕大小（分辨率）适配 第一步：按照上面解决方案的做法，先制作iphone、iphonehd两套素材，然后拷贝到项目的Resources文件下，我们这款游戏的目标是手机类的设备，所以就只提供了两套分辨率的素材，如果需要对更高分辨率的设备进行支持那么需要提供更多套的素材。个人建议如果你的游戏需要支持平板，那么建议单独出个HD版，虽然通过代码和素材的适配能同时支持手机和平板设备，但是这样的实现还是有一定的限制，会一定程度上降低某类设备的可玩性。 第二步：新建AppMacros.h文件，把cpp-empty-test示例工程下同名的文件代码直接拷贝过来进行修改，只需要保留两种不同的分辨率代码即可： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 #define?DESIGN_RESOLUTION_480X320????0 #define?DESIGN_RESOLUTION_960X640????1 /*?If?you?want?to?switch?design?