Weekly East Region Roundup: Vol. 3

Here are some resources and blog posts from my fellow Technical Evangelists here in East Region:

Developer

Continue reading Weekly East Region Roundup: Vol. 3

Quick Hits Issue #5: Resources for App Developers and User Groups

In this issue, I’ve got some great resources for app developers, as well as for user groups:

Get up to Speed on HTML, CSS3, and JavaScript

If you’ve done some web development, but want to kick your skills up a notch, check out Learn HTML5 with JavaScript & CSS3 Jump Start Training, a course from Microsoft Virtual Academy. The course covers HTML Semantic Markup, CSS3 Selectors, Layout and Animation, JavaScript Core and DOM Interaction, and more.

Continue reading Quick Hits Issue #5: Resources for App Developers and User Groups

Everything You Ever Wanted to Know About Windows 8 Game Development…

…but didn’t know to ask.

OK, perhaps not everything…but certainly all the options for developing great games on Windows 8.

Bob Familiar, who manages some of my fellow Technical Evangelists on our East Region team, managed to find time between updating SharePoint and emailing Excel files to do some really thorough research on the state of game development for Windows 8, and shares his results on his blog:

Continue reading Everything You Ever Wanted to Know About Windows 8 Game Development…

Exploring HTML5 Canvas: Part 7 – Optimizing Animations

[This is part 7 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface. In Part 3, I showed how to draw paths and text in Canvas. In Part 4, I showed how to transform the drawing context and scale, rotate, and skew your drawings. In Part 5, I introduced basic animation concepts, including the animation loop. In Part 6, I demonstrated some techniques for managing multiple animated shapes in your Canvas implementations.]

Performance Matters

As you start working with HTML5 Canvas, one of the things that you may discover is that the more things you’re drawing, the more likely it is that you will run into performance issues, particularly if your code is not optimized. This is also true the larger your canvas gets, which may especially impact full-screen games or similar implementations.

Continue reading Exploring HTML5 Canvas: Part 7 – Optimizing Animations

Microsoft DevRadio: Developing a RockPaperAzure Windows 8 app

