May, 2012

  • DaveDev

    Announcing free Metro Accelerator Labs for Windows Phone and Windows 8 Metro Style App Devs

    • 0 Comments

    In addition to the great Windows 8 Camps and MSDN Metro Style Dev Webcasts there are some additional free events coming your way!  The Metro Accelerator Labs are free, three day events designed to ramp you up on what it means to write a Metro Style App for Windows 8 and Windows Phone.

    MetroStyleAppDev

    If you are a developer that has been tinkering with an app this is your opportunity to create something amazing.  These will be three full days of lab time so be prepared to code and bring your laptop!  If you don’t have the Windows 8  Consumer Preview or Developer Tools installed be sure to get them.

    This is what the day will look like:

    Day 1

    • 8:30 – Arrival & Breakfast
    • 9:00 – Kickoff & Logistics
    • 9:15 – Session: “Designing Metro style: principles and personality”
    • 10:00 – Hackathon, expert one-on-one guidance, lightning talks on demand, and plenty of sustenance, snacks & caffeine
    • 5:00 – Wrap Up

    Day 2

    • 8:30 – Arrival & Breakfast
    • 9:00 – Kickoff & Logistics
    • 9:15 – Session: “Effective Metro Style Applications: User Experience (UX)” – To help you focus on making your Metro style apps great, we’ll review the essential features, design, and behavior of effective Metro style apps
    • 10:00 – Hackathon, expert one-on-one guidance, lightning talks on demand, and plenty of sustenance, snacks & caffeine
    • 5:00 – Wrap Up

    Day 3

    • 8:30 – Arrival & Breakfast
    • 9:00 – Kickoff & Logistics
    • 9:15 – Session: “Effective Metro Style Applications: UX (continued), Store, Performance” – Part two of our dive into the essential features, design, and behavior of effective Metro style apps
    • 10:00 – Hackathon, expert one-on-one guidance, lightning talks on demand, and plenty of sustenance, snacks & caffeine
    • 3:00 – “appX” – Your chance to show off your app and win prizes!
    • 4:30 – Wrap Up & Giveaways

    Windows Phone Dev

    There are going to be four events happening on the East Coast US:

    May 30 – June 1
    Tampa, FL
    Register

    June 5-7
    Alpharetta, GA
    Register

    June 6-8
    Waltham, MA
    Register

    June 11-13
    Orlando, FL
    (at TechEd)
    Open to all TechEd Attendees – just drop in!

  • DaveDev

    Upcoming MSDN Webcast series on Windows 8 Metro Style App Development

    • 0 Comments

    Can’t make it to any of the official Windows 8 Camps?

    Win8 Camps

    No worries!  Microsoft is hosting an online Webcast series devoted to Windows 8 Metro Style App Development. 

    MSDN Webcasts

     

    Here is the full schedule via Jaime

     

    Monday May 14th, 2012  8:30 AM PST
    Introduction to the Windows 8 platform and the Windows store
    Jennifer Marsman
    Windows 8 is Windows re-imagined!  Join this session to learn about the new platform for building Metro-style applications.  Get an understanding of the platform design tenets, the programming language choices, and the integration points with the operating system and across Metro-style apps.  We will also discuss the enormous opportunity for developers to make crazy money with the Windows Store.  You will walk away with the resources to begin writing Metro applications for Windows 8.

    Wednesday, May 16th, 2012    8:30 AM PST
    Designing apps with Metro style principles and the Windows personality
    Chris Bernard
    Metro style design has a set of five guiding principles to help you make the best choices when designing your app. These principles are the foundation for building great Metro style apps. Consider these principles as you plan your app, and always ensure your design and development choices live up to these principles.

    Monday, May 21, 2012    8:30 AM PST
    Building Metro style apps with XAML: What .NET developers need to know
    John Wiese

    If you are experienced with .NET or Silverlight and are already familiar with XAML, this session will teach you everything you need to know to create a Metro style app for Windows 8. This session will cover updates to familiar features and explore concepts that are new for Windows 8. We’ll talk about building reusable Windows Runtime Components in C#, Async programming in Windows 8 and both the Visual Studio and Expression designers. This session will show you how to turn your XAML skills into money-making Metro style apps.

    Wednesday May 23, 2012    8:30 AM PST
    What HTML developers need to know about coding Windows 8 Metro style apps
    Michael Palermo
    This session is perfect for any web developer wanting to leverage his/her skillset to develop Windows 8 Metro style apps. The session begins by proving how much web developers already know about building apps for Windows 8. The focus then turns to how to write JavaScript code with WinJS. Key points for Metro style app development will be highlighted by implementing popular feature requests using HTML5, CSS3, and JavaScript.

    Thursday, May 31, 2012    8:30 AM PST
    Win as One: How Contracts in Windows 8 Help You Build a Killer Metro App
    G. Andrew Duthie
    Contracts are agreements between Windows and your Metro style app that allow you to integrate Windows 8 features into your app. For example, Windows 8 lets users share content from one application to another by using the Share contract.

    In this session, you'll learn how contracts work and how to implement the built-in contracts such as Search, Share, Settings, and More. With Contracts, you can help users get more out of your app, and in a way that is consistent and intuitive, and they will reward you by coming back to your app again and again.

    Monday, June 4th, 2012     8:30 AM PST
    Bring Your Windows 8 Metro Style Apps to Life with Tiles and Notifications
    Chris Bowen

    Tiles and Notifications are important ways to draw attention to your app and improve your users' experiences.  Tiles can draw users back into your app when your tile comes to life on Start screen.  They can also let users personalize their Start screen by creating deep links to specific places within your app.  Notifications, delivered through the Windows Push Notification Service, can inform and draw your users back into your app even when it's not running. 
    In this session, you will learn how to effectively implement Tiles and Notifications to help your apps shine.

     

    Finally, I’ll be wrapping up the event with a session on building Metro Style App Casual Games.

     

    Wednesday, June 6th, 2012    8:30:00 AM PST
    Building Windows 8 Metro style casual games using HTML 5
    David Isbitski

    The intent of this session is to help HTML5/JavaScript developers with writing their first Metro Style App in a fun, immersive way. We will cover the basics of HTML5 Canvas gaming and how we can easily bring it to Windows 8.  We will then add additional game functionality as we introduce HTML5 Audio,  CSS3 styling and web fonts, implementing a game loop with JavaScript, 3rd party frameworks, touch, camera, accelerometer, and WInJS controls.

     

    Hope to see you there!

    -Dave

  • DaveDev

    I will be speaking on Windows 8 Metro Style App Development with HTML and JavaScript at Reasons to be Creative Festival

    • 0 Comments


    ReasonsToBeCreative

    I am excited to announce I will be a speaker at the upcoming Reasons to be Creative festival in NYC this June.  This festival has some of the most amazing creative artists, designers and coders in the industry all coming together to share their passion.  I’ll be covering how you can use your existing HTML and JavaScript skills to create Windows 8 apps for the new Windows Store.

    Building an HTML5/JS App for Windows 8

    Space Cadet is a Windows 8 Metro Style App developed using HTML5 and JavaScript. The intent of this session is to help HTML5/JavaScript developers with writing their first Metro Style App in a fun, immersive way. The code for the game will be distributed during the session, and developers will be able to freely re-use the code in future apps. Space Cadet starts out as small game with a functional game loop. Functionality is added to the game, as each new topic is introduced, including:

    • » HTML5 Canvas
    • » HTML5 Audio
    • » CSS3 Styling and Web Fonts
    • » Implementing a Game Loop with JavaScript
    • » Third Party Frameworks
    • » Touch
    • » Camera Access
    • » Accelerometer
    • » WinJS Controls

    The session ends with HTML5/JavaScript developers having a baseline knowledge to build their own Windows 8 apps sell them in the new Windows Store. Plus... there will be giveaways!

    SeeMeSpeak
     

    This is going to be one amazing event! If you will be in town please stop on by and say hello.

    -Dave

  • DaveDev

    Adding Touch support to a Windows 8 Metro Style App using HTML and JavaScript

    • 0 Comments

    Overview

    I have recently 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 and then several Windows 8 Metro Style App Features. 

    I wanted to add Touch Support to the game enabling players to use their fingers to destroy the on screen ships.  This meant supporting multiple fingers on screen at the same time as well still supporting mouse for players who did not own a touch device.  Thankfully this is super easy to do via the MSPointer API’s!

     

    Pointer

     

    These API’s will handle all touch and mouse events thus simplifying the events you need to handle.

    MSPointerDown
    MSPointerMove
    MSPointerUp
    MSPointerOver
    MSPointerOut

    You can also handle Gestures such as Tap Events using the following:

    MSGestureTap - The user taps on the screen with touch or pen, or clicks the mouse.
    MSGestureDoubleTap - The user taps two times (within a time threshold) on the screen with touch or pen, or double-clicks the mouse.
    MSGestureHold - The user presses and holds a finger on the screen without moving.
    MSGestureStart, MSGestureChange, and MSGestureEnd – Handle your own custom gestures

     

    For my game I chose to handle the MSPointerUp event.  This means that any time a user taps the screen with a finger (or clicks the mouse button) when they release an event will fire off.  These events will pass along the x and y locations that they touched.  It is important to keep in mind that a user will be able to drag their finger around without the event being registered.  We only handle the x and y locations when they finally remove their finger “up” from the screen. 


    Handling Touch Events

    The first thing I did was to tell my application which element to monitor touch events on.  My game is entirely HTML5 Canvas based (more on canvas game development to come) so I handled all touch events on the Canvas like this:

    //Handle Touch
    canvas.addEventListener("MSPointerUp", touchHandler, false);

     

    Once the player fires off the event I call a custom touchHandler function like so:

    //Verify if point was within the bounds of an actual ship
    function touchHandler(event) {
        for (var i = 0; i < MAX_SHIPS; i++) {
            var ship = ships[i];
            if (shipHit(ship.x, ship.y, event.x, event.y)) {
                ships[i] = destroyShip(ship);
            }
        }
    }

    This function loops through all of the Ship objects I have on screen and compares their current x and y coordinates to the x and y coordinates of the touch.  If it finds that the touch was inside the bounds of a ship it marks that ship for destruction.  The destroyShip function runs through an animation of the ship blowing up over a pre-determined amount of frames (currently 12).

    If you are curious about what each of these Ship objects look like here is the function I created to track all of their state:

    function Ship(MAX_X, MAX_Y, MIN_ACCEL, MAX_ACCEL, LVL_MULTIPLY) {
     
        this.x = Math.random() * MAX_X;
        this.y = Math.random() * MAX_Y;
     
        var speed = randomRanged(MIN_ACCEL, MAX_ACCEL);
        var extra = speed * LVL_MULTIPLY;
     
        this.accel = speed + extra;
        this.img = new Image(); 
        this.img.src = randomImg();
        this.destroyed = false;
        this.destroyRendered = 0;
    };
     
    function randomRanged(a, b) {
        return (Math.floor(Math.random() * (1 + b - a))) + a;
    }
     
    function randomImg() {
        var images = Array(3);
     
        //TODO: new ship artwork
        images[0] = "/images/ship.png";
        images[1] = "/images/ship1.png";
        images[2] = "/images/ship2.png";
        images[3] = "/images/ship3.png";
     
        var ran = randomRanged(0, 3);
     
        return images[ran];
    }

    This is what the shipHit function looks like:

    //Verify pixels clicked by pointer are within bounds of a ship's drawn pixels
    function shipHit(shipX, shipY, x, y) {
        var maxX = shipX + SHIP_WIDTH;
        var maxY = shipY + SHIP_HEIGHT;
        if (x >= shipX && x <= maxX && shipX >= 0 && y >= shipY && y <= maxY) {
            return true;
        }
        else {
            return false;
        }
        
    }

    Finally, here is the destroyShip function:

    function destroyShip(ship) {
     
        var r = randomAccel(0, 2);
        var laserSound = lasers[r];
        SoundJS.play(laserSound, SoundJS.INTERRUPT_ANY);
       
        //TODO: Animation Explosion and better sound
        var explosion = new Image();
        explosion.onload = function () {
            ctx.drawImage(explosion, ship.x, ship.y);
        }
        explosion.src = "/images/explosion.png";
        ship.img = explosion;
        ship.destroyed = true;
     
        updateScore(POINTS_SHIPHIT);
     
        return ship;
    }

     

    That’s it! Whether a user is touching the screen with all ten fingers or simply clicking with a mouse all of these events are handled for me.  Of course using more fingers on screen will make the game easier so I may want to add a difficulty mode to the games options at some point.

     

    Testing Touch on Non-Touch Devices

    Now what if you don’t have a Touch Enabled device to test your app out on?  Thankfully Visual Studio 11 offers a robust Simulator that in addition to offering you the ability to run your app at different resolutions comes with some handy Touch emulation features.  Select Simulator as your Debug target from the menu and start debugging.

    Simulator

     

    Once you see your emulator running click on the Hand Icon on the top right.

     

    TouchMode


    Your mouse pointer will now turn into a targeting reticle that will pass Touch Events across instead of Mouse Clicks!

     

    Ships


    While it doesn’t give the ability currently to do Multiple Touch points it will be enough for you to test your Touch Event Handlers and verify your code is working.

     

    Conclusion

    I hope this post has given you an idea of how easy it is to include Touch in your Metro Style Apps using the MSPointer API’s

    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:

Page 3 of 4 (14 items) 1234