使用精灵套件创建2d涟漪效果

Question

How can i create a 2D ripple effect on water with sprite kit .

Like i have a scene which include 2D still water and when tapped on that, small circles appears scale and disappear say 5-6 circles scaling parallel giving the feeling of ripples Not actualy doing anything to water just creating images on it.

I was wondering what could be the best way to sole this problem. How can i achieve something like that. Any ideas?

Answer 1

In node in which you wish to create ripple just do something like this

    NSTimeInterval singleRippleDuration = 1.0f;
    CGFloat ripleEndScale = 3.0f;
    NSTimeInterval timeBetweenRipples = 0.3f;
    NSUInteger numberOfRipples = 5;
    SKAction* scaleUpAction = [SKAction scaleTo:ripleEndScale duration:singleRippleDuration];
    SKAction* fadeOutAction = [SKAction fadeOutWithDuration:singleRippleDuration];

    SKAction* rippleAction = [SKAction group:@[scaleUpAction,fadeOutAction]];

    SKAction* createRipple = [SKAction runBlock:^{
        //Create your ripple node somehow (SKShapeNode or SKSprite will do)
        //set it to a desired position
        [rippleNode setPosition:desiredPosition];
        //Set scale to 0 so it scales from point
        [rippleNode setScale:0.0f];
        [rippleNode runAction:createRipple];
        [self addChild:rippleNode];
    }];

    SKAction* wait = [SKAction waitForDuration:timeBetweenRipples];

    [self runAction:[SKAction repeatAction:[SKAction sequence:@[createRipple,wait]] count:numberOfRipples]];

Answer 2

There is a typo in the "CreateRipple" method, it runs itself in the codeblock rather than "rippleAction" like it should, the corrected method is:

SKAction* createRipple = [SKAction runBlock:^{
    //Create your ripple node somehow (SKShapeNode or SKSprite will do)
    //set it to a desired position
    [rippleNode setPosition:desiredPosition];
    //Set scale to 0 so it scales from point
    [rippleNode setScale:0.0f];
    [rippleNode runAction:rippleAction];
    [self addChild:rippleNode];
}];

Hope that helps!

Answer 3

Here's a complete very simple example of @Dobroćudni Tapir code. If developing for iOS you can try in touchesBegan instead of mouseDown.

import SpriteKit

class GameScene: SKScene {
    override func mouseDown(theEvent: NSEvent) {
        /* Called when a mouse click occurs */
        let location = theEvent.locationInNode(self)
        let singleRippleDuration = 1.0
        let ripleEndScale = CGFloat(3.0)
        let timeBetweenRipples = 0.3
        let numberOfRipples = 3
        let scaleUpAction = SKAction.scaleTo(ripleEndScale, duration: singleRippleDuration)
        let fadeOutAction = SKAction.fadeOutWithDuration(singleRippleDuration)
        let rippleAction = SKAction.group([scaleUpAction, fadeOutAction])

        let createRipple = SKAction.runBlock({
            let rippleNode = SKShapeNode(circleOfRadius: 200)
            rippleNode.position = location
            rippleNode.setScale(0)
            rippleNode.runAction(rippleAction)
            self.addChild(rippleNode)
        })

        let wait = SKAction.waitForDuration(timeBetweenRipples)
        runAction(SKAction.repeatAction(SKAction.sequence([createRipple, wait]), count: numberOfRipples))
    }
}