Porting BlastEngine HTM5 Game Into Win8

I spent this weekend hanging with the crowd at the fifth annual Front End Design Conference in St Petersburg, FL. Dan Denney runs this annual event, which always sells out, and draws some top names in design and front end development from across the world. Needless to say, I was one of about eight PC users out of a crowd of 300 or so, but that's a different story.

On day 2 of the event I watched a talk by Dan Tello talking about using <canvas> for HTML and JS game development. Dan overviewed a bunch of the work he's done for Puma on his RunPumaRun game. Pretty cool side scroller done eight bit style.

Dan also showed an open sourced kit he'd done for starting a "galaga" style game called Blast Engine. The github repository for BlastEngine is available at https://github.com/greypants/blastEngine .

So I'm sitting there potentially speaking on HTML5 apps for Win8 talk at the end of day two. I think, so why not port Dan's blastEngine to a Windows 8 app? Show this primarily HTML5 crowd how to take their pre-written HTML5 content and package their content into a Windows 8 Store application with a minimum of effort. During the rest of this post I'll show you I moved Dan's BlastEngine into a Windows 8 app.  So here we go....

  1. Download the zip of BlastEngine from https://github.com/greypants/blastEngine
  2. Create a new JavaScript / Windows Store / Blank App in Visual Studio and name it BlastWinRT
  3. Create a new "htmlcontent" folder in the BlastWinRT project
  4. Copy the content  (aka all the files )from blastEngine-master.zip into the root of BlastWinRT using File Explorer
  5. Click Show All Files in Visual Studio 2012
  6. Include all the blastEngine files into the WinJS project EXCEPT for readme.md
  7. Modify default.html and make the <body> content look like the code below. Default.html will make a great menu page for us, or we could just redirect to our htmlcontent/index.html page to launcht the game directly.
Modified <body> tag for default.html
<h1><a href="htmlcontent\index.html" style="margin:40px;">Run Blast Engine</a></h1>
  1. Now just give the program a run. You'll have to use the arrow keys and the mouse. Screen shot below!

Why didn't I modify the content to work in and with the WinRT project structure instead of creating the htmlcontent folder? Largely due to the audience I'm working with, front end devs. Their HTML/JS content already works. Why should they have to change it? It works by itself, so lets just keep it isolated.

Note he hadn't really designed this for touch, simply straight keyboard input. To fully square it out in Win8, one should take a good pass through the IE10 touch design docs on MSDN at http://msdn.microsoft.com/en-us/library/jj206440(v=vs.85).aspx .  But remeber, it does work as design at this point.

Moral of the story. I'm pretty sure Dan Tello hasn't done much WinRT development. I'm very sure this wasn't tested for touch with IE10. Yet, with very little knowledge, we can take his "not developed for Win8" HTML5 content and turn it a almost store ready Win 8 app. Dan had done alot of work writing these HTML5 games for Puma . With just a little more effort he could have taken them to another 150m + users via the Win8 app store. HTML5 devs, dont be afraid to try .

My talk at FrontEnd was never delivered but this was going to be one of my key demos. Here it is for ya'll to enjoy in perpetuity. Enjoy...

Comments (0)

Skip to main content