如何通过 xScale 结合使用 Sprite Kit setCenterRect 和翻转节点？答案

【问题标题】：How to use Sprite Kit setCenterRect in combination with flipping node through xScale?如何通过 xScale 结合使用 Sprite Kit setCenterRect 和翻转节点？
【发布时间】：2014-05-23 23:12:35
【问题描述】：

我希望有人可以向我解释 centerRect 是如何工作的，以及它是否有问题。

图像管道 (64x64)

第 1 步：创建管道

SKSpriteNode *node = [SKSpriteNode spriteNodeWithImageNamed:@"Pipe"];
[self addChild:node];

第 2 步：定义中心矩形

Origin (4.0, 32.0) Size( 56.0, 28.0)

如文档中所述：

(1)矩形在单位坐标空间中。默认值为 (0,0)-(1.0,1.0)，表示拉伸整个纹理填充精灵。如果指定了不同的矩形，则矩形的坐标用于将纹理分解为 3x3 网格。应用此网格的四个角而不执行任何操作缩放。上下中间部分水平缩放， (2)左右中间部分垂直缩放。中心双向缩放。

如何计算单位坐标空间？

如果左右中间部分垂直缩放并且中心在两个方向上缩放，则代码变为：

SKSpriteNode *node = [SKSpriteNode spriteNodeWithImageNamed:@"Pipe"];
[node setCenterRect:CGRectMake(4.0/64.0, 32.0/64.0, 56.0/64.0, 28.0/64.0)];
[node setYScale:4.0];
[self addChild:node];

结果

奇怪的结果不是我所期望的，我不希望顶部伸展，只有底部。也许这与单位坐标空间有关？我假设一个翻转的坐标空间。

第 3 步：让我们用反向坐标再试一次

SKSpriteNode *node = [SKSpriteNode spriteNodeWithImageNamed:@"Pipe"];
[node setCenterRect:CGRectMake(8.0/64.0, 8.0/64.0, 56.0/64.0, 28.0/64.0)];
[node setYScale:4.0];
[self addChild:node];

结果

不是我所期望的，但至少现在正确的部分被拉伸了。所以我想这行得通，但也许有人可以解释为什么。

第 4 步：修复外观

[node setCenterRect:CGRectMake(8.0/64.0, 8.0/64.0, 56.0/64.0, 22.0/64.0)];

第 5 步：让我们翻转

到目前为止，一切都很好。我们得到了底部管道，现在让我们先垂直翻转它来创建顶部管道。

    SKSpriteNode *node = [SKSpriteNode spriteNodeWithImageNamed:@"Pipe"];
    [node setCenterRect:CGRectMake(8.0/64.0, 8.0/64.0, 56.0/64.0, 22.0/64.0)];
    [node setYScale:-4.0];
    [self addChild:node];

结果

哇哦！都搞砸了？！？！！让我们退后一步，只水平翻转它。

    SKSpriteNode *node = [SKSpriteNode spriteNodeWithImageNamed:@"Pipe"];
    [node setCenterRect:CGRectMake(8.0/64.0, 8.0/64.0, 56.0/64.0, 22.0/64.0)];
    [node setXScale:-1.0];
    [node setYScale:4.0];
    [self addChild:node];

结果

好吧，这真是一团糟。我不知道这是如何工作的？？

第 6 步：自定义脚本

我希望有人能告诉我 centerRect 如何与 xScales 结合使用，但现在我正在创建一个不同的精灵节点并在那里进行翻转（这并不理想）。

- (SKSpriteNode *)spriteNodeWithFlippedImageNamed:(NSString *)name
{
    UIImage     *image      = [UIImage imageNamed:name];
    CGImageRef  imageRef    = image.CGImage;
    float       scale       = [[UIScreen mainScreen] scale];
    CGSize      size        = CGSizeMake(image.size.width, image.size.height);

    //begin context
    UIGraphicsBeginImageContextWithOptions(size, NO, scale);
    CGContextRef context = UIGraphicsGetCurrentContext();

    //flip image
    CGContextTranslateCTM(context, 0, size.height);
    CGContextScaleCTM(context, -1.0, -1.0);

    //draw tiling image
    CGContextDrawTiledImage(context, (CGRect){CGPointZero, CGSizeMake(size.width, size.height)}, imageRef);
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    //create node
    SKTexture       *texture    = [SKTexture textureWithCGImage:newImage.CGImage];
    SKSpriteNode    *node       = [SKSpriteNode spriteNodeWithTexture:texture size:size];

    return node;
}

总结性问题

如何算出单位坐标空间？
如何将setCenterRect 方法与翻转精灵结合使用？

【问题讨论】：

使用 'setCenterRect' 做什么！？
一般来说。我有几个精灵，在其中我使用 centerRect 来正确缩放图像而不拉伸整个图像。
例如，我有一个底部和顶部的管道。我只有一个管道的图像，它不必只缩放底部的顶部。使用反向坐标时有效。但是，当我对需要翻转图像的顶部管道使用相同的图像时，在使用 xScale -1 和 centerRect 时会得到各种奇怪的结果。
我不使用 centerRect。而且我没有为我的通用游戏拉伸图像。
我自己也在寻找这个问题的答案。无论我做什么 centerRect 都没有按预期工作，不像描述的那样工作，甚至没有让它看起来遵循一组特定的规则。

标签： sprite sprite-kit scaling

【解决方案1】：

第一个问题：

您应该像第 2 步一样为 centerRect 属性使用百分比坐标。

这里的问题只是你的原点位置，你应该使用左下角作为 0,0 而不是左上角。

希望对您有所帮助！

【讨论】：

有什么方法可以改变原点吗？所以 0,0 是左上角？

【解决方案2】：

我发现当我知道我正在翻转 spritenode 时反转 CGRect（形状）似乎可以工作——当我们想要翻转管道时，请注意 CGRect 中“高度”的较大“y”值和负号（即，指向“向下”）

** 为 Swift 更新，而不是上面最初提到的 Objective-C **

enum PipeDirection: Int {
    case Up = 1
    case Down = -1
}

...

// Scale pipe larger from center area only (i.e., don't scale pipe "caps")
if pipeDirection == .Up {
    pipe.centerRect = CGRect(x: 0, y: 0.2, width: 1.0, height: 0.4)
} else {
    pipe.centerRect = CGRect(x: 0, y: 0.8, width: 1.0, height: -0.4)
}
pipe.yScale = CGFloat(pipeDirection.rawValue) * 1.5

【讨论】：