February, 2013

  • DaveDev

    Windows 8 Game Kit updated with Settings Panel

    • 0 Comments
    Via DaveDev.net


    Windows Store Setting Panel

    One of the more common tasks you will be required to do in your Windows Store App is add a privacy policy.  This is especially true if you have enabled certain capabilities like the WebCam.  I have updated the Win8GameKit with a quick and easy example of how to add a settings panel to your own games. 

     

    What code was updated?

    Inside default.js we are going to add a new function call to the base WinJS.Application namespace that will be called when the user selects the Settings Charm.

    //About and Privacy Policy Settings Charm
           WinJS.Application.onsettings = function (e) {
               e.detail.applicationcommands = {
                   "aboutSettings": { title: "About Space Cadet", href: "/html/about.html" },
                   "privacySettings": { title: "Privacy Policy", href: "/html/privacy.html" }
               };
               WinJS.UI.SettingsFlyout.populateSettings(e);
           };

    If you have ever opened the Settings Panel on a Windows Store App you may have caught this event loading the panel.  The magic here happens thanks to the WinJS.UI.SettingsFlyout object and by default all Windows Store Apps will have two entries automatically generated here for you.  The first entry enables people to review your app and the second shows current permissions for your app (the capabilities you enabled like WebCam access).

    We are going to add two more to the panel the first will give us an about page explaining our app and the second will be for a privacy policy.  A new folder has been added to the root of the project called html and includes two new files about.html and privacy.html which we point to in our new function call above.  These files are pretty self explanatory with the only thing worth noting is the ability to include html at run time through an iframe.  I have included the iframe in the comments so if you wish to load external content simply remove the embedded html and uncomment the iframe with the source pointed to your own url.

    about.html

    <!doctype HTML>
    <html>
        <head>
            <title>About settings flyout</title>
            <link href="/css/settings.css" rel="stylesheet" />
        </head>
        <body>
            <!-- BEGINSETTINGSFLYOUT -->
            <div data-win-control="WinJS.UI.SettingsFlyout" aria-label="About Space Cadet settings flyout" data-win-options="{settingsCommandId:'aboutSettings',width:'wide'}">
                <!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
                <div class="win-ui-dark win-header" style="background-color:#001E4E"> <!-- Background color reflects app's personality -->
                    <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                    <div class="win-label">About Space Cadet</div>
                    </div>
                <div class="win-content">
                    <div class="win-settings-section">
                        <div id="aboutSpaceCadet">
                        <!--<iframe src="http://insertyourdoman/insertyourhtml.html" width="566" height="600"/>-->
                        Space Cadet is a completely free game for educational and entertainment purposes only.  The code for this game is open source and available at <a href="http://win8gamekit.codeplex.com" target="_blank" >Win8gamekit.codeplex.com</a><p>
                        For more information about my other free games, apps and developer starter kits check out <a href="http://blogs.msdn.com/davedev/" target="_blank" >my blog</a> on MSDN.<p>
                        Other Apps from DaveDev Productions:<br />
                        <ul>
                            <li>Balloons (<a href="http://bit.ly/balloonswin8" target="_blank" >Windows Store</a>)</li>
                            <li>DoodlePad (<a href="http://www.windowsphone.com/s?appid=aded583e-cadc-df11-a844-00237de2db9e" target="_blank" >Windows Phone</a>)</li>
                            <li>DoodlePad Free (<a href="http://www.windowsphone.com/s?appid=5188a4a4-421c-e011-9264-00237de2db9e" target="_blank" >Windows Phone</a>)</li>
                        </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ENDSETTINGSFLYOUT -->
        </body>
    </html>

    privacy.html

    <!doctype HTML>
    <html>
        <head>
            <title>Legal notices settings flyout</title>
            <link href="/css/settings.css" rel="stylesheet" />
        </head>
        <body>
            <!-- BEGINSETTINGSFLYOUT -->
            <div data-win-control="WinJS.UI.SettingsFlyout" aria-label="Legal notices settings flyout" data-win-options="{settingsCommandId:'privacySettings',width:'wide'}">
                <!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
                <div class="win-ui-dark win-header" style="background-color:#001E4E"> <!-- Background color reflects app's personality -->
                    <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                    <div class="win-label">Privacy Policy</div>
                    </div>
                <div class="win-content">
                    <div class="win-settings-section">
                        <div id="privacyPolicy">
                         <!--<iframe src="http://insertyourdoman/insertyourhtml.html" width="566" height="600"/>-->
                         This privacy policy governs your use of the software application Space Cadet ("Application") for mobile devices that was created by DaveDev Productions.
            
                         The Application is for educational and entertainment purposes only and does not share any information about you or the location of your mobile device.  
            
                         The only Internet operation performed by the Application is via the "Share Charm" invoked by you.  In this instance your Score, Level and Name will be shared to another Windows Store Application you specify.
        
                        </div>
                    </div>
                </div>
            </div>
            <!-- ENDSETTINGSFLYOUT -->
        </body>
    </html>

    Since the Settings Panel content is html you can also style it to your liking using CSS.  You will see the background color has been set inside the div in each html.  I also created a settings.css file to show how you can change font size across all of the Settings pages very quickly.

    settings.css

    body {
        font-size: 22px;
    }

     

     

    Settings Panel

    Now that we have set up the calls to generate new Settings panel items simply hit Windows-I (settings) or go over to the Charms (Windows-C) and select Settings.  At this point the WinJS.UI.SettingsFlyout will handle the event and populate our two new entries for About and Privacy as seen below.

     

    SettingsPanel

    One item worth pointing out is these pages themselves are running in an iframe so in the About screen, for example, if I click on one of the urls it would attempt to load the page into the same frame.  Simply using the same techniques you would in a browser to open a new windows with target=”_blank” will open up a browser instead of inside the Settings panel.

    AboutSpaceCadet

     

    That’s it!  With just a few lines of code your game now has an About screen and complies with Privacy settings thanks to a new Privacy Policy.

    Where to download the code

    The main Codeplex release has been updated with the changes.  You can grab the latest release Win8GameKit-Feb2013 or simply browse the Source Code for the changes.

    Win8GameKitCodeplex

     

    The GitHub Win8GameKit repository has also been updated if you prefer to follow the project there.

     

    disbitski-githubPNG 

  • DaveDev

    The UTF-8 file encoding test detected the following errors in Windows App Cert Kit

    • 0 Comments

     

    Via DaveDev.net

    If you are getting this error message when running the Windows App Certification Kit you most likely are using a JavaScript file from the Web that has been encoded differently.  One of the great things about being a Web Developer targeting the Windows Store is you can utilize a lot of the JavaScript Libraries that you are currently using for your Web apps.  According to Wikipedia UTF-8 has become the dominant character encoding for the World-Wide Web, accounting for more than half of all Web pages.  If you are using an older JavaScript library that was not encoded as UTF-8 you can potentially hit some performance loss due to bytecode caching.

     

    UTF8 Error

    The good news is this is easy to fix.  If you have been in the Windows world for a while you most likely have used Notepad as a way to strip out any formatting before pasting text into another program.  Notepad can be used in much the same way here for encoding your JavaScript file.  Simply open up the file and save it as UTF-8 as seen below.

     

     

    UTF8Encoding

     

    If you prefer to remain within Visual Studio you can also change the encoding of the file by opening the file and then selecting “Save with Encoding”.

     

    VS Encode\

     

    You will get a bunch of options here so be sure to select Unicode (UTF-8 with signature).

     

    VS Encode Options

     

    When you are prompted to replace the file simply say Yes and you should be all set. 

     

     

    FixedUTF8

    Congrats! When you next run the Windows App Cert Kit you will see file encoding has passed getting you one step closer to completing technical certification on the Windows Store.

  • DaveDev

    Building a Windows Store Game Using HTML and JavaScript available from Lynda.com

    • 0 Comments

    Via DaveDev.net

    LyndaCourse 

     

    Building a Windows Store Game Using HTML and JavaScript

    I am proud to announce my first course with Lynda.com is now available for viewing!  The course runs a little over two hours in length, includes complete source code, and step-by-step labs for each chapter.  I’ve never been a fan of having to spend hours going through an SDK and the intent of this course is to learn from example.  I move you from having no tools installed on your machine to a complete game you can then download and modify as you wish.  In fact, I published the game created in the course to the Windows Store recently so if you have a Windows 8 machine be sure to check it out.

    Via Lynda.com course summary…

    Write your first Windows Store app with HTML5, JavaScript, and CSS. In this course, author David Isbitski shows how to use these technologies to build a game engine that runs on Microsoft devices and desktops. First, learn about the Microsoft web stack and the capabilities offered in HTML5—the foundation of your app. The course then covers each step of the build in detail, from designing the game interface and setting up a game loop to adding support for multiple screen sizes and touch interaction, incorporating music and sound effects, and accessing data from the camera and accelerometer. Along the way, discover how to personalize the look of your game with CSS3.

    Topics include:

    • Setting up your Visual Studio 2012 development environment
    • Using JavaScript with WinJS
    • Laying out the interface with Canvas
    • Creating a game loop
    • Adding a menu
    • Supporting snapped, filled, and full-screen modes
    • Working with the Touch API
    • Playing music
    • Creating a scoring and leveling system
    • Working with the Application Bar
    • Accessing the camera and accelerometer
    • Debugging and deploying your application

    Running on an ecosystem of Windows devices

    Part of what I tackle in the course is getting the game to run across all of the various Windows 8 devices consumers can now buy.  Multi-Touch, Mouse, Pen, tablet sizes screens, laptop screens all the way up to 80” Multi-Touch screens the game will run on all of them.  It was fairly simple to code the game in a way where it scales up or down no reworking needed for each device.  All Windows apps automatically scale up based on a formula of your current screen size and resolution.  You can include multiple sources for your images that are rendered at different resolutions.  This includes not only in game graphics but also the images used on the Windows Store, the Live Tile as well as the icons for search or sharing.

    The result is a game that can run on older desktop hardware with a keyboard and mouse.  Here is a photo of my five year old playing Balloons on my older Vista era desktop with a keyboard and mouse.  Yes my office is that messy but isn’t a mess a sign of a great thinker? <smile>

    Ava playing Balloons

    Not to be outdone by her sistser my eight year old decided she wanted to check it out on our Surface.  I get a kick out of her using all ten fingers when I tell her it supports multitouch.

     

     

    Or, it can be run on an 80” Multi-Touch Windows 8 Screen!  I had fun watching my friend Dani try and pop the balloons quick enough.

      If you have a Windows 8 device you can download the app for free from the Windows Store here.

       Balloons Game Windows Store

      If you are not currently a Lynda.com subscriber they also offer a 7 Day trial to the entire library here.  I hope you enjoy the course as much as I did creating it!

       

      -Dave

    • DaveDev

      This package was deployed for development or authoring mode error in Windows App Cert Kit

      • 2 Comments

      Via Davedev.net

      If you are getting this error message when running the Windows App Certification Kit don’t panic!

      This package was deployed for development or authoring mode. Uninstall the package and re-install it normally.

      WACK Error

       

      This means you have a Windows Store app written in JavaScript that you deployed locally through Visual Studio instead of as a package.  In order to properly test a JavaScript Windows Store app the  Byte code generation should be able to complete successfully.  In order to enable this the package must be installed normally as follows:

      In Visual Studio 2012 select the Project,  right click, open the Store Menu and choose Create App Packages.  If you are using the Express version of Visual Studio 2012 you will have a Store Menu on your Visual Studio Menu already.

       

      Create Store Package

      Select the option to not upload to the Windows Store.  This will create a local package you can use for testing on your own machine or give to other developers to test.

      Local Package

       

      Choose all of the defaults and then open the folder to the generated binaries with the link it provides.

       

      Install Package

      You will want to run the provided PowerShell script (.ps1 extension) and follow the prompts.  This will install the package locally into your Windows Store App location and apply the generated developer certificate.

       

      Successful Bytecode generation!

      Congrats!  You can now run the WACK Tool successfully as well as other developers who may want to test your app for you.

    Page 1 of 2 (5 items) 12