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

Question

我有一个像素精灵。对于这个精灵，我添加了四个精灵，每个精灵四分之一平方。为了抵消精灵，我所做的就是改变它们的锚点。

例如：

右上方是锚点：（0,0）; 右下角：（0,1）; 左下角：（1,1）; 左上角：（1,0）;

我希望精灵边缘能够完美地相遇，使它看起来像一个大正方形。相反，每个方块的边缘之间都有黑线，所以看起来我已经放置了四个正方形。

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

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

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

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

Answer 1

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

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

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

Answer 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做了同样的事情。

我得到了这位好女士

Answer 3

1. 不要改变anchorPoint，你会后悔的。计算每个精灵的正确位置。

2. 确保x / y位置在像素边界上。尽管Retina设备允许0.5个位置，但由于像素密度是点分辨率的2倍，因此转换为int将会起到作用。

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