XNA Platformer, HTML5 Style
Plus it's not just a port, but also a detailed series on how it was done.
Oh yeah, and you also download the source too.
And we're not talking just IE or desktops either...
Note: this game has been tested with success under IE9/10, Chrome, Firefox 6+, Opera 11+, IE9 on WP7 Mango and iPad 2. The text elements are not displayed under Opera as there is a bug with EaselJS on this topic. At last, if you really want to play to the game, an hardware accelerated browser is highly recommended. I’ve got 60 FPS in these conditions on my Sony Vaio Z13.
At the end of this article, you’ll find the complete non-minified source code of this game inside a ZIP archive to download. I’ve tried to comment as much as possible the code to make it self-explicit. I hope you’ll learn some interesting things while reading it. If you have any feedbacks and/or suggestions on it, feel free to add it as a comment to this blog’s post.
I’ve also already written 2 articles covering the basics of the logic behind this game here:
Building the content manager
In the previous article, the download content manager wasn’t notifying the user of the progression of the download process which was very bad. Hopefully, adding this feature was pretty straight forward as you just have to have a tick() method to your object and update a text element on the stage to show the progression. You can find that by reading the ContentManager.js file.
Moreover, as my objective was to be compatible with all browsers, I’ve then encoded the music & audio elements both in MP3 and OGG. If you’d like to know more about this HTML5 Audio tag codecs story, I recommend you having a look to my colleague’s article: 5 Things You Need to Know to Start Using Video and Audio Today
Then, I’m downloading either the MP3 or OGG version using the following code:
Though if you're using IE9, there's added stuff just for you...
Here's some snips from the source;
Non-minified source code
As promised, you can download the source code and all the assets of the game here: HTML5 Platformer Non-minified.
I hope you’ve enjoyed this series of 3 articles around HTML5 Gaming. Maybe this will help you transforming your gaming ideas into an HTML5 reality!