More free animated explosions on transparent backgrounds

I don’t really know why or how but for some reason the single post on my blog that has received the most traffic has been my post back in 7/11 titled “free Animated explosion on transparent background. This does seem a bit strange to me as it really is not all that relevant to the keywords I am trying to target with my blog. Nonetheless, I am currently working on another HTML5 game and have some additional animated explosion sprite sheets and am going to post there here as kind of an experiment to see what happens.  You can save them by right click – save image as.

explosion with transparent background
Free animated explosion
Free animated explosion small
Free animated explosion small

I did not draw these, I simply re-sized them and removed the background. They are saved in .png format and have a transparent background making them perfect for use as a sprite sheet in a game. You are free to use them in any way you see fit. I got the original files from

If you are looking for some more free animated sprite sheets I highly recommend you take a look around all the things Lostgarden has to offer. There are a lot of free to use pixel art animations including several other explosions. They do not however have transparent backgrounds so you will have to edit them out yourself.

HTML5 Audio Is Here (Sorta)

Figuring out how to implement a pure HTML5 Audio solution for my game was quite a chore. I found countless threads and post complaining that audio support is just not there yet and that the best thing to do is use flash based solutions (like the SoundManager 2 script). However, I found other information which lead me to believe it could be done. After much searching and trial and error I figured out something that would work and that would preload the sounds before the game would start. My ultimate solution was pure HMTL5 without the use of a script and used a variety of techniques I gleaned from reading others posts and blogs(mostly stackoverflow).

Here is how I did it:

First I load all the game sounds using HTML audio elements in the body of my page. You have to provide at least a .mp3 file and a .ogg file to be compatible with most browsers. Also, If you plan on doing multi-shot sounds (sounds that can be played overlapping themselves such as a rapid fire gun sound in a game) you will have to load multiple instance of them into separate audio elements (Many of my sounds have 5 or 6 instances of themselves)

<audio id=”gun_sound_1″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
<audio id=”gun_sound_2″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
<audio id=”gun_sound_3″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />

Secondly the JavaScript

//Create a counter for the sound
gunSound_counter = 1

//Variable holding the number of audio elements that exist
gunSound_maxNumber = 3;

function playSound_html5(soundName)
//Add the counter suffix
soundToPlay = soundName+gunSound_counter;

//Play The Sound
audioElement = document.getElementById(soundToPlay);;

// For Multi-Shot sounds Increment the counter. If counter is at the max reset to one
if (gunSound_counter >= gunSound_maxNumber)
gunSound_counter = 1;

Now when ever I want to play the sound I just call the playSound function and pass it a string with the name of the sound I want to play (without the number suffix).


I am pretty sure there is likely more eloquent ways to do this, but hopefully this can help you get a good start.

Update: Upon reading this it now looks like the SoundManager 2 now offers support (beta) for HTML5 audio. Looks like I will have to check this out on my next game cause sound really was just a pain.


Some of the sources I used:

Building HTML5 video controls with JavaScript

HTML5 Game promotion strategy

I have just finished my first game and am now in the process of promoting it. From what I gather, if I were promoting a flash game the process would pretty much involve submitting the game to the many gaming portals and hopefully land a sponsorship or licensing deal. It appears (when it comes to flash games) that as long as you have a reasonably decent game you have a reasonably chance at getting accepted into one of these portals and making some profit. As for HTML5 games, things are completely different. HTML5 is a new technology and there is not yet a whole industry built up to cater to the indie game developer. There are no huge gaming portals (that I could find at least) looking to license/sponsor games done in HTML5. I do believe that HTML5 is the future and will eventually replace flash, but we are not there yet, so I have to come up with a different strategy.

Initially I was trying to promote my game the same way you would promote any other website by trying to get my link in as many places as possible. I was visiting every blog that had anything to do with HTML5 games and trying to spam my link in a comment somewhere. However I came to the realization that doing this is probably is not an incredibly efficient way to go about getting more traffic. My target audience does not go to blogs about HTML5 games and then look through the comments for links to playable games. It is true that links may help improve my search engine rankings a little (maybe) but once again, I am not sure if this really will lead to more visits. When a casual gamer wants to play a casual game they usually are not sure what they want to play and are looking for site where they can browse and try out lots of games easily, kinda like an arcade (hence the popularity of the large gaming portals). They are probably not looking for a site with a single game on it (like mine).

This line of reasoning has led me to conclude that instead of trying to improve my organic search engine rankings for the game(i.e. getting a massive amount of backlinks), My strategy should be focusing on trying to get my game on sites that already have users looking to play games. Below is a list of some of the ideas I have come up with on how to go about doing this.

Social Bookmarking/Sharing (Facebook, Twitter, Google +1)

How many things have you looked at because one of your friends facebook ‘liked’ it? It kinda seems like this may be were the web is heading and I think it wise to try and tap it.

 Apps Sites

I already put the game in the Google Chrome Store. So far I have seen almost no traffic come from the listing, but I do know there are likely a lot of users there looking for games. Beyond the Chrome Store I know that there are many other apps sites/stores that I need to get listed in.

 Submit the game to the HTML5 portals that do exist

There are a handful of smaller gaming portals out there specifically for HTML5 games. They are small and just starting out, but who knows what they will become in the future. I already have gotten into one of them and they send me a few visitors each day.

 Start my own HTML5 portal site.

I am realizing that the is a need for more HTML5 arcade type sites, so why not try and fill it. I am planning on creating more games in the future so it might be a good asset to have to promote future games.

