How would I make an explosion animation on iOS?

问题

I have an iOS game, and when a ball hits a target it explodes.

What would be the best way to animate this explosion?

回答1:

If you're looking for something simple.

Make a series of images that animate the explosion. Add those to a UIImageView and start the animation. Something like this:

UIImage *image0 = [UIImage imageNamed:@"explosion0.png"];
UIImage *image1 = [UIImage imageNamed:@"explosion1.png"];
UIImage *image2 = [UIImage imageNamed:@"explosion2.png"];
UIImage *image3 = [UIImage imageNamed:@"explosion3.png"];

myImageView.animationImages = [NSArray arrayWithObjects:image0, image1, image2, image3, nil];
[myImageView setAnimationDuration:0.75f];

[myImageView startAnimation];

回答2:

For a bouncing ball game, the Cocos2D game- and Box2d physics- (included with Cocos2D) engines are a great way to go.

Ray Wenderlich has three great tutorials on exactly what you want to do:

Intro to Box2D with Cocos2D Tutorial: Bouncing Balls
How To Create A Breakout Game with Box2D and Cocos2D Tutorial: Part 1
How To Create A Breakout Game with Box2D and Cocos2D Tutorial: Part 2

Once you get past the basics of working with Box2d objects, the key step is to create a Contact Listener (as described in the tutorials) which will tell you when you have a collision. Check (by iterating over contacts in your tick method) if the colliding objects are the ones you want for the explosion, and if so add them to a vector of objects to be destroyed (we can't do this while iterating over contacts or we will invalidate the iterator). Remember the coordinates of the collision and set a flag for explosion.

After exiting the loop destroy the bodies and run the explosion effect at the saved position.

Cocos2D has some very nice built-in explosion effects, and the one I am using for my project is CCParticleSun. You can find some screenshots of someone using this effect here. (The curiously named CCParticleExplosion just gave a lot of confetti flying around the screen.)

Here is the relevant portion from some preliminary code I have working, which is mostly from the tutorial. You will still need to do everything else, eg. create and set up your world and bodies in your init method, update positions, apply forces, and draw in your tick method, implement your Contact Listener class, etc. For all this refer to the tutorials.

std::vector<b2Body *>toDestroy;
std::vector<MyContact>::iterator pos;
CGPoint p;
bool explode = FALSE;
for(pos = _contactListener->_contacts.begin(); 
    pos != _contactListener->_contacts.end(); ++pos) {
    MyContact contact = *pos;

    if ((contact.fixtureA->GetBody() == _moonBody && contact.fixtureB->GetBody() == _moon2Body) ||
        (contact.fixtureA->GetBody() == _moon2Body && contact.fixtureB->GetBody() == _moonBody)) {
        NSLog(@"Moons collided!");
        explode = TRUE;
        p = CGPointMake(PTM_RATIO*(_moonBody->GetPosition().x + _moon2Body->GetPosition().x)/2.,PTM_RATIO*(_moonBody->GetPosition().y + _moon2Body->GetPosition().y)/2.);
        if (std::find(toDestroy.begin(), toDestroy.end(), _moonBody) == toDestroy.end()) {
            toDestroy.push_back(_moonBody);
        }
        if (std::find(toDestroy.begin(), toDestroy.end(), _moon2Body) == toDestroy.end()) {
            toDestroy.push_back(_moon2Body);
        }
    }
}

std::vector<b2Body *>::iterator pos2;
for(pos2 = toDestroy.begin(); pos2 != toDestroy.end(); ++pos2) {
    b2Body *body = *pos2;     
    if (body->GetUserData() != NULL) {
        CCSprite *sprite = (CCSprite *) body->GetUserData();
        [sprite.parent removeChild:sprite cleanup:YES];        }
    world->DestroyBody(body);
}

if (explode)
{
    explosion = [[CCParticleSun alloc]initWithTotalParticles:250];
    explosion.texture = [[CCTextureCache sharedTextureCache] addImage:@"fire.png"];
    explosion.autoRemoveOnFinish = YES;
    explosion.startSize = 15.0f;
    explosion.speed = 30.0f;
    explosion.position = p;
    explosion.duration = 1.0f;
    [self addChild:explosion z:self.zOrder+1];
}

回答3:

What you want, then, is a way to create a particle emission system. My suggestion is to use a CAEmitterLayer. Ray Wenderlich has a great tutorial: UIKit Particle Systems in iOS 5 Tutorial

回答4:

iPhone Programming Tutorial: Animating a Game Sprite

If you need to make an explosion another alternative would to use Cocos2d and do:

CCParticleSun *anExplosion=[CCParticleGalaxy node];
[kk setPosition:ball.position];
[self addChild:anExplosion];

Not really an animation, also, from the question you don't seem to be using Cocos2d, but if you start using it you can do this...

来源：https://stackoverflow.com/questions/6515948/how-would-i-make-an-explosion-animation-on-ios

标签

iphone

ios

core-animation