CODEWITHSUNDEEP
iosimageuicolorcore-image
Aen Tan
Aen Tan

Reputation: 3345

Strategy for dynamically changing colors in graphic assets

I'm designing a avatar maker app for iOS and one one of the things we need is for users to be able to choose various styles of eyes and the iris of each eye can be of different color.

Here's an example:

Eye color changer

What would be a good strategy in implementing this feature without having to generate a PNG for each combination? Any ideas? I'm not familiar with the technical aspects but one idea I can think of is to make the iris of each eye a separate image and then color transform it.

What would you recommend?

Upvotes: 2

Views: 491

Answers (2)

lyxera
lyxera

Reputation: 1680

I tested it out and it works. To the this post even more comprehensive, here is my experiment result:

base image:

base image

mask image:

mask image

result image:

result image

(on top of checker background, in order to show the transparency)

Upvotes: 0

Jon Hocking
Jon Hocking

Reputation: 229

I would recommend image masking in code.

You could set up two layers, one for the eye image and one for the iris colour, and generate each colour when the user taps on a selection.

Here's a quick bit of masking code that should do the trick on a UIImage

- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {

    CGImageRef maskRef = maskImage.CGImage; 

    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
        CGImageGetHeight(maskRef),
        CGImageGetBitsPerComponent(maskRef),
        CGImageGetBitsPerPixel(maskRef),
        CGImageGetBytesPerRow(maskRef),
        CGImageGetDataProvider(maskRef), NULL, false);

    CGImageRef masked = CGImageCreateWithMask([image CGImage], mask);
    return [UIImage imageWithCGImage:masked];

}

(taken from http://mobiledevelopertips.com/cocoa/how-to-mask-an-image.html)

You'd have to run the code each time but since the images are fairly small it shouldn't matter. You could write a nice helper to cache the results if you wanted to improve performance.

Upvotes: 4

Related Questions