Magnificent. This will make for an excellent shockwave effect.

I noticed if I try to use CCLiquid, CCWaves, etc. with this ripple effect that the ripple effect just turns black. Is there a way to get them both to work at the same time?

hi, if i use a software to pack my texture in a one big texture atlas 1024x1024 can i create my single sprite in any dimension without waste memory?
i know that cocos2d 1.1 use npot texture by default...this mean that my texture atlas can be 1030x1030 without problems?

AFAICS, the only two shaders I saw were related to image capturing... maybe I should look at it again.

I am now going for a shaders based solution myself... right now testing a fragment shader solution (I have to get the center of the function moving according to the user's touch, the shader already supports changing its center, and then work on decay of the ripples as they repeat indefinitely right now), but I would like to explore your solution with a mixed CPU+VS approach (tessellate on the CPU, transform position and UV's on the GPU).

Another thing that I am trying to do is to make sure we can make the effect more resolution dependent: this way you can handle the fragment shader load on a low resolution buffer and then scale it up with bi-linear filtering. I am trying to think about how Cocos2D handles rendering: ideally, for this to work as easily as possible the -draw method would update a bitmap for the surface and geometric operations such as scaling, translation, and rotation were done in a separate pass starting from the surface bitmap.

I'll keep updating that github project to test this.

Hehe, cramming too many random thoughts in a single post.

[ANSWER]

Oh well, i actually send the shared directer runWithScene: and passed in a layer, not a scene. To my surprise, this actually worked? So, the sharedDirector can't tell the difference between a scene or layer i guess?

Hi all,

I'm reading through a book on cocos2d, and the second chapter puzzles me. I created 2 layers, one containing a sprite as a character, the other a sprite as background. I then create a game scene that adds the 2 layers as childs in the init method. I then redirect the CCDirecter sharedDirector in the appDelegate.m to load in the gameScene. Now, i get displayed the layer showing the game scene, but not the background? any particular reason for this? Here are the code:

@implementation BackgroundLayer

-(id) init {
self = [super init];
if (self) {
CCSprite *backgroundImage;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
// Indicate game is running on ipad
backgroundImage = [CCSprite spriteWithFile:@"background.png"];
} else {
backgroundImage = [CCSprite spriteWithFile:@"backgroundiPhone.png"];
}

CGSize screenSize = [[CCDirector sharedDirector] winSize];
[backgroundImage setPosition:CGPointMake(screenSize.width/2, screenSize.height/2)];

[self addChild:backgroundImage z:0 tag:0];
}

return self;
}

@implementation GameplayLayer

-(id) init {
self = [super init];
if (self) {
CGSize screenSize = [CCDirector sharedDirector].winSize;
// enable touches
self.isTouchEnabled = YES;
vikingSprite = [CCSprite spriteWithFile:@"sv_anim_1.png"];
[vikingSprite setPosition:CGPointMake(screenSize.width/2, screenSize.height*0.17f)];

[self addChild:vikingSprite];

if (UI_USER_INTERFACE_IDIOM() != UIUserInterfaceIdiomPad) {
// if NOT for the ipad, scale down ole
// in games, use this to load art sized for the device
[vikingSprite setScaleX:screenSize.width/1024.0f];
[vikingSprite setScaleY:screenSize.height/768.0f];
}
}

return self;
}

@implementation GameScene

-(id) init {
self = [super init];
if (self) {
// bacground layer
BackgroundLayer *backgroundLayer = [BackgroundLayer node];
[self addChild:backgroundLayer z:0];
// Gameplay layer
GameplayLayer *gameplayLayer = [GameplayLayer node];
[self addChild:gameplayLayer z:5];
}

return self;
}

Thanks on advance

@paco_777
That demo uses ES2.0 and vertex shaders. That is SO much cheating ...

Performance on iPad 1 is still too low once you drag your finger around for a while. Still, this experiment allowed me to practice with quite a few things.

Hi,
Just saw this topic.
You may already know it, but there is a quite good ripple demo effect provided by Apple in their samples :
http://developer.apple.com/library/ios/#samplecode/GLCameraRipple/Introduction/Intro.html

I don't know how easy this could be integrated with Cocos2D.
I also don't know how good your results are compared to this demo, but, in case you're not aware of that demo, you should have a look at it, since it might contain some interesting info.

@Panajev
Cool of you to add on this. I really haven't got friendly with github yet, so I have a hard time following.

