Building a HTML5 game based on the Metro Design Philosophy using Blend for Visual Studio

First, you will need to follow a lengthy and somewhat boring tutorial, keep in mind that boredom is part of learning.  It is hard, historically, to learn during times of panic, battle or in fear of your life, during those times you should be applying what you have learned during the quiet and somewhat boring time.

Now what is a metro app?  Can a Metro App just be an HTML 5 app running JavaScript?  Can an app be a Metro App if I don’t bless it? (Yes of course, I don’t have to bless anything, really.)

Ok, here are the tutorials in order that you should walk through, bear in mind that links may break, especially with anything Blend, so if you are unable to reach one of the links, use the title to find the link:

Sadly, this app now looks like a metro app, but in reality it isn’t.  Not even close.  So in reality, your app is not your first Metro app, it is your app that looks like a Metro app.  Well written tutorial, everything works, and considering that it took 9 parts, that is remarkable.  But you might be asking a few questions:

  • How do I add an App Bar?
  • How do I make this app responsive to Snap? Fill?
  • What about the “Tile”, is it beautiful?
  • Do I need a secondary tile?
  • What is the Process LifeCycle (does that make sense?) ?
  • What if I want to Share something?
  • How to I incorporate a Charm?
  • Etc.?

Not answered, but the underlying mechanics of Blend is covered quite well, but now, just how do you move from here to there, there being creating a beautiful app for sell on the Windows 8 marketplace.  Is it worth it to break through the knowledge barrier that seems to be set up? Yes of course it is.

In following Blog posts I will use the Memory App to show you exactly how to implement the App Bar, Respond to snap/fill, Discuss the Title, Process LifeCycle and memory management, etc.

If you aren’t familiar with HTML5 design, head over to and download the free game design tool because once we are done with the memory game, that is the next one I am going to hit.  This means that we will look into the use of the Flexbox, as well as the JavaScript or EcmaScript.

Comments (0)

Skip to main content