Posts Tagged ‘HTML5’

More free animated explosions on transparent backgrounds

Posted in Geekdom, Web Development on March 2nd, 2012 by Jarred – Comments Off on 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 lostgarden.com

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 Game Portal Completed

Posted in Entrepreneurship, Web Development on February 16th, 2012 by Jarred – 1 Comment

At long last I have finally finished my HTML5 game portal. You can find it here. I have been working on it for about 8 or 9 months and I think it is finally ready to go! I included a unique ranking system that hopefully will improve the user experience. This is the first website that I have done that is data base driven, so it took me a bit longer to figure that out. I am hoping that it will be a good way to promote my future HTML5 games. If you are trying to promote an HTML5 game, please visit the site and submit your game

HTML5 Audio Is Here (Sorta)

Posted in Programing, Web Development on September 8th, 2011 by Jarred – Comments Off on 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>
<audio id=”gun_sound_2″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
</audio>
<audio id=”gun_sound_3″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
</audio>

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);
audioElement.play();

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

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

playSound_html5(‘gun_sound_’);

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:
http://stackoverflow.com/questions/1933969/sound-effects-in-javascript-html5
http://stackoverflow.com/questions/2741493/how-do-you-detect-html5-video-events
http://stackoverflow.com/questions/6312714/adding-event-listener-to-audio-html5-tag-in-javascript
http://stackoverflow.com/questions/3566967/how-to-stop-audio-played-by-audio-tag-of-html5
http://diveintohtml5.org/everything.html
http://www.webdeveloper.com/forum/showthread.php?t=194442
http://www.broken-links.com/2009/10/06/building-html5-video-controls-with-javascript/
http://bioinfornetics.blogspot.com/2011/02/how-to-resetrestart-position-of-html5.html

HTML5 Game promotion strategy

Posted in Entrepreneurship, Web Development on August 17th, 2011 by Jarred – 6 Comments

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.


HTML5 Canvas performance for scaling sprites

Posted in All on August 1st, 2011 by Jarred – 1 Comment

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.