Creating an SKSpriteNode from the SF Symbols font, in a different color

Question

I'm trying to create an SKSpriteNode with an image from the SF Symbols font, and while I can do it, I can't seem to make it any color other than black.

Here's my code:

let image = UIImage.init(systemName: "gear")
let colored = image!.withTintColor(.red)
let texture = SKTexture.init(image: colored)
let sprite = SKSpriteNode.init(texture: texture, size: CGSize.init(width: 32, height: 32))

Unfortunately, the resultant sprite always comes out in black (and not red).

What am I doing wrong?

Just a guess (not having tried it), but maybe `withTintColor(.red, renderingMode: .alwaysOriginal)`? — bg2b, Jan 23 '20 at 20:28
Or maybe `.alwaysTemplate`, the point being whatever mode it's picking for the context of making a texture, try the other... — bg2b, Jan 23 '20 at 20:43
@bg2b I tried `.alwaysOriginal` and it was the same, I’ll give the other a shot and see if that makes any difference. — Jon Grant, Jan 23 '20 at 22:41
The `extension` in this answer helped me https://stackoverflow.com/a/52921562/285190 — Flexicoder, Mar 16 '20 at 15:29

Knight0fDragon · Answer 1 · 2020-01-24T12:55:55.720

7

I think the problem is the UIImage is a vector graphic, and only UIImageViews properly handle them. Perhaps we can force it to a bitmap image to get it to work properly.

Here is some experimental code you can try:

let image = UIImage(systemName: "gear").withTintColor(.red)

let data = image.pngData()
let newImage = UIImage(data:data) 
let texture = SKTexture(image: newImage)
let sprite = SKSpriteNode(texture: texture,size: CGSize(width: 32, height: 32))

edited Jan 24 '20 at 12:55

answered Jan 24 '20 at 01:43

Knight0fDragon

16,609
2
23
44

This produces a completely white 32x32 box. When I view my code in the debugger, the `colored` image is red (correct) but when putting it into the texture it goes black again. – Jon Grant Jan 24 '20 at 09:54
1

Ok, I had time to research. A symbol image renders the tint color given because it is a vector graphic. Pretty sure I have seen that only UIImageView can handle vector graphics properly. Updating for something else – Knight0fDragon Jan 24 '20 at 12:48

SaganRitual · Answer 2 · 2021-11-15T16:01:40.960

You have to set colorBlendFactor on the sprite.

func makeSprite(symbolName: String) -> SKSpriteNode {
    let image = Image(systemName: symbolName)

    // Thanks Oskar!
    // https://stackoverflow.com/a/69315037/1610473
    // See my adapted version of his code further down; I
    // think you won't need it if you're on iOS, meaning
    // using UIImage, but that's all black magic to me.
    let renderedByOskar = image.renderAsImage()!

    let texture = SKTexture(image: renderedByOskar)
    let sprite = SKSpriteNode(texture: texture)

    sprite.color = .green
    sprite.colorBlendFactor = 1 // <-- This

    return sprite
}

A green symbol, thanks to black magic:

Many thanks to Oskar for the rendering extensions that enable me to do this on macOS, meaning, without UIImage:

class NoInsetHostingView<V>: NSHostingView<V> where V: View {
    override var safeAreaInsets: NSEdgeInsets {
        return .init()
    }
}

extension Image {
    func renderAsImage() -> NSImage? {
        let view = NoInsetHostingView(rootView: self)
        view.setFrameSize(view.fittingSize)
        return view.bitmapImage()
    }
}

public extension NSView {
    func bitmapImage() -> NSImage? {
        guard let rep = bitmapImageRepForCachingDisplay(in: bounds) else {
            return nil
        }

        cacheDisplay(in: bounds, to: rep)

        guard let cgImage = rep.cgImage else {
            return nil
        }

        return NSImage(cgImage: cgImage, size: bounds.size)
    }
}

Creating an SKSpriteNode from the SF Symbols font, in a different color

2 Answers2

Linked