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

Question

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

我的下一步是废弃单个文件（一堆 png）并改用精灵图集（又名精灵表）。

这在 Cocos2D-x 中是如何工作的？有人有工作示例设置吗？

Google 和现有文档（好吧，我认为不存在）再一次让我失望了。

Answer 1

对于 cocos2d-x v3.5...

cocos2d-x 测试类始终是查看如何使用 cocos2d-x 完成任务的好地方。

在以下位置查看 AppDelegate.cpp： Cocos2d-x/cocos2d-x-3.5/tests/cpp-tests/Classes/AppDelegate.cpp.

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

对于 iOS Retina，您可以检查屏幕大小，然后将内容比例因子设置为 1.0（标准分辨率）或 2.0（Retina 分辨率）。 不幸的是，cocos2d-x 似乎从未检测到某些屏幕尺寸并为您调用 Director::getInstanct()->setContentScaleFactor(2.0)，所以我认为我们必须自己做。

我还没有测试过在非苹果设备上设置 contentScaleFactor 的影响...

查看下面的代码。尝试在 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

可见尺寸：1136.00,640.00

内容比例因子设置为 1.0。

winSizePoints:1136.00,640.00

winSizePixels:1136.00,640.00

可见尺寸：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 文件的超棒工具。

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

如果（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) 变得一团糟。或者更糟糕的是，设备可能无法加载资产或可能导致游戏崩溃。因此，请务必在您计划支持的最小公分母设备上进行测试/配置。

纵横比是另一个重要问题（横向宽度：高度）。 iPad 纵横比为 4:3 iPhone 4 是 3:2 iPhone 5 和 6 为 16:9 Android 提供了更多的宽高比。 WP8.1 是 15:9...不确定是否其他。

关键是您可能不想拉伸背景以使它们填满屏幕，或者在资产不够高或不够宽的边缘出现黑条。

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