HTML5 Game Design Metro Design: Snap

  • Article

I have discussed the snap process on my blog at Silverlight Games but not in depth. image

Let’s say you have an existing HTML5/JavaScript file you want to use to create a Windows 8 application.  Now many people I have talked to keep thinking that this means you have created a HTMl5 Web site, but that isn’t the case in the scenario that I am thinking about.  My scenario is more like a game implementation.

In the image I have shown the simplest snap response to the snap gesture: “Snap not supported by this App”.  In this case the user experience isn’t excellent, but acceptable.  In reality you could just have the game resized but playable, show a leaderboard, timer of how long the player hasn’t been playing, and so forth.

 

So just exactly how do you detect a snap?  One way is to use the Adaptive Layout in CSS, which is somewhat complex, see later blogs about that.  Or you could just use the Blank HTML5 which comes with a nearly empty CSS stylesheet.  If you stick with the fonts, and other formatting styles then you have to do nothing else.  I use this extremely simple approach in this blog.

Keeping it Simple

 

  1. Open the no cost Blend for Visual Studio
  2. Start a new project
  3. Replace the existing HTML code with the following code to the project (you can cut and paste it directly):

 

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SnapSimple</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- SnapSimple references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <!--Delete the following line-->
    <!--<p>Content goes here</p> -->
    
    <!--Add the code here-->
    <div class="win-ui-dark appGrid">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="win-type-xx-large titlecontainer" tabindex="0">
                    <span class="pagetitle">Bee Game Snap Simple</span>

                    </span>
                <span class="win-type-x-large pagesubtitle"><p>Game Phase: Bees need to eat</p></span>
            </h1>
        </header>
    </div>
</body>
</html>

Running the HTML5 Bee Game

Ok, it isn’t a real game, but it is simply a study in fonts and how they work with the CSS snap features.

The default CSS looks like:

 body {
}

@media screen and (-ms-view-state: fullscreen-landscape) {
}

@media screen and (-ms-view-state: filled) {
}

@media screen and (-ms-view-state: snapped) {
}

@media screen and (-ms-view-state: fullscreen-portrait) {
}

  

Run the code

Press F5 and you should see the following, but if you only see the Box with an X and then nothing there is a problem.

If you run the code on a Windows 8 system and perform the appropriate gesture to get a snap (in the image below this is a left snap, right snap is on the other side of the screen of course and I am too lazy to make an image for the right snap, sorry):

image

Conclusion

That’s it for the snap, while you are running the code check out the portrait orientation and portrait snap which I did not show.