watchOS 2 Complication with image

Question

So I was trying to get my watchOS 2 complication to show an image. Research landed me with these links:

https://www.bignerdranch.com/blog/watchkit-2-complications/ http://techotopia.com/index.php/A_watchOS_2_Complication_Tutorial https://developer.apple.com/library/prerelease/watchos/documentation/ClockKit/Reference/CLKImageProvider_class/index.html#//apple_ref/occ/cl/CLKImageProvider https://forums.developer.apple.com/thread/7426

I have tried using the image assets for the complication as well as just importing the individual image into the project. My code for loading the image is as follows:

lazy var utilitarianImageProvider: CLKImageProvider? = {
    if let image = UIImage(named: "Complication/Utilitarian") {
        return CLKImageProvider(onePieceImage: image)
    }
    else {
        print("Cannot find image named 'Complication/Utilitarian'")
    }
    return nil
}()

But that only ever results in this image:

The image I am trying to load is:

I have tried both a coloured image and a monochrome image and I always get the same result.

Answer 1

Try to set the black background to be transparent. The images are treated as alpha-only, which means all color in the image file will discarded and the watch will colorise it accordingly.