Update: my HTML5 portal site is now completed. You can submit your HTML5 game here.

 HTML5 Design/Promo sites

Due to the newness of the technology there are lots of sites out there which are showcasing HTML5 examples. I think that this is a great way to attract visitors who are looking to try something out. I already made it onto one such site and it has sent me hundreds of visitors.

AsteroidsInc is ready to go

Well at long last I think I am finally ready to release my first game. Check it out at

 The game was programed entirely in JavaScript using the HTML5 canvas and audio objects. It should require no plugins to play (looks like safari may require quicktime). This was pretty much the first game I have ever programed and I learned a lot and did lots of stuff wrong the first time around (and most likely still have a lot of stuff not quite right). If I write another one it should go a lot smoother. If you play it and have any feedback or find any bugs please let me know.

 At the outset I had even grander designs for the game, but I decided to try and simplify the design so that I could get the game to a releasable state sooner. As it was this beast took me several months of my free time to complete. I estimate it has probably taken me around 200 hours total from start to finish (next time I will try and keep better track of the time).

 So if you refer to my post here on how I plan on accomplishing my goal this marks the completion of step one and two (at least for my first project). I hopefully have created something useful which will attract Visitors & Links.

 Now I plan on trying to figure out the most efficient way to monetize the game and start generating some passive income from it. I am aware that it will likely be a challenge and may not be a simple task to do, but I am determined to see this through. I will keep the graph on the upper right hand corner of the blog updated to track my progress.

Little surprises for the uninitiated

AsteroidsInc is pretty much the first game I have ever programed so there have been lots of surprises along the way. Probably one of the bigger surprises I have come across so far is the amount of time it has taken me to program the menu system. I was expecting that to be one of the easier/simpler parts, but has taken me quite some time to get everything working correctly. I have tried to take a OOP approach to make everything as organized as possible, but it is still quite complicated, is requiring a massive chunk of code, and in truth has been quite boring. Quite possibly this is due to me doing stuff the “hard way” or flat out the “wrong” way (like everything else), but I cant think of any easier way to accomplish what I need. I guess the moral of this story is that sometimes the little things take a lot longer than expected. I am finding that it takes quite a bit of perseverance to push through the “little” things that are turning out to be “big” things. Hopefully the finished product will be worth it…

Along the same note, I think that focus is also becoming an important factor in bringing this project together. I keep on coming up with other projects/ideas/tangents that sound more interesting in the moment and the temptation is to work on those. However, time I have to work on this is limited and if I am ever going to finish my game, I am going to have to focus on it.

HTML5 Canvas performance for scaling sprites

Well…This is likely a nobrainer for most, but for some reason it took me quite a while to figure this one out.  In my latest game asteroidsInc I have been designing I was experiencing some pretty awful frame rates, and so I started to try and optimized the code for better performance.  I was using the JavaScript drawImage function to scale the images I was using as sprites in order to achieve a retro pixely effect.  While it did accomplish the effect I was looking for it turns out the frame rate took a big hit due to the scaling.  To improve the performance I simply used Photoshop to enlarge my images (in order to retain the retro effect) and then used the drawImage function using no scaling. The performance boost was quite significant. In hindsight it seems quite obvious that using the scaling was a bad idea on sprites and would require more resources to render, but hey…sometimes the obvious just takes a little longer.


In recap, if you are are trying to animate multiple objects on the canvas it appears that resizing the images themselves has performance advantages over using the drawImage to scale the images.

Safari not liking the HTML5 Audio

 Well this one threw me for a loop….

 I never use Safari, but in an attempt to make my latest HTML5 Game compatible in all the major browsers I downloaded the PC version of Safari to do some testing and trouble shooting to see if it would work. The game worked well in Chrome, Firefox, and I.E. so I assumed it would just work in Safari. But no, to my surprise it started throwing the following error every time I tried playing one of the audio elements.

 TypeError: ‘undefined’ is not a function (evaluating ‘’)

 After much frustration I came across a post which indicated that HTML5 audio and video tags will not work in Safari without QuickTime. So much for HTML5 not requiring any plug-ins. I installed QuickTime and to my dismay Safari was now giving me the following error when I tried to start it up.

This application has failed to start because QTCF.dll was not found. Re-installing the application may fix this problem.

After trying to reinstall the the browser (this did not work) I found the QTCF.dll file in the Program Files/QuickTime/QTsystem made a copy of it and put it in Windows/System32. This solve the problem and Safari now started up. I was able to load my game with no more errors playing the audio objects. Safari seemed to handle the canvas object fairly well (although the frame rate on seems to be fairly poor).



Free Animated explosion on transparent background

While creating my first game I came across the need for some sprite sized explosion animations. I tried multiple times to draw them myself, however I just couldn’t get them to look right. So I turned to the web to see if I could find some royalty free explosion animations that I could use in my game. After a little searching I found several suitable sprite sheets like the one below on (The website also features a free explosion generator program to make more).

The animation however was on a sprite sheet that had a solid background and I needed a transparent background. So, I took the time to cut them out using an alpha layer and then saved them to individual files. I have upload the cutout files as I figure it is likely others might find them useful. The below file includes a photoshop file with all the different frames of the explosion on different layers as well as all of the frames of the explosion separated into individual .png files with transparent backgrounds. These images are royalty free so please feel free to use them any way you like.

Download animation with transparent background

UPDATE: Couple more free animated explosions can be found here