iOS SpriteKit How to make stroke color transparent

Question

I do some simple games using SpriteKit now. There is one problem with stroke color in drawing process.

I have to do my colored shapeNode transparent, but my stroke color stays the same every time. I've tried different techniques to do my node be entirely transparent: 1)setting alpha component to stroke color 2)setting alpha component to whole node. It didn't help. Is there is any way to achieve or get around this?

Creation of my node

CGMutablePathRef arc = CGPathCreateMutable();
    cardWidth = cardWidth + cardAlpha;
CGPathAddRoundedRect(arc, NULL, CGRectMake(-cardWidth/2, -cardHeight/2, cardWidth, cardHeight), roundRadius, roundRadius);
roundRect = [SKShapeNode node];
roundRect.name = self.name;
CGFloat lineWidth = 2.0;
CGPathRef strokedArc =
CGPathCreateCopyByStrokingPath(arc, NULL,
                                   lineWidth,
                                   kCGLineCapButt,
                                   kCGLineJoinMiter, // the default
                                   10); // 10 is default miter limit


roundRect.path = strokedArc;
[self addChild:roundRect];

Then i try to change color and opacity

roundRect.fillColor = rightColor;
roundRect.strokeColor = rightColor;
roundRect.strokeColor = rightColor;
termLabel.fontColor = rightColor;
roundRect.alpha = 0.5;

Answer 1

I think the problem is with your path. the fill color is covering your stoke so you don't see any change of the stroke color. But with my test, the node.alpha component should work. It maybe the type of iOS version, Apple may change how some things work together.

Here is some code to play with:

    CGMutablePathRef arc = CGPathCreateMutable();
    CGFloat cardWidth = 100;
    CGFloat cardHeight = 170;
    CGFloat roundRadius = 10;
    CGFloat r,g,b = 1; // color components
    CGRect rect = CGRectMake(-cardWidth/2, -cardHeight/2, cardWidth, cardHeight);
    CGPathAddRoundedRect(arc, NULL, rect, roundRadius, roundRadius);
    __block SKShapeNode *roundRect = [SKShapeNode node];
    roundRect.name = @"card";
    CGFloat lineWidth = 20.0;
    CGPathRef strokedArc =
    CGPathCreateCopyByStrokingPath(arc, NULL,
                                   lineWidth,
                                   kCGLineCapButt,
                                   kCGLineJoinMiter, // the default
                                   10); // 10 is default miter limit

    roundRect.path = strokedArc;
//    roundRect.alpha = 0.3; // uncomment if want to use.
    [scene addChild:roundRect];

    // delay
    SKAction *waitAction = [SKAction waitForDuration:1/15.0f];

    // variables
    static CGFloat direction = 1;
    static CGFloat speed = .1f;
    static CGFloat alpha = 0;

    // action to aniamte shape
    SKAction *changeColorAction = [SKAction runBlock:^{
        CGFloat vel = direction * speed;
        CGFloat newValue = alpha + vel;
        if(newValue < 0 || newValue > 1){
            direction *= -1;
        } else {
            alpha = newValue;
        }

        UIColor *newColor = [UIColor colorWithRed:r green:g blue:b alpha:alpha];

        // animate shape
        [roundRect setStrokeColor:newColor];
//        [roundRect setFillColor:newColor]; // uncoment to animate.
    }];

    // Did SKAction because its under the scene run loop.
    SKAction *seq = [SKAction sequence:@[ waitAction, changeColorAction ]];
    [scene runAction:[SKAction repeatActionForever:seq]];