• DaveDev

    Defining Layout in a Windows 8 Metro Style App using CSS3, HTML and JavaScript

    • 2 Comments

    Overview

    I have been coding a Windows 8 Metro Style App using the new Windows 8 Release Preview bits and Visual Studio Express 2012 RC.  The app is going to be a retro shooter that takes advantage of HTML5 Canvas for the main game engine along with several Windows 8 Metro Style App Features.  This post is going to cover how to layout the elements of your game interface on the screen. 

    My game’s Layout is made up of two screens: a Main Menu (which is the default screen upon loading for first time) and then an actual Game Screen where gameplay takes place.  I used CSS3 (specifically floats) to align my Player Score, Name, Level and other screen elementals.  Let’s dive into how each screen is set up.


    Main Menu

    The Main Menu displays current game version number, game title and a button to begin game play.  It also includes an AppBar Menu (not shown in the screenshots below) that can be accessed at any time.  Here is what the Main Menu looks like:

     

    FullScreen 

    Filled

    Snapped

    You will notice that I am playing the game along side another application (IE 10) like some of my players will most likely do.  The screen can be rendered in three different states based which are named fullscreen, filled or snapped mode.  I want to point out that having your application support multiple screen sizes and Viewstates is a very important feature of all Metro Style Apps.  If you haven't already read it definitely check out the Scaling to Different Screens post on the official Windows 8 Blog.

    Windows8Devices

     

    Since this is such an important topic broke out this topic into two posts.  We will cover layout in this post and how to detect and scale for the different Viewstates here.  In the interest of simplicity this post will concentrate on just getting the elements lined up in the fullscreen mode (the default for all Metro Style Apps).  Let’s take a look at how we do that:  

    Inside of my default.html page we see that the title image, game version and play button are just standard html elements wrapped inside a <Div> tag I call divMenu.

    <div id="divMenu">
            <img id="imgMenu" src="/images/menutitle.png" />
            <div id="txtVersion"></div>
            <button id="btnStart">PLAY</button>
     <div>


    All of our custom layout occurs in a css file called space.css we reference in our default.html like so:

    <!-- App references -->
    <link href="/css/default.css" rel="stylesheet">
    <link href="/css/space.css" rel="stylesheet"/>
    <script src="/js/default.js"></script>
    <script src="/js/sound.js"></script>
    <script src="/js/ship.js"></script>
    <script src="/js/starField.js"></script>

     

    Thanks to CSS3 Web Fonts we can easily assign different type faces to our screen elements.  For my game I downloaded the Final Frontier Old Style font a royalty free font available off the web.  I then tell both the version text and button text to use this font.  Each of the elements I assign the maximum width and height I would like along with the text font size.  imgMenu is also told to be aligned 120px down from the top of the screen.

    @font-face {
        font-family: 'Final Frontier Old Style'; 
        src: url( '/fonts/finalold.ttf');
    }
     
    #imgMenu {
        position:absolute;
        max-width: 555px; 
        max-height: 118px; 
        top: 120px;
    }
     
    #txtVersion {
        position:absolute;
        bottom:0;
        right:0;
        font-family: 'Final Frontier Old Style'; 
        font-size: 20px;
        color: #ffd800;
    }
     
    #btnStart {
        position:absolute;
        width: 300px;
        height: 150px;
        font-family: 'Final Frontier Old Style'; 
        font-size: 30px;  
        z-index: 100;
    }
     

     

    Remembering that Windows 8 devices come in all different shapes and sizes I programmatically set the  menu elements up on the center of the screen at runtime.  This happens in the showMenu function inside my default.js file.  I calculate the exact center of the screen and then set the x and y coordinates of my elements like you see below.

    //Set Up Menu Screen UI Elements
    function showMenu(event) {
        menuEnabled = true;
     
        txtPlayerName.style.visibility = "hidden";
        txtScore.style.visibility = "hidden";
        imgPlayer.style.visibility = "hidden";
        imgMenu.style.visibility = "visible";
        btnStart.style.visibility = "visible";
        txtVersion.innerHTML = GAME_VERSION;
        txtVersion.style.visibility = "visible";
        txtLevel.style.visibility = "hidden";
        
     
        var menuX, btnX, btnY;
        menuX = (SCREEN_WIDTH - imgMenu.width) / 2;
        btnX = (SCREEN_WIDTH - btnStart.clientWidth) / 2;
        btnY = (SCREEN_HEIGHT - btnStart.clientHeight) / 2;
     
        imgMenu.style.posLeft = menuX;
        btnStart.style.posLeft = btnX;
        btnStart.style.posTop = btnY;
     
        musicGame.pause();
        musicMenu.play();
     
    }

     

    Game Screen

    The Game Screen  displays the player’s score, level, name and picture.  This is also where we are declaring our HTML5 Canvas tag.  Similarly to the Main Menu screen it can appear in all three Viewstates but we will focus on the Fullscreen mode for this post.

    Fullscreen

    Filled

    Snapped

     

    All of these elements (except for the player image) are standard <div> tags wrapped inside a main <div> tag we call divGame  inside of our space.css file.

    <div id="divGame">
            <div id="txtScore">Score: 0</div>    
            <div id="txtLevel">Level: 0</div>
            <div id="divPlayer">
                 <div id="txtPlayerName">Player1</div>
                 <img id="imgPlayer" src="/images/helmet.png" />
             </div>
    <div>  
     
    <div id="txtNewLevel"></div>
     
    <div id="divRoot" data-win-control="WinJS.UI.ViewBox">
        <canvas id="canvas" ></canvas>
    </div>
     

     

    Just like the Main Menu we assign the custom Font to our text elements and position them on screen using floats. 

    @font-face {
        font-family: 'Final Frontier Old Style'; 
        src: url( '/fonts/finalold.ttf');
    }
     
    #txtScore {
        font-family: 'Final Frontier Old Style';
        font-size: 50px;
        color: #ffd800;
        text-align: left;
        margin-left: 10px;
    }
     
    #txtPlayerName {
        font-family: 'Final Frontier Old Style'; 
        font-size: 50px;
        color: #ffd800;
        float:left;
        margin-right:20px;
    }
     
    #txtLevel {
        font-family: 'Final Frontier Old Style'; 
        font-size: 50px;
        color: #ffd800;
        position:absolute;
        top: 0;
    }
     
    #divPlayer {
        position: absolute; 
        top: 0; 
        right: 0; 
        text-align:right;
    }
     
    #imgPlayer {
        max-width: 100px; 
        max-height: 50px;
        float:left;
        margin-right:10px;
    }
     
    #txtNewLevel {
        position:absolute;
        font-family: 'Final Frontier Old Style'; 
        font-size: 100px;
        visibility: hidden;
    }

     

    Finally we set up all of our on screen elements through the startGame function once the player clicks on the Play button to begin.  

    //Set up Game Screen UI Elements
     function startGame(event) {
         txtPlayerName.style.visibility="visible";
         txtScore.style.visibility="visible";
         imgPlayer.style.visibility = "visible";
         imgMenu.style.visibility = "hidden";
         btnStart.style.visibility = "hidden";
         txtVersion.style.visibility = "hidden";
         txtLevel.style.visibility = "visible";
     
         var lvlX = (SCREEN_WIDTH - txtLevel.clientWidth) / 2;
         txtLevel.style.posLeft = lvlX;
     
         musicMenu.pause();
         musicGame.play();
     
         menuEnabled = false;
         
     }

     

    Game Coordinate System

    The last piece we need to set up is a coordinate system for our game.  This includes the size of each ship, the area of the screen they can be drawn on before appearing on the opposite side, and then the current width and height of the screen.  The screen width and height will determine how big our Canvas element needs to be rendered at as well.

    I use four different variables inside the default.js file for this with the ships width and height remaining constant (I created all of my ship images to be this size) and then the screen width and height to change based on the resolution of our current Windows 8 device.

    var SCREEN_WIDTH = 1366;
    var SCREEN_HEIGHT = 768;
    var SHIP_WIDTH = 190;
    var SHIP_HEIGHT = 100;

     

    We then calculate what the size of our canvas should be during our initialize function:

    //Init Canvas
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
     
    //Set up Coordinates for Screen Size
    //Adjust for different screen sizes
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    SCREEN_HEIGHT = canvas.height;
    SCREEN_WIDTH = canvas.width;
     
    //Set boundries to be one ship size
    MAX_X = canvas.width - (SHIP_WIDTH + 20);
    MAX_Y = canvas.height - (SHIP_HEIGHT + 50);

     

    By setting up the coordinate system at run time we can support multiple resolutions and even dynamically scale to fit higher resolutions if the user changes them (for example docking a tablet and attaching a bigger monitor).  Here is an example of our game running on a 1366x768 tablet size screen as well as a 2560x1440 which you would typically see in a 27” inch all in one pc.

    1366x768

    2560x1440 

    All of the elements align directly center with the version showing up in the bottom right.  I also have the ability to scale up the image and button size when in a different resolution.  I am not doing that in the screen shot above but will show you how using CSS3 transforms in my next post covering Viewstates.

     

    Conclusion

    I hope this post has given you an idea of how easy it is to lay out interface elements in your Metro Style App using CSS3, HTML5 and JavaScript.  If you are currently working on a Windows 8 app and want to get into the Windows Store I would love to hear about it!

    You may also want to check out my previous Windows 8 Metro Style Development Tips:

  • DaveDev

    Everything you need to know about Windows Phone “Mango” Tools, Training Kit and Developer Phone Images

    • 1 Comments

    What a great time it is to be a Windows Phone developer!  Thanks to your efforts we just hit 25,000+ apps in the marketplace!  The next few months are going to be extremely exciting as we roll out the Mango update to existing Windows Phone customers everyone.  Now is the time for you to get up to speed and start playing around with an early build of Mango on your own phone.  The Windows Phone Team just announced some great stuff for all registered developers

    Windows Phone SDK Beta 2 Tools

    The first thing you will want to do is grab the new Windows Phone Beta 2 SDK for “Mango.”  This free download will install the latest SDK, Windows Phone Emulator, Visual Studio 2010 for Windows Phone and Expression  Blend 4 for Windows Phone.  If you already have a full installation of Visual Studio 2010 or Expression Blend 4 the tools will integrate with those products and just install the templates.

    Beta2

    There are a few things I want to point out about these tools:

    Multi-Targeting

    You will now be given the option to multi-target Windows Phone versions. Note that 7.0 is the current NoDo retail version and 7.1 is the Mango release.  If you want to continue targeting the current SDK for existing phones you will need to change the version to 7.0 as 7.1 is the default. 

    MangoVersionProject

    Applications that are built against the 7.1 SDK will require a phone with the Mango OS (the beta image version you receive as a developer is 7661) installed.  It is important to note however that existing 7.0 targeted applications should run just fine on devices with Mango OS installed.

    One of the questions I often get asked is how this will affect users of Windows Phone later this year when Mango is rolled out to everyone?  Microsoft plans to be very aggressive with this release and users will be notified of the upgrade both on the phone and when they connect to Zune.  What version of your application the user sees in the marketplace will be based on the version of their OS.  If they chose to not upgrade to Mango they will not see any Mango enabled apps in the marketplace.  This means you will need to have a version compiled against the 7.0 SDK for existing users (the same app you have today in marketplace) and an upgraded version compiled against the 7.1 SDK for users that have upgraded to Mango.  Users who have  upgraded to Mango will see all of the new Mango enabled apps as well as the 7.0 apps but they will only ever see one version of your app.

    Upgrade Wizard

    If you right click on a 7.0 compiled project in Visual Studio 2010 you will be given a new option to go through the migration wizard.

    Upgrade

    This will open a Wizard that will upgrade your project settings to the new Mango Release as well as point out any updates you may need to add to your code.  You won’t see this upgrade wizard in Expression Blend so be sure to open the project in Visual Studio if you want to check it out.

    Windows Phone Emulator

    One of the first things you will notice about the new Windows Phone Emulator is the Additional Tools that come bundled.  Both the Accelerometer and Location tools we showcased during MIX10 will be available to you.

    Emulator

    It is important to not however that the Phone OS image in the emulator is actually based off Mango.  You can see this by the new search icon that is visible in the application list.  This is important to keep in mind as you are testing your apps.  Even if you are targeting the 7.0 SDK in your application will in essence be a 7.0 application running on a Mango device.  If you want to run against the 7.0 OS Image you will need to keep a machine with the older SDK installed or a device that has not been flashed to Mango.

    Mango OS Image for Retail Phones

    Now for the most exciting part – how about playing with Mango right now on your existing Windows Phone!  The team is happy announced that all registered AppHub users will be receiving invites to an early beta build of the Mango OS.  Invites will be sent out via MS Connect to the e-mail address you used to register your account on AppHub.  These invites will be sent out in batches so if you haven’t received your invite yet please be patient.

     

    Windows-Phone-Mango-Overview


    Once you received the invite you will login to the MS Connect website with the same AppHub account Windows Live ID and then need to accept the license agreement.  I have gotten some questions around the confidentiality agreement guidelines specifically around what developers are and are not allowed to share.  Thankfully the team has posted more details here that should clarify any confusion.

    Q: What are the confidentiality requirements of my participation in this pre-release program?
    By participating in this pre-release program, you are agreeing to not share the ‘Mango’ pre-release device image, binary dumps, or the applications used to update to this pre-release image, with third parties.

    Basically you can talk about it!  You just can’t download the Phone Image and start hosting and distributing it out to non registered developers or third parties.  Pretty common sense stuff. 

    It is all super important to read the instructions fully.  Microsoft will be supporting bricked phones through this process but only one phone per developer account.  Please take every precaution when flashing your device to the Mango build!  I want to bring particular focus to the step around backing up your retail Nodo Windows Phone Image.  This image will be placed in a folder inside your windows user account directory AppData folder and assigned a guid.  Depending on the size of your phone image (mine was 12 gigabytes) this directory may be quite large.  You should immediately back up this directory to some type of external data source so that you will not lose it.  In order to flash your phone to the retail Mango image later this year you will need to restore back to your retail Nodo image.  Don’t lose the backup!

     

    Windows Phone “Mango” Training

    Ok you got the new Windows Phone SDK Beta 2 Tools and the Mango image loaded on your phone.  How do you start playing with what’s new outside of the existing sessions we did at MIX10?  If you are a fan of self paced hand on labs you will want to head over to MSDN and grab the updated Mango Training Course.

    MangoTrainingKit

    This course will walk you through many of the new features such as SQL CE, Background Agents and Fast App Switching.  The kit is designed to work completely offline and will install everything local for you.

    AppHub has also been updated with many new Mango enabled tutorials for both XNA and Silverlight Applications.  You can get to the updated content by hovering over the education column in the header and selecting education catalog.

    AppHubCatalog

    The MSDN Code Samples website has also been updated with lots of Mango goodness.  Be sure to check it out!

    MSDNMangoSamples

     

    Microsoft Advertising SDK Update

    In the midst of all the Mango announcements last week we also released an update to the Microsoft Advertising SDK.

    AdvertisingSDK

    If you are using Ads in your Windows Phone application you will definitely want to check out this release.  There are many updates included such as additional end user privacy and auto-hide of the control when no Ads are available to be shown.

    Windows Phone Sketchflow Templates

    If you happen to be one of those lucky folks running Expression Blend 4 Ultimate with Sketchflow then I’ve got some additional goodies for you! 

    WP7Sketchflow

    The Expression Team released updated Sketchflow templates that will now allow you to sketch out Windows Phone applications.  You can head on over to Codeplex to download the free templates.  Keep in mind you will need a licensed version of Expression Blend 4 Ultimate with Sketchflow these will not run with the free Blend for Windows Phone edition.

     

    Students get first access to Mango hardware

    Finally, if you are a student looking to get your hands on some of the first Mango enabled hardware then we have exciting news. As the team points out we have 50 devices reserved just for you!

    Here is what to do:

    1. Make sure you’re registered for DreamSpark
    2. Download and install Expression Studio Ultimate and the new Mango Windows Phone Developer Tools (available free as a member of DreamSpark)
    3. Get the free Sketchflow Template for Windows Phone and create a Sketchflow mock-up of your app
    4. Post the Sketchflow mock-up somewhere online and tweet out the link using the hash tag #WPAppItUp
    5. We will review all prototypes and will contact the developers who submit the best ones and send them a special Mango developer device

     

    Summer of Must Have XBox Games on Windows Phone

    The Xbox Team has been busy as well these past few weeks with their Six Weeks of Smash Hit Games.


    With over 70+ quality Xbox Live titles on Windows Phone this summer suddenly became a lot less boring!  I personally plan to break 5,000+ points on my gamerscore courtesy of both Angry Birds and PvZ.


    Xbox-WP7Games

    Happy Coding this Summer I am looking forward to seeing another 25,000+ apps!  – Dave

  • DaveDev

    Windows Phone 7 Tip - How to automatically sync your OneNote documents to the Cloud

    • 12 Comments

    OneNote for Windows Phone 7

    OneNote is one of my favorite Microsoft Office applications and an amazing note taking tool.  I use it constantly to take screen shots of websites or applications, quick dictation, to-do lists, and even some sketching/doodles (via my Tablet’s pen).  One of the goals of the OneNote Team was to bring that note taking application to all three screens (PC, Cloud and Phone).  With the release of Windows Phone 7 that goal became a reality and we can now sync notes between all three screens.  Changes made on the phone will be available on our desktop and changes made on our desktop will show up in a web browser.  If you haven’t checked out the free Office Web Applications yet you owe it to yourself to take a peek.  Office Web Applications are part of SharePoint, are available when editing or viewing any Office document on your Skydrive as well as through other services like Docs.com and Office Live Workspace.

    Four Easy Steps to Cloud Sync

    What I don’t think we have done a good job of is actually exposing this functionality on Windows Phone 7 easily.  I had a conversation just last night with someone who was adamant about Windows Phone 7 not being able to cloud sync One Note Documents yet.  This prompted me to write this blog post in hopes I can make it easier for you as well. 

    Step 1 – Open Microsoft Office Hub

    When we first open up the Office Hub we are presented with a list of shortcuts to our most recently used OneNote Documents.  You can also tap and hold on these shortcuts to pin them to your start experience on the phone (I use this for quick to-do or shopping lists).  What is not obvious at first is you need to hit the All icon to get to the rest of your documents and open up the syncing option. In the below screenshot you will notice I have just created a quick OneNote document called DaveDev and I am now going to click on the All icon.

     

    Main Menu - Click ALL

    Step 2  - Click on Refresh icon on the Application Bar

    This will take you to a list of Pages in your current Notebook.  Windows Phone 7 only has one Notebook by default where all of your Pages will be stored.  When we enable syncing however we will start to pull down all Notebooks from the Cloud.  This means we can select these other Notebooks and create Pages in them right on the phone.  So while we cannot create Notebooks directly on the phone we can integrate with them existing ones.  If we bring up the full Application Bar we will notice a Refresh icon.  Go ahead and click that now.

    Document ListDocument List

     

    Step 3 – Confirm that you want to start syncing your documents with Skydrive

    You will be asked to confirm that you want to begin syncing OneNote with your Skydrive.  What Skydrive would that happen to be?  When you created/entered your Windows Live ID into the phone you were automatically given 25 gigabytes of free storage in the cloud (what a nice present eh?).  Office Documents on Windows Phone 7 are integrated with your Windows Live ID so it will take care of everything for you.  Exactly the same way the Zune Marketplace and X-Box Live integration works.  Go ahead and confirm that you want to enable Skydrive sync.

    SkyDrive Confirmation Prompt

    You will now be notified during the process of the sync status.  First it will connect up to Windows Live and then it will set up a default notebook (Unfiled Notes) if it does not already exist.

    Connecting to Windows Live!Creating Default Notebook

     

    Step 4 – Verify that your notebooks and pages have synced

    Now that we have enabled sync you will notice some changes.  First, all of your notes will now include the SkyDrive Folder (Personal) and OneNote Notebook (Unfiled Notes) they have been synced to.  You will also notice a Notebooks option that is now available.

    Notes-Synced!

    Swiping the screen to the left or clicking on Notebooks will take you to the new Notebooks screen.  This screen will display the status of all your Notebooks currently located in Skydrive as well as their Sync status.

    Synced Notebooks and Pages!

    Notice too that you now have the ability within each Note to sync immediately back to your Skydrive.  Clicking on the Refresh icon will kick off this process for you.

    DaveDev Note - Sync Button

     

    Viewing your One Note documents from the Cloud

    So now we have One Note running on our Windows Phone 7 device and we have One Note running on our Windows 7 PC.  But, let’s say we are out, maybe over at a friends house, and we need to pull up a quick One Note document.  I told you our stuff is in the cloud so we should be able to get to it from any Web Browser, right?  Of course! 

    Simply point your browser to Windows Phone Live and you will be presented with a bunch of functionality for your phone.  This is really where your cloud integration comes alive!  X-Box Live achievements, avatar customizations, contacts, calendar, phone tracking, photos as well as our newly synced OneNote documents are accessible here.  Simply click on the View All link under OneNote and you will be taken directly into the OneNote Web App.

     

    OneNote at http://WindowsPhone.live.com

    Like all of the Office Web Apps the One Note Web App is full featured and even includes the familiar Office Ribbon.  Notice along the top you can see the current Skydrive folder my Notebooks are synced under (Personal Web).  This is the same folder we saw displayed on our Windows Phone 7 device.  On the left pane you can now navigate between all of your notebooks and their included pages.  Opening up my newly synced document will display it in the editor on the write and any changes here will save back to the desktop and my phone.

    SkyDrive - Editing my OneNote Docs

    To the Cloud

    Hopefully this eliminated any confusion you might have had around enabled Cloud sync for Office One Note documents on your Windows Phone 7 Device.  Although we only do this for OneNote today we have already announced a free Windows Phone 7 update later this year that will sync your Excel, PowerPoint and Word documents as well.  These documents will be able to sync back to your Skydrive like we have shown here in addition to the already existing SharePoint functionality. 

  • DaveDev

    Announcing the MetroGameKit – a free, sample, starter project for Windows 8 Casual Games using HTML5 and JavaScript

    • 0 Comments

     

    spacecadet   Pew Pew! Fire Lasers!

    During the past couple of months I’ve been hacking around in the world of HTML5 Canvas and casual gaming.  The community that has formed up around HTML5 Gaming in particular is awesome and I am continually impressed by what I’ve seen.

    Not to mention I’m a big retro gaming fan – 8 bits anyone?

    With that in mind I wanted to contribute back to the community if I could.  I figured the best way I could do that was to take the experience I have writing Windows 8 Metro Style Apps and combine them with the world of HTML5 Canvas based gaming.

    Things were super easy to bring over from a code perspective.  All of my layout is done through CSS3 (including media queries for ViewState), the game loop is straight up HTML5 Canvas with requestAnimationFrame, the music uses HTML5 Audio Tags, and the sounds use third party JavaScript libraries like SoundJS.

     

    Get the Code

    You can grab the sourcecode from Codeplex here:

    CodePlex


    Or GitHub here:

    GitHub

     

    Summary

    I am replicating all the source back between GitHub into Codeplex so regardless of where you fork you will always have the latest source.

    If you decide to write a Windows 8 app and want to get into the Windows Store I would love to hear about it!  You may also want to check out my previous Windows 8 Metro Style Development Tips:

    Happing Coding!

    -Dave

Page 3 of 68 (272 items) 12345»