Sprite Kit和colorWithPatternImage

Question

我们有没有办法在一个区域内重复显示图片，比如SKSpriteNode？不幸的是，SKColor colorWithPatternImage无法实现。

编辑：

我做了以下分类，目前似乎可以工作。使用Mac，尚未在iOS上测试。可能需要一些修复来适应iOS。

// Add to SKSpriteNode category or something.
+(SKSpriteNode*)patternWithImage:(NSImage*)image size:(const CGSize)SIZE;

// Add to SKTexture category or something.
+(SKTexture*)patternWithSize:(const CGSize)SIZE image:(NSImage*)image;

还有实现方法，将它们放在各自的文件中。

+(SKSpriteNode*)patternWithImage:(NSImage*)imagePattern size:(const CGSize)SIZE {
    SKTexture* texturePattern = [SKTexture patternWithSize:SIZE image:imagePattern];
    SKSpriteNode* sprite = [SKSpriteNode spriteNodeWithTexture:texturePattern];
    return sprite;
}

+(SKTexture*)patternWithSize:(const CGSize)SIZE image:(NSImage*)image {
    // Hopefully this function would be platform independent one day.
    SKColor* colorPattern = [SKColor colorWithPatternImage:image];

    // Correct way to find scale?
    DLog(@"backingScaleFactor: %f", [[NSScreen mainScreen] backingScaleFactor]);
    const CGFloat SCALE = [[NSScreen mainScreen] backingScaleFactor];
    const size_t WIDTH_PIXELS = SIZE.width * SCALE;
    const size_t HEIGHT_PIXELS = SIZE.height * SCALE;
    CGContextRef cgcontextref = MyCreateBitmapContext(WIDTH_PIXELS, HEIGHT_PIXELS);
    NSAssert(cgcontextref != NULL, @"Failed creating context!");
    //  CGBitmapContextCreate(
    //                                                    NULL, // let the OS handle the memory
    //                                                    WIDTH_PIXELS,
    //                                                    HEIGHT_PIXELS,

    CALayer* layer = CALayer.layer;
    layer.frame = CGRectMake(0, 0, SIZE.width, SIZE.height);

    layer.backgroundColor = colorPattern.CGColor;

    [layer renderInContext:cgcontextref];

    CGImageRef imageref = CGBitmapContextCreateImage(cgcontextref);

    SKTexture* texture1 = [SKTexture textureWithCGImage:imageref];
    DLog(@"size of pattern texture: %@", NSStringFromSize(texture1.size));

    CGImageRelease(imageref);

    CGContextRelease(cgcontextref);

    return texture1;
}

好的，这也是必需的。这可能仅适用于Mac。

CGContextRef MyCreateBitmapContext(const size_t pixelsWide, const size_t pixelsHigh) {
    CGContextRef    context = NULL;
    CGColorSpaceRef colorSpace;
    void *          bitmapData;
    //int             bitmapByteCount;
    size_t             bitmapBytesPerRow;

    bitmapBytesPerRow   = (pixelsWide * 4);// 1
    //bitmapByteCount     = (bitmapBytesPerRow * pixelsHigh);

    colorSpace = CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB);// 2
    bitmapData = NULL;

#define kBitmapInfo     kCGImageAlphaPremultipliedLast
//#define kBitmapInfo       kCGImageAlphaPremultipliedFirst
//#define kBitmapInfo       kCGImageAlphaNoneSkipFirst
    // According to https://dev59.com/H2Mk5IYBdhLWcg3w2BXJ#18921840 it should be safe to just cast
    CGBitmapInfo bitmapinfo = (CGBitmapInfo)kBitmapInfo; //kCGImageAlphaNoneSkipFirst; //0; //kCGBitmapAlphaInfoMask; //kCGImageAlphaNone; //kCGImageAlphaNoneSkipFirst;
    context = CGBitmapContextCreate (bitmapData,// 4
                                     pixelsWide,
                                     pixelsHigh,
                                     8,      // bits per component
                                     bitmapBytesPerRow,
                                     colorSpace,
                                     bitmapinfo
                                     );
    if (context== NULL)
    {
        free (bitmapData);// 5
        fprintf (stderr, "Context not created!");
        return NULL;
    }
    CGColorSpaceRelease( colorSpace );// 6

    return context;// 7
}