Abstract:
In today’s episode Developer Evangelists Andrew Duthie, Brian Hitney and Peter Laudati recap the “Rock, Paper, Azure” – (#BeatTheGu) challenge from this year’s TechEd as well as how they built a Windows 8 App for the competition. Tune in for this lessons learned session on what considerations and features Andrew took into the design of the app. Continue reading Microsoft DevRadio: Developing a RockPaperAzure Windows 8 app

Exploring HTML5 Canvas: Part 6 – Managing Animated Shapes

[This is part 6 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface. In Part 3, I showed how to draw paths and text in Canvas. In Part 4, I showed how to transform the drawing context and scale, rotate, and skew your drawings. In Part 5, I introduced basic animation concepts, including the animation loop.]

The Part Where Things Get Messy

ManagingShapes1_7Now that you know how to get a shape moving across the screen, you’re probably wondering what’s next. Well, the truth is that the animation code we looked at in the previous installment of this series was fairly primitive, and if we tried to scale it to an animation or game with many shapes, we’d be writing a LOT of repetitive code, and we’d soon end up with a very messy batch of spaghetti.

Continue reading Exploring HTML5 Canvas: Part 6 – Managing Animated Shapes

Databinding in Windows 8 JavaScript Metro style Apps

[ NOTE: This post was written using the Visual Studio 11 beta and Windows 8 Consumer Preview…as with any pre-release software, the code and concepts are subject to change in future versions ]

One of the nice features of the new JavaScript Windows Metro style app templates in the Visual Studio 11 beta is that they provide built-in support for databinding, using sample data in a JSON array. Folks who have experience in the XAML world may not see this as a particularly big deal, since Silverlight and WPF have supported databinding for a long time.

For web applications, however, data binding is still a concept that’s evolving. While there are third-party libraries like Knockout.js that provide client-side databinding (and my fellow DE David Isbitski recently published a blog post detailing how you can use Knockout in a Metro style app, if that’s your cup of tea), but in general the web world is a little behind the curve compared to XAML-based databinding.

Continue reading Databinding in Windows 8 JavaScript Metro style Apps

Exploring HTML5 Canvas: Part 5 – Basic Animation

[This is part 5 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface. In Part 3, I showed how to draw paths and text in Canvas. In Part 4, I showed how to transform the drawing context and scale, rotate, and skew your drawings.]

Get Moving

Simply defined, animation is a technique that provides the illusion of movement by changing the position, size, shape, or other properties of a drawn object over time. In traditional animation, artists draw a scene one frame (or cel) at a time, by hand, changing each scene just slightly with each new frame. Thankfully, we don’t have to go through such a laborious process to create animations with HTML5 Canvas.

So far in this series, we have only drawn shapes on our canvas once. In order to start using animation, we need a way to draw multiple frames, and at a rate that provides the necessary illusion of smooth movement. But first, let’s draw a single frame of content, and we’ll keep it nice and simple…we’ll use the same reference grid as in previous examples, and we’ll add a small white box to our canvas, using the following code (if you’re new to the series, see Part 1 for the page template we’re plugging this code into, or the jsFiddle below for the complete finished example):

   1:  $(document).ready(function() {
   2:     var canvas = $("#myCanvas").get(0);
   3:     var context = canvas.getContext("2d");
   4:     var posX = 0;
   5:     var posY = 75;
   6:   
   7:     function renderGrid(gridPixelSize, color)
   8:     {
   9:        // grid code omitted for brevity
  10:     }
  11:   
  12:     function renderContent()
  13:     {
  14:        context.save();
  15:        renderGrid(20, "red")
  16:        context.beginPath();
  17:        context.fillStyle = "White";
  18:        context.strokeStyle = "White";
  19:        context.fillRect(posX, posY, 10, 10);
  20:        context.restore();
  21:     }
  22:   
  23:     renderContent();
  24:  });

In the code above, we’re using jQuery‘s ready event to draw our reference grid and a small white rectangle on the canvas. I’ve also added a couple of variables (in bold) to hold the current position of the rectangle. Here’s what our example looks like so far:

ECBasicAnimation1_thumb[4]_2

OK, so it’s a bit plain perhaps, but we can make it better with animation. To get started, as noted earlier, we need a way to draw multiple frames at a specific rate, and for that purpose, most folks use what’s called an animation or game loop, which looks something like this:

   1:  function animationLoop()
   2:  {
   3:     canvas.width = canvas.width;
   4:     renderContent();
   5:     posX += 5;
   6:     if (posX > 500)
   7:        posX = 0;
   8:     setTimeout(animationLoop, 33);
   9:  }

In the code above, I’ve created a function that will take care of drawing a frame of our animation each time its called. Recall from earlier parts of the series that setting canvas.width will reset the canvas. The rest of the code simply draws our content, then adds 5 to the posX variable which determines where our box is drawn, and if posX is larger than 500, resets it to 0. The last line is key…we use JavaScript’s setTimeout function to automatically call animationLoop every 33 milliseconds, which gives us a frame rate of approximately 30 frames per second (to get FPS, just take 1000ms and divide by the target frame rate – 1000 / 30 = 33.3333333333333). Here’s what it looks like:

Note: If you can’t play the video, you can also see the code in action by clicking the Result button below…

Here’s a jsFiddle for the above example:

As you can see, it’s pretty easy to get things moving in JavaScript and Canvas. Of course, moving a little white box is just the start. Let’s go back to our pal from the previous entry in this series, and have a little more fun. We’ll add a few fields to keep track of some additional properties of the object we’re drawing (note that for more complex cases, it probably makes sense to look at creating objects to encapsulate all of the relevant properties for a given shape that you’re drawing), as well as a new function to aid in drawing our shape (new/modified code is in bold):

   1:  $(document).ready(function() {
   2:      var canvas = $("#myCanvas").get(0);
   3:      var context = canvas.getContext("2d");
   4:      var startAngle = 0.25;
   5:      var endAngle = 1.75;
   6:      var gapClosing = true;
   7:      var posX = 0;
   8:      var posY = 75;
   9:   
  10:      function renderGrid(gridPixelSize, color) {
  11:          // omitted
  12:      }
  13:   
  14:      function setAngles() {
  15:          if (startAngle <= 0) gapClosing = true;
  16:          else if (startAngle > 0.25) gapClosing = false;
  17:   
  18:          if (gapClosing) {
  19:              startAngle = startAngle + 0.05;
  20:              endAngle = endAngle - 0.05;
  21:          }
  22:          else {
  23:              startAngle = startAngle - 0.05;
  24:              endAngle = endAngle + 0.05;
  25:          }
  26:      }
  27:   
  28:      function renderContent() {
  29:          context.save();
  30:          renderGrid(20, "red")
  31:          context.beginPath();
  32:          context.fillStyle = "Yellow";
  33:          context.strokeStyle = "Yellow";
  34:          context.arc(posX, posY, 50, startAngle * Math.PI, endAngle * Math.PI);
  35:          context.lineTo(posX, posY);
  36:          context.stroke();
  37:          context.fill();
  38:          context.restore();
  39:      }
  40:   
  41:      function animationLoop() {
  42:          canvas.width = canvas.width;
  43:          renderContent();
  44:          setAngles();
  45:          posX += 5;
  46:          if (posX > 500)
  47:              posX = 0;
  48:          setTimeout(animationLoop, 33);
  49:      }
  50:   
  51:      animationLoop();
  52:  });

If everything’s working as expected, here’s what it should look like:

Note: If you can’t play the video, you can also see the code in action by clicking the Result button below…

Here’s a JsFiddle with the final code from this post, if you want to play with the APIs:

Summary

Animation in HTML5 Canvas is pretty easy and straightforward to accomplish. Of course, there’s much more you can do, including abstracting some of the animation tasks so you’re not doing quite so much low-level drawing, or even taking advantage of 3rd party libraries to simplify your life.

If you found this useful, why not tell your friends? You can also subscribe to my RSS feed, and follow me on twitter for more frequent updates.

More parts in the series:

Up next, I’ll show you some more advanced animation techniques…don’t miss it!

Exploring HTML5 Canvas: Part 4 – Transformations

[This is part 4 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface. In Part 3, I showed how to draw paths and text in Canvas.]

Transformations in HTML5 Canvas are surprisingly straightforward, but come with a twist if you’re used to other platforms. For example, in both SVG and Silverlight, transforms are applied by applying additional markup elements or attributes to specific elements or groups of elements. This means that you have pretty fine-grained control of transformations, and can apply them even after a given element has been rendered, by using code to add the necessary attributes.

Continue reading Exploring HTML5 Canvas: Part 4 – Transformations

CapArea.NET Follow-up: HTML5 Metro apps resources

caparealogoMy thanks to everyone who came out tonight for the Capital Area .NET User Group for my presentation on developing Windows 8 Metro style applications using HTML5 and JavaScript. Great questions and lots of great discussion. Thanks for keeping me on my toes!

As promised, I wanted to share pointers to some additional recorded sessions from BUILD that you may find useful, as well as a link to the sample Canvas Paint app that I used for my demos. If you’re interested in getting the additional tweaks I added to the sample to support persisting the brush color and size, etc. please drop me a note via my contact page, and I will be happy to share it.

Additional Related BUILD Sessions:

and the presentation on which my talk tonight was based:

UPDATE: Nevin House, who attended last night’s talk, got in touch with me via email, and recommended the following two talks on JavaScript, and I heartily agree…both are great talks and are highly recommended for anyone wishing to better understand JavaScript in the context of Metro style apps in Windows 8:

Both presentations feature some of the best presenters from BUILD. Enjoy!

Canvas Paint Sample App

canvasPaintLogo_2The Canvas Paint sample app, along with many other samples and demos, may be downloaded from the Samples area for Windows 8. The direct link to the Canvas Paint sample is:

http://code.msdn.microsoft.com/windowsapps/CanvasPaint-878fa5d5

Note that you can browse the code directly online, or download the sample and run it locally (if you have installed the Windows 8 developer preview).