Sprite kit and colorWithPatternImage - sprite-kit

Question

Do we have any way of repeating an image across an area, like a SKSpriteNode? SKColor colorWithPatternImage doesn't work unfortunately.
Edit:
I did the following categories, it seems to work so far. Using Mac, not tested on iOS. Likely needs some fixing for 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;
And the implementations. Put in respective files.
+(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;
}
Ok this is needed as well. This likely only works on 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 http://stackoverflow.com/a/18921840/129202 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
}

Answer 1

iOS working code:
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];

Answer 2

I found that the above linked sprite kit shader did not work with Xcode 10, so I rolled my own. Here is the shader code:
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;
}
Note that the offset variable is only required if you want the pattern centralised - you can omit it, and its addition in the following line, if you want your tile pattern to start with the tile texture's bottom left corner.
Also note that you will need to manually add the node_size and sprite_size variables to the shader (and update them if they change) as neither of these have standard representations any more.
// 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

Answer 3

Yes, it is possible to implement that with a call to CGContextDrawTiledImage(), but that wastes a lot of memory for medium and large size nodes. A significantly improved approach is provided at spritekit_repeat_shader. This blog post provides example GLSL code and BSD licensed source is provided.