Search code examples
iphonecore-animation

How to Anti-Alias Layers in iPhoneOS

We've had Reiner Knizia's Money out for a couple of months now. It's done pretty well, and so we've been updating it as time allows. However, one thing continues to bug me. I've never been able to get my layered cards to anti-alias correctly.

Here's a sample:

alt text

Cards that are laid straight are very clean, but whenever they're angled the black lines around the cards get jagged. I've tried this depending on both lines implicit to the artwork and lines drawn through drawRect:, and they both do the same thing. I've tried the edgeAntiAliasingMask and it doesn't do a thing as far as I can tell. I've tried masksToBounds for the sublayers set to NO and YES.

Right now my card is set up as a CALayer that has sub-CALayers for the front and the back, plus for a few other things like a lightening mask and a darkening mask. Here's some snippets of the code:

   CArdLayer *theCardLayer = [CArdLayer layer];
   theCardLayer.edgeAntialiasingMask = kCALayerLeftEdge | kCALayerRightEdge | kCALayerBottomEdge | kCALayerTopEdge;

   theCardLayer.front = [CALayer layer];
   theCardLayer.front.edgeAntialiasingMask = kCALayerLeftEdge | kCALayerRightEdge | kCALayerBottomEdge | kCALayerTopEdge;
   theCardLayer.front.bounds = theCardLayer.bounds;
   theCardLayer.front.masksToBounds = YES;
   theCardLayer.front.contents = (id)[cardDrawing CGImage];

   [theCardLayer addSublayer:theCardLayer.front];

Etc ...

Any ideas on how to make the cards actually anti-alias?

Solution

  • The best result that I could come up with was by doing what I suggested in my comment: I grew each (transparent) graphic by 1 pixel on each side. With that little bit of margin, the cards composited much better with the background.

    So, not exactly an iPhone code answer, but one that nonetheless works on the iPhone.

    Here's an "after" shot that you can compare to the "before", above: alt text