As for the updates. I use the final rippleSprite for two projects I am currently working on, so classes tend to be specific at this point.
What saved me the most time in my final classes is:
1)
Only scan inside ripple area. I calculate a simple box based on current ripple radius, and only scan that. Saved a lot of calculations, especially when the ripples are "young"
2)
Since I only simulate water, and the center in water simulation settles fast, I also do not scan ripples below a certain radius threshold. While it saves less calculations, it especially adds up on "older" ripples. ( good combination with saving on young ripples )
3)
I count ongoing calculations ( ripple vertices modified ), and based on hardware ( 4999 calculations on a 3G ), I remove oldest ripples. On an iP4 ( double tesselation due to HD ) and max 19999 calculations, it is almost unnoticeable.
4)
Texture correction is dropped above a certain radius, and only vertex lighting is done. The distortion is so subtle at this point, that vertex lighting makes a better result at higher radius. Vertex lighting at lower radius is darkened, because that makes twirls look more impressive. At hight radius vertex lighting is lightened because it makes it look more like caustics on the background.

The caustics is made like HalfLife, by scanning two patterns in opposite Y direction. I added a modulation in X direction, to make it more subtle and less repeatable.

I hope this made sense ...

Added a small README and made a pull request (one can try ;)). One of the other changes is that the compiler being targeted now is the latest Clang release. Tested with iOS 5.1 Beta 3 on the simulator and on the iPad 1 on which it is a bit slow when played full-screen, but not too slow. Load must be reduced further because the touches are lagging behind a bit too much right now (if you move the finger fast across the screen).

Edit: iPad is full screen and Retina should work too... brute force scale to create the hd and ipad images and adjustments wherever I saw iPhone's resolution being targeted.

wow it's really cool seeing professionals talking and sharing their solutions!

https://github.com/Panajev/rippleDemo

Here it is, a very quick conversion.
I'll toy with shaders next although I do believe that it might be cheaper with vertex trickery on iPad 1 than moving to a full shaders based solution on such a constrained device (pixel processing power:resolution wise).

I think that it would be useful to render to a low resolution texture and upscale it with bi-linear filtering active. I have used it with the old CCGrid3D ripple effects and it looks quite good(1/4 resolution CCRenderTexture). I'll practice with your code by forking it and doing the least it has to be done to convert it to OpenGL ES 2.0 and Cocos2D 2.0.

@pOoOq
The rippleSprite renders a texture to a rectangle you define. This is done "manually", ie using OpenGL directly.
So in order to render anything which will be affected by the ripples, you need to include it in the texture you provide for rippleSprite.
The easiest way, is to grab the texture from a CCRenderTexture. You then render your stuff to the CCRenderTexture, and in the draw method of rippleSprite, you then simply bind the texture of the CCRenderNode.
So the changes to rippleSprite only includes maintaining a pointer to the CCTexture2D of the CCRenderTexture, and bind this when drawing.

@property ( retain ) CCTexture2D* texture; 

@synthesize texture;

glBindTexture( GL_TEXTURE_2D, [ texture name ] );

Excellent !

Would you please explain more how to add CCLabel/CCSprite (runtime update) underneath the ripple effect? Thanks.

Regards,
p0o0q

Hi everyone, I apologise if this sort of thread has been posted and discussed but i could not see it when i looked, I am pretty new to cocos2d and this is the first time I have done any animations on it. I have created a valid plise and png with the same file name and added them to my project, i then have the following code in my class to setup the animation of the sprite in it:

CCSpriteFrameCache* framecache = [CCSpriteFrameCache sharedSpriteFrameCache];

CCSpriteBatchNode *spriteSheet = [CCSpriteBatchNode batchNodeWithFile:@"SnakeAnimation.png"];
[m_gameScene addChild:spriteSheet];

[framecache addSpriteFramesWithFile:@"SnakeAnimation.plist"];

m_sprite = [CCSprite spriteWithSpriteFrameName:@"Snake2.png"];
[spriteSheet addChild:m_sprite];

NSMutableArray* animFrames = [NSMutableArray array];
for(int i = 0; i < 7; i++)
{
CCSpriteFrame* frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"Snake%d.png",i+1]];
[animFrames addObject:frame];
}

CCAnimation *animation = [CCAnimation animationWithFrames:animFrames delay:0.1];

[m_sprite runAction:[CCRepeatForever actionWithAction: [CCAnimate actionWithAnimation:animation] ]];

