为什么我的精灵之间有黑线？答案

【问题标题】：Why are there black lines between my sprites?为什么我的精灵之间有黑线？
【发布时间】：2014-07-08 08:32:18
【问题描述】：

我有一个单像素精灵。在这个精灵中，我添加了四个精灵，每一个都是正方形的四分之一。为了抵消精灵，我所做的就是改变它们的锚点。

例如：

右上角的方块在锚点：(0,0); 右下角：（0,1）；左下角：（1,1）；左上角 : (1,0);

我希望精灵边缘完美地相遇，使其看起来像一个大正方形。相反，每个正方形的边缘之间都有黑线，所以看起来我将四个正方形放在一起。

我使用纹理打包器创建一个精灵表，其中包含各种方块。

cocos2d-x 中是否有一些设置或我必须更改一些代码才能使精灵完美对齐？

编辑：这适用于 cocos2d-x 3.1.1 及更高版本。更改锚点是必要且不可避免的。

编辑：我使用使用 TexturePacker 创建的精灵表中的精灵帧。这就是问题所在。请参阅下面的答案。

【问题讨论】：

我在 3.2 中遇到了同样的问题，但是向 sprite 表添加拉伸并没有帮助。我以平铺模式多次显示来自精灵表的相同精灵。每个都有深色边缘。都是同一个 SpriteBatchNode 的子节点。我通过不再使用 SpriteBatchNode 解决了这个问题，因为 3.2 中的新渲染器可以自己做到这一点，只使用精灵表在应用程序中打包数据。这样做，黑边消失了。

标签： cocos2d-x cocos2d-x-3.0 texturepacker

【解决方案1】：

问题与使用精灵表（使用 TexturePacker 创建）将各个部分保持在一起有关。当您将精灵表中的帧放在一起以形成完整的图像时，就会出现线条。

您可以通过将 Texturepacker 中的“Extrude”选项设置为至少 1 来使黑线消失。

编辑：对于那些基于物理模拟更新精灵位置的人来说，黑线可能是由“子像素”位置引起的。尝试将对象移动完整像素。或者用“亚像素”搜索其他解决方案的答案。

【讨论】：

如果您使用的是纹理打包程序，这是正确的选择。为我工作
也为我工作。

【解决方案2】：

将位置计算转换为 int 类型没有帮助？

通常在某些浮点计算后，例如乘除法，然后编译器自动降级为 int 可能会导致 1px 的变化。

例如 26.500123 可以被视为像素 26 或 27，具体取决于您的投射方法。

测试用例：

你是说你这样做了？

auto testNode = Node::create();
auto s1 = Sprite::create("Images/1.png");
s1->cocos2d::Node::setAnchorPoint(Point(1,0));
auto s2 = Sprite::create("Images/2.png");
s2->cocos2d::Node::setAnchorPoint(Point(0,0));
auto s3 = Sprite::create("Images/3.png");
s3->cocos2d::Node::setAnchorPoint(Point(1,1));
auto s4 = Sprite::create("Images/4.png");
s4->cocos2d::Node::setAnchorPoint(Point(0,1));
testNode->addChild(s1);
testNode->addChild(s2);
testNode->addChild(s3);
testNode->addChild(s4);
testNode->setPosition(Point(screenSize.width/2,screenSize.height/2));
this->addChild(testNode);

你有 1px 的差距？我对 cocos2dx 3.1 做了同样的事情

我得到了这位漂亮的女士

【讨论】：

我不计算位置，因为精灵是放置在原点的子节点。精灵之间的唯一区别是锚点。
将我的测试用例的结果添加到我的答案中。
我不会称其为 1px 间隙，但肯定有明显的黑线
实际上是的 - 我已经做到了。但我仍然得到这些线条。虽然我没有像你那样使用节点 - 我使用单个像素精灵，并在指定的锚点处添加象限。
另外 - 我使用精灵表中的精灵帧而不是像你这样的单个文件。

【解决方案3】：

不要改变锚点，你以后会后悔的。计算每个精灵的正确位置。
确保 x/y 位置位于像素边界上。由于像素密度是点分辨率的 2 倍，因此 Retina 设备也允许 0.5 个位置，但转换为 int 就可以了。

第 2 点也是您不应该使用 anchorPoint 的原因，因为在使用 anchorPoint 偏移纹理时，您无法将位置转换为整数。

【讨论】：

不，不是。绝不。您始终可以通过 position 和 contentSize 计算来表达 anchorPoint 的变化。 anchorPoint 唯一改变的是旋转和缩放操作的中心，但即便如此，您也可以使用算法来改变它，而无需更改 anchorPoint。无论哪种方式，如果您确实更改了锚点，您将只能通过在每次更新时手动检查每个精灵并将位置向下转换为整数来修复黑线问题 - 甚至这可能无法正常工作，具体取决于 cocos2d 应用的方式和位置锚点计算。
在我的项目中更改锚点是必要的。我相信能够更改锚点的目的正是为了让您可以围绕特定点旋转精灵。
是的，但问题是：您是想轻松旋转但有黑线，还是想摆脱黑线，即使这意味着手动应用旋转？