本文并不想讲关于屏幕适配的概念或者大道理,如果还不了解cocos2d-x屏幕适配的,请先看这篇文章:http://www.cocoachina.com/gamedev/cocos/2014/0516/8451.html。本文有一些内容和图片是引用这篇文章的。看了那么多网上关于屏幕适配的文章,还是觉得似懂非懂,所以最好的方法就是自己一步步做好适配。
一、根据屏幕尺寸选择“最”合适的图片。
如果根据屏幕尺寸来选择一样大小的图片,那么美工要哭了,因为对于安卓机,各种各样的分辨率啊,不仅美工要哭了,程序员也要哭了。所以,我们只能选择最合适的图片,比如320*500分辨率和300*480分辨率的屏幕可以使用320*480的图片。
1、在Cocos2d-x自带的解决方案中就有针对iphone、ipad和ipadhd所做的适配方案,在工程cpp-empty-test有例子。
// AppMacros.h
#define DESIGN_RESOLUTION_480X320 0
#define DESIGN_RESOLUTION_1024X768 1
#define DESIGN_RESOLUTION_2048X1536 2
// 要切换设计方案,改变这一行即可
#define TARGET_DESIGN_RESOLUTION_SIZE DESIGN_RESOLUTION_480X320
typedef struct tagResource
{
cocos2d::Size size; // 尺寸
char directory[100]; // 资源路径
}Resource;
static Resource smallResource = { cocos2d::Size(480, 320), "iphone" };
static Resource mediumResource = { cocos2d::Size(1024, 768), "ipad" };
static Resource largeResource = { cocos2d::Size(2048, 1536), "ipadhd" };
#if (TARGET_DESIGN_RESOLUTION_SIZE == DESIGN_RESOLUTION_480X320)
static cocos2d::Size designResolutionSize = cocos2d::Size(480, 320);
#elif (TARGET_DESIGN_RESOLUTION_SIZE == DESIGN_RESOLUTION_1024X768)
static cocos2d::Size designResolutionSize = cocos2d::Size(1024, 768);
#elif (TARGET_DESIGN_RESOLUTION_SIZE == DESIGN_RESOLUTION_2048X1536)
static cocos2d::Size designResolutionSize = cocos2d::Size(2048, 1536);
#else
#error unknown target design resolution!
#endif
// 480*320的字体大小是24号,根据当前的分辨率来修改字体大小
#define TITLE_FONT_SIZE (cocos2d::Director::getInstance()->getOpenGLView()->getDesignResolutionSize().width / smallResource.size.width * 24)
从上面可以看出,cocos2d-x定义了三种大小,分别是iphone(480*320),ipad(1024*768),ipadhd(2048*1536),一般用得比较多的是iphone和ipad。
我们再看一下资源文件夹,工程->Resource下:
iphone目录:
ipad目录:
ipadhd目录:
也就是说,在这三个文件夹里面有三套不同大小分辨率的图片,我们之后根据屏幕大小来选择对应的图片就行了。
2、实现怎么根据屏幕大小来选择图片。
新建一个工程,再将AppMacros.h文件拷贝过去。
// AppDelegate.cpp
bool AppDelegate::applicationDidFinishLaunching() {
// initialize director
auto director = Director::getInstance();
auto glview = director->getOpenGLView();
if(!glview) {
glview = GLView::create("My Game");
glview->setFrameSize(480, 320); // 在这里设置创建窗口的尺寸,手机上这个就不用啦,因为手机有固定的屏幕
director->setOpenGLView(glview);
}
auto screenSize = glview->getFrameSize(); // 获取屏幕尺寸
std::vector<std::string> searchPaths;
// 这里是实现的重点,比较屏幕的高和设定的三种适配尺寸的高,选择合适的图片
// 然后将对应图片的路径添加到搜索路径中,那么cocos2d-x就会到该目录去寻找图片
if (screenSize.height > middleResource.size.height)
{
searchPaths.push_back(largeResource.directory);
}else if (screenSize.height > smallResource.size.height)
{
searchPaths.push_back(middleResource.directory);
}else
{
searchPaths.push_back(smallResource.directory);
}
FileUtils::getInstance()->setSearchPaths(searchPaths);
// turn on display FPS
director->setDisplayStats(true);
// set FPS. the default value is 1.0/60 if you don't call this
director->setAnimationInterval(1.0 / 60);
// create a scene. it's an autorelease object
auto scene = HelloWorld::createScene();
// run
director->runWithScene(scene);
return true;
}
窗口尺寸500*300:
因为高300小于320,所以使用480*320的图片。这时候看到的是左右有黑边,上下被截了一点。没事,下面会讲怎么解决。
窗口尺寸700*300:
还是用480*320分辨率的,都是300的错。
窗口尺寸800*480:
这次用的是1024*768的了,因为320<480<768。
在500*300尺寸中我们看到图片左右因为不够宽而出现黑边,而上下因为太大了而被截取了一部分,那么要怎么解决这个问题呢?往下看。
二、图片与屏幕“完美”融合
为了使图片能与屏幕“完美”融合,Co