I have checked the frame cache etc and they are all valid and appear to add the plist etc correctly, however they can never find any of the files and my objects are created on screen without any image what so ever. I'm not sure what else i need to do to get it working so any help would be greatly appreciated!

@breskit: I've replaced with CCCallFuncN and doesn't work...

@Birkemose: Tried your code but it doesn't work either, maybe I'm not use it correctly; Can you explain? Thanks!

Would look like this?

for ( int index = selectedSpritesArray.count - 1; index >= 0; index -- ) {
        selectedSprite = [ selectedSpritesArray objectAtIndex:index ];
        if (CGRectContainsPoint(selectedSprite.boundingBox, touchLocation) ) {
            [selectedSpritesArray removeObjectAtIndex: index ];
        newSprite = selectedSprite;
        break;
        }
    }

thank you winzz it works fine

create CCNode in the middle of the screen that move along the sprite on the left side.
then use CCFollow with that CCNode

Thanks for all your help. :)

@JC, I did not understand your meaning at first. Now I think it must work. Thanks a lot.

Heloo
as you know ccfollow is moving the sprite to the center of the screen,i want to find a way to hold my sprite in it's position that is left side.
can anyone help me?
thank you in advance

@elsevero
No. I dont think it is allowed to modify arrays, using that syntax. Do it the old fashioned way.

for ( int index = selectedSpritesArray.count - 1; index >= 0; index -- ) {
  selectedSprite = [ selectedSpritesArray objectAtIndex:index ];
  if ( ... ) [ selectedSpriteArray removeObjectAtIndex: index ];
}

@breskit: Thanks! I'll try that, and let you know the results :)

@phantomsri: Thank you for the code! I'm using Ray's tutorial with dragging sprites to the screen but I don't think will be useful for me...
I'm saying that because I have objects that are placed to the exact position (lets say: box.png sprite must be always to ccp(128,128) and if I'm trying to touch the sprite object by tag I have a issue and that is always I'll be able to touch the box.png object around the position 128(x), 128(y)
I'm using a parallaxNode to scroll my two CCLayers in which I've added the sprite objects.

Another reason for adding the objects to array and remove them is to track them. I'll have to know if the player removed 4 specific sprites to display a message or do something else..

If there's any other possibility, I'd love to know it!

@Birkemose: Thanks! You mean:

for (CCSprite *sprite in [selectedSpritesArray reverseObjectEnumerator]) ?

You can not iterate forward through an array, removing array members on the fly. It simply does not work.
You have to iterate backwards.

hi @elsevero first of all, all the sprites i used comes with a tag.

I used the tag to remove the sprite. I had tagged it from Number 1 to 3. The code i posted in my tread comes with a loop, each time the user touches the overlapped sprite, the code will check is the sprite tag is number 1 to 3, if its the correct tag it will remove it .

Try this if you are using the code from http://www.raywenderlich.com/

