在Cocos2D-x中的多分辨率设置中使用精灵地图集

时间:2015-04-22 03:03:06

标签: cocos2d-x sprite-sheet

我刚刚能够为多分辨率环境设置Cocos2d-x。即支持所有/大多数可用的iPhone屏幕尺寸。

我的下一步是废弃单个文件(一堆png)并使用精灵地图集(也就是精灵表)。

这在Cocos2D-x中如何运作?有没有人有工作样本设置?

谷歌和现有文档(好吧,我认为不存在)再次让我失望。

1 个答案:

答案 0 :(得分:1)

对于cocos2d-x v3.5 ......

cocos2d-x测试类始终是查看cocos2d-x如何完成工作的好地方。

查看AppDelegate.cpp:  的cocos2d-X / cocos2d的-X-3.5 /测试/ CPP-测试/类别/ AppDelegate.cpp。

在该类中,测试窗口大小以查看应加载哪组资产。这是问题的一部分,决定加载哪些资产。

对于iOS视网膜,您可以检查屏幕大小,然后将内容比例因子设置为1.0(标准分辨率)或2.0(视网膜分辨率)。 不幸的是,cocos2d-x似乎没有检测到某些屏幕大小,并且为你调用了Director :: getInstanct() - > setContentScaleFactor(2.0),所以我认为我们必须自己这样做。

我还没有测试过设置contentScaleFactor对非Apple设备的影响......

查看下面的代码。尝试在AppDelegate :: applicationDidFinishLaunching()方法中运行它,以了解cocos2d-x如何看到屏幕像素和点;结果并不完全符合我的预期。以下输出适用于iPhone 5设备。

director->setContentScaleFactor(2);
Size winSizePoints = director->getWinSize();
Size winSizePixels = director->getWinSizeInPixels();
Size visibleSize = director->getVisibleSize();

CCLOG("Content scale factor set to 2.0.");
CCLOG("winSizePoints:%.2f,%.2f", winSizePoints.width, winSizePoints.height);
CCLOG("winSizePixels:%.2f,%.2f", winSizePixels.width, winSizePixels.height);
CCLOG("visibleSize:%.2f,%.2f", visibleSize.width, visibleSize.height);

director->setContentScaleFactor(1);
winSizePoints = director->getWinSize();
winSizePixels = director->getWinSizeInPixels();
visibleSize = director->getVisibleSize();
CCLOG("Content scale factor set to 1.0.");
CCLOG("winSizePoints:%.2f,%.2f", winSizePoints.width, winSizePoints.height);
CCLOG("winSizePixels:%.2f,%.2f", winSizePixels.width, winSizePixels.height);
CCLOG("visibleSize:%.2f,%.2f", visibleSize.width, visibleSize.height);

输出上述代码:

内容比例因子设置为2.0。

winSizePoints:1136.00,640.00

winSizePixels:2272.00,1280.00

visibleSize:1136.00,640.00

内容比例因子设置为1.0。

winSizePoints:1136.00,640.00

winSizePixels:1136.00,640.00

visibleSize:1136.00,640.00

所以看来我们必须检查屏幕尺寸,然后选择资产。

然后,一个选项是使用这样的代码根据屏幕是否为视网膜来决定加载哪些资产。您可以使用类似的方法来加载不同大小的背景图像以处理不同的宽高比(下面的更多宽高比)。

float scaleFactor = CCDirector::getInstance()->getContentScaleFactor();
if (scaleFactor > 1.99)
{
    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("spriteSheet-hd.plist", "spriteSheet-hd.png");
}
else
{
    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("spriteSheet.png", "spriteSheet.plist");
}

对于精灵表,我强烈推荐使用Texture Packer。非常棒的工具,只需按一个按钮即可为您创建SD和HD表格和.plist文件。

如果您发布到多个平台,您还需要使用宏来检测设备类型,并在决定加载哪些资产时使用该信息。 e.g。

if(CC_TARGET_PLATFORM == CC_PLATFORM_WIN32)

elif CC_TARGET_PLATFORM == CC_PLATFORM_WP8

elif CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID

elif CC_TARGET_PLATFORM == CC_PLATFORM_IOS

elif CC_TARGET_PLATFORM == CC_PLATFORM_MAC)

ENDIF

另一件需要考虑的事情是,在低功耗CPU和RAM设备上,加载大型资产可能会使您的每秒帧数(FPS)陷入混乱。或者更糟糕的是,设备可能无法加载资产或可能导致游戏崩溃。因此,请务必测试/配置您计划支持的最小公分母设备。

Aspect Ration是另一个重要问题(横向宽度:高度)。 iPad长宽比为4:3 iPhone 4是3:2 iPhone 5& 6是16:9 Android引入了更多宽度:高度比。 WP8.1是15:9 ......不确定是否有其他人。

关键是你可能不想拉伸你的背景让它们填满屏幕,或者在资产不够高或不够宽的边缘有黑条。

为了解决这个问题,我创建了比屏幕右侧更宽的背景资源。该内容看起来不错,但对于传达背景的含义并不重要。该额外内容可以剪辑在具有较窄宽高比的设备上,即ipad,并且在较宽的宽高比设备(即iPhone 6)上可见。 然后按比例放大/缩小背景图像以匹配screenSize高度并保持其纵横比。