带有透明边框的 SKSpriteNode 发生了奇怪的事情

Posted 2023-02-24

【中文标题】带有透明边框的 SKSpriteNode 发生了奇怪的事情

【英文标题】：Strange thing happens with SKSpriteNode with transparent borders

【发布时间】：2014-04-14 21:17:40

【问题描述】：

好的，我有这个代码：

        SKSpriteNode *flagTile = [((BGSKView *) self.skView).tileSprites[@"flag"] copy];
        flagTile.anchorPoint = CGPointZero;
        flagTile.size = touchedNode.size;
        flagTile.name = @"flag";

        [touchedNode addChild:flagTile];

当用户点击一个字段（一个 SKSpriteNode）时，它会向其子节点添加一个精灵 - 标志节点。 touchNode 纹理大小为 80x80，旗帜纹理为 80x80……它们完全相等，主要区别在于旗帜纹理具有透明边框。

这里：

但奇怪的事情发生了：标志节点 always 的 real（我们称之为“可点击”）区域小于touchedNode，它的位置有点奇怪.

像这样：

我的所有层的结构是这样的：compoundNode 包含两层 - A 和 B。当需要调整整个树的大小时，设置了 xScale 和 yScale (compoundNode)。没有其他与尺寸有关的操作。

我做错了什么？

我真正需要的是让我的flagTile 可点击区域与touchedNode 一样大。还有一个：如果我更换：

SKSpriteNode *flagTile = [((BGSKView *) self.skView).tileSprites[@"flag"] copy];

用这个：

SKSpriteNode *flagTile = [SKSpriteNode spriteWithColor:[UIColor clearColor] size:touchedNode.size];

效果很好。

在创建 clearColor sprite 后，我什至尝试更改纹理属性 - 没有任何效果。

谢谢。

【参考方案1】：

命令SKSpriteNode *flagTile = [((BGSKView *) self.skView).tileSprites[@"flag"] copy]; 正在创建您的精灵，但忽略了标志周围的不可见部分。当我在我的图像编辑器 (Adobe Fireworks) 中打开您的标志图像并选择您的标志时，只有实际的标志 rect 被选中（查看我发布的图像）。

我能想到的唯一解决方法是让您在旗帜后面添加一个白色（或您想要的任何颜色）正方形，大小为 80,80。然后将正方形的 alpha 设置为完全透明以上的 1 点。我认为这应该允许整个 80 x 80 图像是可触摸的。

【讨论】：

哇！谢谢，但这真的是唯一的解决方案吗？如果我有更复杂的图形需要使用带边框且没有额外颜色的透明图像怎么办？

这一切都取决于您的代码结构。您可以做几件事。除了使用 alpha+1 层，您还可以在对角线上放置一个小点。另一个更简洁的选择是直接使用精灵节点并在其上添加一个更大的不可见节点来处理触摸。

您可以使用您的标志图像来创建标志的 Alpha（这应该是黑色背景上的白色标志），然后您可以在 Photoshop 中将其组合以创建 32 位 PNG 文件。请注意，最好将主标志也放在纯色背景上，颜色无关紧要，因为无论如何它都会被 alpha 删除。这样你就不会得到角点，并且尺寸是从完整图像中获取的（没有透明像素）

@sangony 我认为这里最好的答案是添加颜色清晰且大小合适的透明节点。更清洁和简单的实施方式。您可以编辑您的答案并感谢您提供信息。

【参考方案2】：

我通过在两个角（左下和右上）添加两个点来解决我的问题，不透明度设置为 1%，效果很好。