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

Question

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

IMAGE PIPE（64x64）

第1步：创建管道

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

第2步：定义中心RECT

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

如文件中所述：

  

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

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

结果



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

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

结果



Wooaah！一切搞砸了？！？!!让我们后退一步，只是水平翻转。

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

摘要问题

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

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

Answer 1

第一个问题：

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

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

希望这有帮助！

Answer 2

当我知道我正在翻转spritenode时，我发现反转CGRect（形状）似乎有效 - 注意更大的＆＃34; y＆＃34; ＆＃34; height＆＃34;的值和负号当我们想要管道翻转时（即指向＆＃34;向下＆＃34;）在CGRect中

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

<h:form enctype="multipart/form-data">
    <p:fileUpload fileUploadListener="#{fileBean.handleFileUpload1}" 
            auto="true"/>
</h:form>
<h:form enctype="multipart/form-data">
    <p:fileUpload fileUploadListener="#{fileBean.handleFileUpload2}" 
            auto="true"/>
</h:form>

...

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