movableSprites = [[NSMutableArray alloc] init];
        NSArray *images = [NSArray arrayWithObjects:@"bird.png", @"cat.png", @"dog.png", @"turtle.png", nil];
        for(int i = 0; i < images.count; ++i) {
            NSString *image = [images objectAtIndex:i];
            CCSprite *sprite = [CCSprite spriteWithFile:image];
            float offsetFraction = ((float)(i+1))/(images.count+1);
            sprite.position = ccp(winSize.width*offsetFraction, winSize.height/2);
            [self addChild:sprite z:1 tag:i]; // the tag i based on image count 1 to 4, so the tag will start from 1 to 4
            [movableSprites addObject:sprite];

try this touch code

-(void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch* myTouch = [touches anyObject];
    CGPoint location = [myTouch locationInView: [myTouch view]];
    location = [[CCDirector sharedDirector]convertToGL:location];
    location = [self convertToNodeSpace:location];

    int totalNumberOfItems=5;
    for (int y=0; y < totalNumberOfItems; y++){
        CCSprite *temp = (CCSprite*)[self getChildByTag:y];

        CGRect test1 = [temp boundingBox];

        if (CGRectContainsPoint(test1, location)) {

            [self removeChild:temp cleanup:YES ];
            // i have removed "return;"
        }
    }  

}

Replace the CCCallFunc with CCCallFuncN. This was you pass a reference to the object you are working on.

@phantomsri: How did you manage to remove overlapped sprites?

I was thinking to use Ray's tutorial example (http://www.raywenderlich.com/2343/how-to-drag-and-drop-sprites-with-cocos2d) and adjust it, but I have some issues with the overlapped sprites; The issue is that I can't remove the objects that are place below the first sprite.

Here's the code which I'm using right now (I'm using some animation but I don't think that causes that):

- (void)selectSpriteForTouch:(CGPoint)touchLocation {
    CCSprite * newSprite = nil;
    for (CCSprite *sprite in selectedSpritesArray) {
        if (CGRectContainsPoint(sprite.boundingBox, touchLocation)) {
            newSprite = sprite;
            break;
        }
    }

    if (newSprite) {
        CCSprite *fixedSprite = [CCSprite spriteWithSpriteFrameName:@"Animation_01.png"];

        fixedSprite.position = ccp(newSprite.contentSize.width/2,newSprite.contentSize.height/2);
        [newSprite addChild:fixedSprite];

        NSMutableArray *animFrames = [NSMutableArray array];
        for(int i = 1; i <= 10; ++i) {

            [animFrames addObject: [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName: [NSString stringWithFormat:@"Animation_%02d.png", i]]];
        }

        CCAnimation *anim = [CCAnimation animationWithFrames:animFrames delay:0.05f];
        CCActionInterval *animAction = [CCAnimate actionWithAnimation:anim restoreOriginalFrame:NO];

        id seq = [CCSequence actions: animAction, [CCCallFunc actionWithTarget:fixedSprite selector:@selector(removeFromParentAndCleanup:)], [CCCallFunc actionWithTarget:newSprite selector:@selector(removeFromParentAndCleanup:)], nil];
        [fixedSprite runAction:seq];
    }
}

- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event {
    CGPoint touchLocation = [self convertTouchToNodeSpace:touch];
    [self selectSpriteForTouch:touchLocation];
    return TRUE;
}

If anyone knows, please guide me; thanks!

Hi,

Looked trough many threads, can't find a solution.
I've implemented accelerometer ala "Tilt to Live", from here

Accelerometer code works very nice, no issue here. But there is 2 strange things:

- first, I downloaded example from link above and little image moves much faster in example project with same settings compared to my project (example project in in OpenGL)
- second, in my game when sprite moves I can see a little trail behind image as if it doesn't refresh nicely, sort of flickering effect.

Basically code is this:

- (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration
{
    Vec2 accel2D(0,0);
    Vec3 ax(1, 0, 0);
    Vec3 ay(-.63f, 0,-.92f);
    Vec3 az(Vec3::Cross(ay,ax).normalize());
    ax = Vec3::Cross(az,ay).normalize();
    accel2D.x = -Vec3::Dot(Vec3(acceleration.x, acceleration.y, acceleration.z), ax);
    accel2D.y = -Vec3::Dot(Vec3(acceleration.x, acceleration.y, acceleration.z), az);

    const float xSensitivity = 2.8f;
    const float ySensitivity = 2.8f; // yay magic numbers!
    const float tiltAmplifier = 8; // w0ot more magic numbers

    // since we are in a landscape orientation.
    // now apply it to our player's velocity data.
    // we also rotate the 2D vector by 90 degrees by switching the components and negating one
    vx += -(accel2D.y) * tiltAmplifier * xSensitivity;
    vy += -accel2D.x * tiltAmplifier * ySensitivity;
}

Then in update I do this:

-(void) update:(ccTime)delta
{
	x += vx;
	y += vy;

	// put the breaks on our velocity.
	vx *= 0.2f;
	vy *= 0.2f;

	//bound the player
	if (x > 460)
	{
		x = 460;
	}
	if( x < 20)
	{
		x = 20;
	}

	if(y > 300)
	{
		y = 300;
	}
	if( y < 20)
	{
		y = 20;
	}

    playerSprite.position = ccp(x, y);
}

Tried with setting animation refresh to 1/30, also accelerometer update interval to 1/30, nothing helps.
If I increase sensitivity via xSensitivity, ySensitivity I can get sprite to move as fast as in example project, but flickering effect is even worse.

Any idea what I'm doing wrong? Why image in my game runs much slower then in example with same settings? Could it be because in cocos2D we have update method?

If you're using sprite frame cache you could do something like:

CCSpriteFrame *frame;
frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"first.png"];
[self setDisplayFrame:frame];

frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"second.png"];
[self setDisplayFrame:frame];

How to add animation when the sprite are replacing?