SF Symbols work with SpriteKit on iOS?

Can I use them in SK and do the animations work?

Thanks, Patrick

Answered by Ache in 850863022

I also use SF Symbols with SpriteKit for quick UI and icon prototyping. I have an SKTexture extension to create SpriteKit textures from SF Symbol on iOS:

extension SKTexture {
    convenience init?(systemName: String, pointSize: CGFloat, weight: UIImage.SymbolWeight = .regular) {
        let config = UIImage.SymbolConfiguration(pointSize: pointSize, weight: weight)
        guard let symbol = UIImage(systemName: systemName)?.applyingSymbolConfiguration(config) else { return nil }
        
        let rect = CGRect(origin: .zero, size: symbol.size)
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0)
        
        guard let context = UIGraphicsGetCurrentContext() else { return nil }
        
        /// Flip the coordinate system
        context.translateBy(x: 0, y: rect.size.height)
        context.scaleBy(x: 1, y: -1)
        
        /// Generate a white image
        UIColor.white.setFill()
        context.fill(rect)
        
        context.setBlendMode(.destinationIn)
        
        if let cgImage = symbol.cgImage {
            context.draw(cgImage, in: rect)
        } else {
            return nil
        }
        
        guard let result = UIGraphicsGetImageFromCurrentImageContext() else { return nil }
        
        self.init(image: result)
    }
}

Usage example:

let iconTexture = SKTexture(systemName: "play.fill", pointSize: 17, weight: .bold)
let sprite = SKSpriteNode(texture: iconTexture)
sprite.colorBlendFactor = 1
sprite.color = .systemBlue
addChild(sprite)

Hi, Can you provide more information about what kinds of things you're interested in doing by combining these two technologies?

Hi, just getting back to this project.

I was looking to use these symbols on buttons for settings, mute, exit that kind of things so I wouldn't have to create those myself.

Thanks, Patrick

I also use SF Symbols with SpriteKit for quick UI and icon prototyping. I have an SKTexture extension to create SpriteKit textures from SF Symbol on iOS:

extension SKTexture {
    convenience init?(systemName: String, pointSize: CGFloat, weight: UIImage.SymbolWeight = .regular) {
        let config = UIImage.SymbolConfiguration(pointSize: pointSize, weight: weight)
        guard let symbol = UIImage(systemName: systemName)?.applyingSymbolConfiguration(config) else { return nil }
        
        let rect = CGRect(origin: .zero, size: symbol.size)
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0)
        
        guard let context = UIGraphicsGetCurrentContext() else { return nil }
        
        /// Flip the coordinate system
        context.translateBy(x: 0, y: rect.size.height)
        context.scaleBy(x: 1, y: -1)
        
        /// Generate a white image
        UIColor.white.setFill()
        context.fill(rect)
        
        context.setBlendMode(.destinationIn)
        
        if let cgImage = symbol.cgImage {
            context.draw(cgImage, in: rect)
        } else {
            return nil
        }
        
        guard let result = UIGraphicsGetImageFromCurrentImageContext() else { return nil }
        
        self.init(image: result)
    }
}

Usage example:

let iconTexture = SKTexture(systemName: "play.fill", pointSize: 17, weight: .bold)
let sprite = SKSpriteNode(texture: iconTexture)
sprite.colorBlendFactor = 1
sprite.color = .systemBlue
addChild(sprite)

@Ache: Thank you thank you thank you. This was exactly what I needed, it works wonderfully. You wouldn't happen to know how to do the same thing in macOS land would you?

SF Symbols work with SpriteKit on iOS?
 
 
Q