How does masking work in C4?

Question

I've set up a shape and an image that I'd like to mask my shape with. I set both their centers to the center of the canvas and then I wrote:

shape.mask = img;

But this gives me very strange results. The shape appears to be masked... sort of... the only part that shows up is the bottom right corner, the left half and the top half are cut off.

I also tried with two images, and with two shapes. Neither seems to work.
Am I missing a step? Perhaps the image I'm trying to mask with doesn't have any alpha values (I'm guessing here, I saw it mentioned in another question that they have to be images with alpha values and they mentioned .png files, so that's what I used)?

When I tried with two shapes, I tried setting the alpha value of the fill of the shape I wanted to mask with to 0.5 and 0.0 and also just setting the fillColor to Nil... still nothing.

I also (in a desperate last attempt) tried the method described here: Mask a view in Objective-C but I'm not very good with objective-c on its own so that didn't work either.

What is the correct way to mask in C4?

Answer 1

You're masking the right way.

What's going on is that an object's mask must be positioned based on the coordinate space of the object itself. When you add a subview to an object, it gets positioned relative to the object's {0,0}.

The following code will work and show you 2 things.

First, the masking shape is positioned to the center of the object, and NOT the center of the canvas:

s.center = CGPointMake(m.width/2,m.height/2);

Second, when you touch the canvas the animation will trigger the mask to move to the "center" coordinate of the canvas, but you'll notice that it goes further off. This is because it counts its position from the origin of the image.

@implementation C4WorkSpace {
    C4Image *m;
    C4Shape *s;
}

-(void)setup {
    m = [C4Image imageNamed:@"C4Sky"];
    s = [C4Shape ellipse:CGRectMake(0, 0, m.height, m.height)];

    m.center = self.canvas.center;
    s.center = CGPointMake(m.width/2,m.height/2);
    m.mask = s;
    [self.canvas addImage:m];
}

-(void)touchesBegan {
    s.animationDuration = 1.0f;
    s.center = self.canvas.center;
}

@end