Question

i am working on a game to spot the difference between 2 images.

I want to add an effect when you spot it. drawing out a circle would be much better than just showing the circle suddenly. but i’ve never done core animation or opengl before.

i don’t think preparing 100 sprites and changing the sprite frame by frame is a good idea.
here is my code: (just add a circle image to both left and right image. )

-(void) show {
    CCSprite* leftCircle = [CCSprite spriteWithFile:@"circle.png"];
    CCSprite* rightCircle = [CCSprite spriteWithFile:@"circle.png"];
    leftCircle.scaleX = size.width / [leftCircle boundingBox].size.width;
    leftCircle.scaleY = size.height / [leftCircle boundingBox].size.height;
    rightCircle.scaleX = size.width / [rightCircle boundingBox].size.width;
    rightCircle.scaleY = size.height / [rightCircle boundingBox].size.height;
    leftCircle.anchorPoint = ccp(0, 1);
    rightCircle.anchorPoint = ccp(0, 1);
    leftCircle.position = leftPosition;
    rightCircle.position = rightPosition;
    [[GameScene sharedScene] addChild:leftCircle z: 3];
    [[GameScene sharedScene] addChild:rightCircle z: 3];
    shown = YES;
}

So how can i implement it? It would be great if you can provide some source code.

Answer 1

As a simple way i can recommend you to create a circle and put it’s scale to zero. Then create a CCScale action and run it. It will give you a growing circle. Here is the code:

CCSprite *sprite = [CCSprite spriteWithFile:@"mySprite.png"];
[sprite setScale:0.01];
id scale = [CCScale actionWithDuration:0.3 scale:1];
[sprite runAction:scale];

The other action can be used is CCFadeIn.You can make your sprite invisible after creation and make it fade in:

CCSprite *sprite = [CCSprite spriteWithFile:@"mySprite.png"];
[sprite setOpacity:0];
id fade = [CCFadeIn actionWithDuration:0.3];
[sprite runAction:fade];

Also you can combine this actions:

[sprite runAction:fade];
[sprite runAction:scale];

Also you can make it big (set scale 3 for example) and transparent. And make it fade in and scale down to highlight your image

To Draw a circle via drawing effect you can make it from small parts (arcs) and then build your circle from them. I think it also will be cool if you make don’t make the part visible when adding, but make it fade in. I mean something like this:

-(void) init
{
    NSMutableArray *parts = [[NSMutableArray array] retain]; //store it in your class variable
    parts_ = parts;
    localTime_ = 0; //float localTime_ - store the local time in your layer
    //create all the parts here, make them invisible and add to the layer and parts
}

-(void) update: (CCTime) dt //add update method to your layer that will be called every simulation step
{
    localTime_ += dt;

    const float fadeTime = 0.1;
    int currentPart = localTime_ / fadeTime;

    int i = 0;
    for (CCSprite *part in parts)
    {
        //setup the opacity of each part according to localTime
        if (i < currentPart) [part setOpacity:255];
        else if (i == currentPart)
        {
            float localLocalTime = localTime - i*fadeTime;
            float alpha = localLocalTime / fadeTime;
            [part setOpacity:alpha];
        }
        ++i;
    } 
}