在Cocos2D-x的多分辨率设置中使用Sprite Atlas [英] Using sprite atlases in a multi resolution setup in Cocos2D-x

问题描述

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

I've just been able to setup a Cocos2d-x for a multiresolution environment. Ie supporting all/most of the available iPhone screen sizes.

下一步是抓取单个文件(一堆png)，而是使用精灵图集(又名精灵图).

My next step is to scrap the individual files (bunch of pngs) and use sprite atlases (aka sprite sheets) instead.

这在Cocos2D-x中如何工作?有人能进行有效的样品设置吗?

How does this work in Cocos2D-x? Does anyone have a working sample setup?

再次，谷歌和现有文档(嗯，我认为不存在)使我失望.

Once again, Google and existing documentation (well, I don't think that exists) fail me.

推荐答案

对于cocos2d-x v3.5 ...

For cocos2d-x v3.5...

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

The cocos2d-x test classes are always a great place to look to see how things can be done with cocos2d-x.

在以下位置签出AppDelegate.cpp:Cocos2d-x/cocos2d-x-3.5/tests/cpp-tests/Classes/AppDelegate.cpp.

Check out the AppDelegate.cpp in: Cocos2d-x/cocos2d-x-3.5/tests/cpp-tests/Classes/AppDelegate.cpp.

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

In that class the window size is tested to see which set of assets should be loaded. That is part of the issue, deciding which assets to load.

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

For iOS retina, you can check the size of the screen and then set the content scale factor to either 1.0 for standard resolution or 2.0 for retina resolution. Unfortunately, cocos2d-x doesn't seem to ever detect certain screen sizes and call Director::getInstanct()->setContentScaleFactor(2.0) for you, so I think we have to do this our self.

我尚未测试在非Apple设备上设置contentScaleFactor的影响...

I have not tested the impact of setting contentScaleFactor on non-apple devices yet...

查看以下代码.尝试在您的AppDelegate :: applicationDidFinishLaunching()方法中运行它，以了解cocos2d-x如何看到屏幕像素和点.结果不完全是我所期望的.下面的输出用于iPhone 5设备.

Check out the code below. Try running it in your AppDelegate::applicationDidFinishLaunching() method to get an idea of how cocos2d-x sees screen pixels and points; the result is not exactly what I expected. The output below is for an iPhone 5 device.

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.

Content scale factor set to 2.0.

winSizePoints:1136.00,640.00

winSizePoints:1136.00,640.00

winSizePixels:2272.00,1280.00

winSizePixels:2272.00,1280.00

visibleSize:1136.00,640.00

visibleSize:1136.00,640.00

内容比例因子设置为1.0.

Content scale factor set to 1.0.

winSizePoints:1136.00,640.00

winSizePoints:1136.00,640.00

winSizePixels:1136.00,640.00

winSizePixels:1136.00,640.00

visibleSize:1136.00,640.00

visibleSize:1136.00,640.00

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

So it seems we have to check the the screen size and then choose assets.

然后一种选择是使用类似这样的代码，根据屏幕是否是视网膜来决定要加载哪些资产.您可以使用类似的方法来加载不同大小的背景图像，以处理不同的长宽比(下面提供更多长宽比).

One option is to then use code like this to decide which assets to load based on if the screen is retina or not. You could use a similar approach to also loading different size background images to deal with different aspect ratios (more aspect ratios below).

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");
}

对于Sprite板料，我强烈推荐Texture Packer.很棒的工具，只需按下一个按钮，即可为您创建SD和HD图纸以及.plist文件.

For sprite sheets, I highly recommend Texture Packer. Awesome tool that can create SD and HD sheets and .plist files for you with the press of one button.

如果要发布到多个平台，则还需要使用宏来检测设备类型，并使用该信息来确定要加载的资产.例如

If you publish to multiple platforms, you will also want to use the macros to detect the device type and use that information in deciding which assets to load. e.g.

要考虑的另一件事是，在低功耗的CPU和RAM设备上，加载大量资产可能会使您的每秒帧数(FPS)变废为宝.或更糟糕的是，设备可能无法加载资产或可能导致游戏崩溃.因此，请务必在计划支持的最小公分母设备上进行测试/配置.

Another thing to consider is that on low power CPU and RAM devices, loading large assets might make your frames per second (FPS) go to crap. Or worse, the device might not be able to load the asset or could crash the game. So be sure to test/profile on least common denominator devices that you plan to support.

纵横比是另一个重要问题(横向宽度:高度).iPad长宽比为4:3iPhone 4是3:2iPhone 5和6是16:9Android会抛出更多的width:height比率.WP8.1是15:9 ...不确定是否还有其他人.

Aspect Ration is another important issue (landscape width:height). iPad aspect ratio is 4:3 iPhone 4 is 3:2 iPhone 5 & 6 are 16:9 Android throws in a bunch more width:height ratios. WP8.1 is 15:9... not sure if others.

重点是您可能不想拉伸背景以使其充满屏幕，或者在资产不够高或不够宽的边缘上有黑条.

The point is that you probably don't want to stretch your backgrounds to get them to fill the screen, or have black bars on the edges where assets are not tall or wide enough.

为解决这个问题，我创建了背景素材，其背景色超出了屏幕右侧的宽度.该内容看起来不错，但对于传达背景的含义并不重要.可以在纵横比较小的设备(即ipad)上剪切掉多余的内容，而在纵横比较大的设备(如iPhone 6)上可以看到这些额外的内容.然后按比例放大/缩小背景图像，以匹配screenSize高度并保持其长宽比.

To deal with this I create background assets that are wider than they need to be going off the right side of the screen. That content looks good but is not vital to convey the meaning of the background. That extra content can be clipped on devices that have narrower aspect ratios, i.e. ipad, and is visible on wider aspect ratio devices, i.e. iPhone 6. The background images are then scaled up/down to match the screenSize height and retain their aspect ratio.

这篇关于在Cocos2D-x的多分辨率设置中使用Sprite Atlas的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！