sprite - 如何使用Sprite Kit setCenterRect结合通过xScale翻转节点？

Question

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

图像管道 (64x64)

第 1 步:创建管道

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

第 2 步:定义中心矩形

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

如文档中所述:

(1)The rectangle is in the unit coordinate space. The default value is (0,0)-(1.0,1.0), which indicates that the entire texture is stretched to fill the sprite. If a different rectangle is specified, then the rectangle’s coordinates are used to break the texture into a 3x3 grid. The four corners of this grid are applied without performing any scaling. The upper- and lower-middle parts are scaled horizontally, and (2) the left- and right-middle parts are scaled vertically. The center is scaled in both directions.

1. 如何算出单位坐标空间？

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];
   

结果

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

第 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];

结果

这并不是我所期望的，但至少现在正确的部分已经被拉伸(stretch)了。所以我想这有效，但也许有人可以解释为什么。

第 4 步:修复外观

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

第五步:让我们翻转

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

    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 如何与 xScale 结合使用，但现在我正在创建一个不同的 Sprite 节点并在那里进行翻转(这并不理想)。

- (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;
}

问题摘要

1. 如何算出单位坐标空间？

2. 如何将 setCenterRect 方法与翻转 Sprite 结合使用？

Answer 1

第一个问题:

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

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

希望这有帮助!