Creating explosions in HTML5 Game Dev.

[allc1865]

Hi, I'm trying to create an explosion when I shoot an enemy jet. Not just an image when I shoot an enemy but an explosion to where it explodes and then fades like a GIF files. How could I implement that on my game? Right now I'm using a sprite sheet.

 

Any help would be great thanks!

 

 

[allc1865]

Kind of like an explosion sequence...thanks...

[RadicalDude]

Well, what you want is an Animation. An Animation is just a sequence of images played on after another with a set time per frame (frame being one image in the animation). Since you didn't provide any information on I will assume you use some sort of time step and a game loop.

First you have an array which contains each frame. each frames stores the image from the sprite sheet and a time value. Say you start off with the first frame. You have a timer set to zero and a time set to the time of first frame of the animation. Now you update the timer each tick by the passed time since the last tick (delta time). If the timer reaches the time of the first frame you switch to the next frame (resetting the timer and setting the time to the time of the second frame and so on).

I hope this helps a little bit. I pretty bad at explaining so I might failed here (again...)

[Qqwy]

You have two simple options:

-Animations. This is the solution that RadicalDude was talking about. An example of a SpriteSheet of an explosion might be this.

-Particles. This basically means you create multiple 'fire' pictures that move in different directions when a ship explodes. It is a lot less static than an animation, but can take a little more work to get right. I have not done extensive research about this, but I believe Proton is library that supports creating particles in HTML5.

[allc1865]

Thanks for the comments, guys. 

@ParticalDude, do you know of any websites that teach you how to set up the code and stuff?

[Ryguy]

All of these are good approaches. What works best for me is to use some sort of circle image (a single frame is all you need) that increases in size and fades out. I've attached an image of the explosion I use in PolyPong (you can see it working via my signature).

I usually do something like this every game loop (please excuse the pseudo code):

ExplosionImageWidth = ExplosionImageWidth + (ExplosionMAXWidth - ExplosionImageWidth)/10

ExplosionAlpha = ExplosionAlpha / 1.1

If (ExplosionAlpha <= 1) destroy the explosion

Combine this with animations and/or particles if you'd like, but it does work well on its own. It generally is a lot less work than trying to draw a bunch of explosion animation frames.

[@99golems]

perfect explanation by Ryguy exept i would do this instead:

If (ExplosionAlpha <= 0.001) destroy the explosion

instead of:

 

If (ExplosionAlpha <= 1) destroy the explosion

[Ryguy]

Oops, I guess that depends on how your alpha is calculated. I've been working with a scale of 0-100 for a while now. So yes, if an alpha of 1 is completely opaque for you, then 0.001 would be best. Thanks, Dave.

[@99golems]

Hahah good point. when I do alpha it's always a scale of 1 to 0 with 0 being transparent. I incorrectly assumed everyone else did too

[Paul Brzeski]

I have exactly what you're talking about implemented using the ParticleSystem class in THREE.JS

 

Dunno whether that's what you're using, but here's my code:

• https://github.com/paulbrzeski/Langenium/blob/master/public/game/scripts/effects/particles.js 
• particles.explosionEffect spawns a new ParticleSystem
• particles.handleParticles continues the movement in the animate() call for each particle system, according to their presets

[allc1865]

I have exactly what you're talking about implemented using the ParticleSystem class in THREE.JS

 

Dunno whether that's what you're using, but here's my code:

• https://github.com/paulbrzeski/Langenium/blob/master/public/game/scripts/effects/particles.js
• particles.explosionEffect spawns a new ParticleSystem
• particles.handleParticles continues the movement in the animate() call for each particle system, according to their presets

Do you have a demo of this script working? Do you need an external html, stylesheet or js file to make this code work?

Thanks 

[Paul Brzeski]

Do you have a demo of this script working? Do you need an external html, stylesheet or js file to make this code work?

Thanks 

 

Yep

 

My game alpha - www.langenium.com/play

 

My code is based off an older implementation of ParticleSystem. I'm creating random vertices (THREE.Vertex3) and pushing it to an array to create the ParticleSystem. The newer implementation is similar but you create a THREE.Particle object within that same loop.

 

Here's the tutorial I originally used - http://www.aerotwist.com/tutorials/creating-particles-with-three-js/

 

NB - to trigger the effects in my game, type either of these commands into the console:

• effects.particles.explosionEffect(player.position)
• effects.particles.teleportEffect(player.position)