- Jonny

---

我试图让它工作，但使用colorWithPatternImage和initWithPatternImage可能存在错误，完全没有运气。 - DogCoffee

仅适用于Mac编写，未在iOS上进行测试。只是说一下。 - Jonny

我尝试过在iOS上测试，但是使用那些方法都没有成功。 - DogCoffee

这就是为什么我在帖子中写道它没有经过iOS测试，很可能需要针对iOS进行修复。需要根据iOS的上下文进行创建。请替换MyCreateBitmapContext。 - Jonny

使用图像上下文进行IOS开发 - AwDogsGo2Heaven

我猜NSImage必须被替换为UIImage...我猜没有跨平台的SKImage这样的东西。所以可能需要进行更多的重构... - Jonny

Answer 1

iOS 工作代码：

CGRect textureSize = CGRectMake(0, 0, 488, 650);
CGImageRef backgroundCGImage = [UIImage imageNamed:@"background.png"].CGImage;

UIGraphicsBeginImageContext(self.level.worldSize); // use WithOptions to set scale for retina display
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextDrawTiledImage(context, textureSize, backgroundCGImage);
UIImage *tiledBackground = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

SKTexture *backgroundTexture = [SKTexture textureWithCGImage:tiledBackground.CGImage];
SKSpriteNode *backgroundNode = [SKSpriteNode spriteNodeWithTexture:backgroundTexture];
[self addChild:backgroundNode];

- David Lawson

Answer 2

我发现上面链接的Sprite Kit着色器在Xcode 10中无法使用，所以我自己写了一个。以下是着色器代码：

void main(void) {
    vec2 offset = sprite_size - fmod(node_size, sprite_size) / 2;
    vec2 pixel = v_tex_coord * node_size + offset;
    vec2 target = fmod(pixel, sprite_size) / sprite_size;
    vec4 px = texture2D(u_texture, target);
    gl_FragColor = px;
}

请注意，如果您希望将图案居中，只有在这种情况下才需要offset变量-如果您希望平铺图案始于纹理的左下角，则可以省略它及其在以下行中的添加。

此外，请注意，您需要手动向着色器添加node_size和sprite_size变量（如果它们发生更改，则需要更新），因为它们都已不再有标准表示。

// The sprite node's texture will be used as a single tile
let node = SKSpriteNode(imageNamed: "TestTile")
let tileShader = SKShader(fileNamed: "TileShader.fsh")

// The shader needs to know the tile size and the node's final size.
tileShader.attributes = [
    SKAttribute(name: "sprite_size", type: .vectorFloat2),
    SKAttribute(name: "node_size", type: .vectorFloat2)
]

// At this point, the node's size is equal to its texture's size.
// We can therefore use it as the sprite size in the shader.
let spriteSize = vector_float2(
    Float(node.size.width),
    Float(node.size.height)
)

// Replace this with the desired size of the node.
// We will set this as the size of the node later.
let size = CGSize(x: 512, y: 256)
let nodeSize = vector_float2(
    Float(size.width),
    Float(size.height)
)

newBackground.setValue(
    SKAttributeValue(vectorFloat2: spriteSize),
    forAttribute: "sprite_size"
)

newBackground.setValue(
    SKAttributeValue(vectorFloat2: nodeSize),
    forAttribute: "node_size"
)

node.shader = tileShader
node.size = size

- Ash

Answer 3

是的，可以通过调用CGContextDrawTiledImage()来实现这一点，但对于中等和大型节点而言，这会浪费很多内存。一个显著改进的方法在spritekit_repeat_shader提供。这篇博客文章提供了示例GLSL代码，并提供了BSD许可的源代码。

- MoDJ