allc1865

Creating explosions in HTML5 Game Dev.

12 posts in this topic

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!

 

 

Share this post


Link to post
Share on other sites

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...) :D

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Thanks for the comments, guys. 

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

Share this post


Link to post
Share on other sites

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.

post-731-0-71168600-1373735698.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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:

Share this post


Link to post
Share on other sites

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:

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 

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.