Jump to content


Photo
* * * * * 1 votes

Creating explosions in HTML5 Game Dev.

html5 development explosions javascript jet enemy GIF

  • Please log in to reply
11 replies to this topic

#1 allc1865

allc1865

    Member

  • Members
  • PipPip
  • 21 posts

Posted 11 July 2013 - 02:50 PM

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!

 

 



#2 allc1865

allc1865

    Member

  • Members
  • PipPip
  • 21 posts

Posted 11 July 2013 - 03:15 PM

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



#3 RadicalDude

RadicalDude

    Advanced Member

  • Members
  • PipPipPip
  • 38 posts
  • twitter:RadicalRegiden

Posted 11 July 2013 - 04:34 PM

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


allWithLogo.png


#4 Qqwy

Qqwy

    Member

  • Members
  • PipPip
  • 27 posts

Posted 11 July 2013 - 05:47 PM

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.


blueplanetsig.png


#5 allc1865

allc1865

    Member

  • Members
  • PipPip
  • 21 posts

Posted 12 July 2013 - 10:12 PM

Thanks for the comments, guys. 

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



#6 Ryguy

Ryguy

    Advanced Member

  • Members
  • PipPipPip
  • 89 posts
  • twitter:ryguygames

Posted 13 July 2013 - 05:35 PM

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.

Attached Files


ForumSig2.png


#7 @99golems

@99golems

    Advanced Member

  • Members
  • PipPipPip
  • 156 posts
  • twitter:@mrlasertron

Posted 13 July 2013 - 09:03 PM

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

Play my latest HTML5 desktop browser game, The Sword By My Side, now! (for the band The Thermals)

swordbymyside_title.png

http://twitter.com/99golems

http://slouchcou.ch


#8 Ryguy

Ryguy

    Advanced Member

  • Members
  • PipPipPip
  • 89 posts
  • twitter:ryguygames

Posted 13 July 2013 - 09:30 PM

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.

ForumSig2.png


#9 @99golems

@99golems

    Advanced Member

  • Members
  • PipPipPip
  • 156 posts
  • twitter:@mrlasertron

Posted 14 July 2013 - 10:55 PM

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


Play my latest HTML5 desktop browser game, The Sword By My Side, now! (for the band The Thermals)

swordbymyside_title.png

http://twitter.com/99golems

http://slouchcou.ch


#10 Paul Brzeski

Paul Brzeski

    Advanced Member

  • Members
  • PipPipPip
  • 51 posts
  • twitter:Langenium

Posted 15 July 2013 - 01:34 AM

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/p...ts/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


#11 allc1865

allc1865

    Member

  • Members
  • PipPip
  • 21 posts

Posted 15 July 2013 - 09:39 PM

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/p...ts/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 



#12 Paul Brzeski

Paul Brzeski

    Advanced Member

  • Members
  • PipPipPip
  • 51 posts
  • twitter:Langenium

Posted 17 July 2013 - 05:39 PM

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






Also tagged with one or more of these keywords: html5, development, explosions, javascript, jet, enemy, GIF

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users