May, 2012

  • DaveDev

    Additional Windows 8 Camps (US only) coming!

    • 0 Comments

    Missed some of the local Windows 8 Camps?  More are on the way!

    WindowsDevCamps

     

    Via my teammate Chris Bowen

    I previously mentioned the series of Windows Developer Camps - free, full-day events to help you learn about building Metro-style apps for Windows 8. They feature a mix of developer sessions plus a series of hands-on labs to help reinforce what you’ve learned.

    Well, it turns out they’re popular.  So popular, in fact, that all of the Camps I listed earlier are full.

    However, more are on the way!  Coming soon to these cities:

    Date Location Link
    May 22 Irving, TX Register
    May 23 Bellevue, WA Register
    May 24 Waltham, MA Register
    May 24 Chevy Chase, MD Register
    May 29 Minneapolis, MN Register
    June 1 New York, NY Register
    June 5 Downers Grove, IL Register

    Register soon, bring a PC with the Windows 8 Consumer Preview and Visual Studio 11 Beta installed, and enjoy Camp!

       

    If  you would prefer to go at your own paced in a self study environment all of the Windows 8 Camp content is now available for download. There are also virtual Windows 8 Camps happening via the upcoming MSDN Webcast Windows 8 Development series.  Once you are settled into coding your next masterpiece let me know about it so I can help you get a Windows Store token.

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

    -Dave

    • DaveDev

      How to get the Windows 8 Camp presentations, code samples and hands on labs

      • 4 Comments

      Win8CampInABox

      Great news!  The Windows 8 Camp in a Box is now available for download.  It includes all of the presentations, code samples, and hands on labs I showed off during the Windows 8 Camps and NYC Windows 8 Developer Event.  The content is available in both XAML/C# and HTML/JavaScript versions.  

      If you have been looking for an opportunity to develop an application step by step this it!  Full source code and instructions are provided in both html and docx formats.  So print them out, pull up a chair, and code up the Contoso Cookbook sample at your own pace.

      Labs

      The Windows 8 Camps are still ongoing (across the globe!) too so if you haven’t attended one yet be sure to sign up or register for the upcoming MSDN Webcast Windows 8 Development series.  Once you are settled into coding your next masterpiece let me know about it so I can help you get a Windows Store token.

    • 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

      How to get your Windows 8 app into the Windows Store

      • 0 Comments

      Windows 8 represents a tremendous opportunity for developers.  With the release of the Consumer Preview the store services are ramping up as planned--and of course the plan includes ramping up developer registrations to enable app submissions to the Windows Store!

      Windows Store

      Today, you need an invite “token” to register. So how do you get one?

      My colleague Jaime explains..

      Windows StoreIt’s easy! If your app is ready and you want to be among those developers who get to submit to the store early, simply attend one of the 100s of free Application Excellence Labs that DPE and Windows are holding around the world.

      Follow these steps to get invited to an App Excellence lab:

      • Create a really great Windows 8 Metro style app (or game) immediately.  Get it as ready as if you were submitting to the store.

      • If you know your local DPE evangelists (maybe because you attended a Windows camp training), get in touch with them and ask them to nominate your app for a lab.

        • If you live in the Eastern United States that is me (Dave Isbitski)!  Please contact me and let me know about your app!

      • If you don’t know your local evangelist, then email the following information to win8aefb@microsoft.com:
        • Your name
        • City & country where you are located
        • Brief description for your app (no binary,  screenshot is optional, but only send if the screenshot is public, non-confidential stuff )
        • Your pledge that you’ve spent at least 8 hours devouring all the great UX guidelines we have at the design section in the Windows Dev Center1
        • Wait for our response letting you know where the closest app excellence lab will be and how to get in touch with the right evangelist to nominate you.

      Hopefully, there will be a lab near you.  Right now, we have labs in 40+ countries and we may be adding more.

      Of course, coming to the lab is not all you have to do.  I have to go back to step #1: You need to have a compelling, functional app that follows our UX guidelines, our performance best practices, and our store certification requirements2

      The lab is a 4-hour engagement with a trained Microsoft Services Engineer.  This person will run your app through a series of tests based on a quality checklist to ensure your app is (or will be) in top-notch shape when you submit. You will also get a chance discuss ways to make your app even better and you will get answers to any questions you might have.

      If your app meets the criteria, then booyah! You get a token to register your developer account and (once you have been verified and all that) you will be able to submit your app to the Windows store.
      If your app does not meet the criteria, nothing is lost. You will still end up with a much better app3 and you will be able to submit it when registration opens for all developers.

      Good luck. We are looking forward to seeing your apps and helping you to make them great! Happy Windows 8 coding!!

      1 Kidding about the pledge but not kidding about highly recommending you review the guidelines and get your app very polished.
      2 Note: The lab is not a replacement for certification process; that still happens when you submit to the store.
      3 Really, the lab preparation will be worth it, you will have a survey with questions, useful advice, links to guidelines, etc. The survey is (by far) not the only criteria we will use at the labs, but if you follow the preparation from the survey, you will likely have a great app.

       

      The opportunity for your apps has never been bigger!

       

       

      Hope to hear from you!

      -Dave

    Page 2 of 4 (14 items) 1234