Cut The Rope: from iOS to HTML5 to Windows 8
Sardo, Giorgio
Cut The Rope is one of the most successful Objective-C games on iOS. In this session you will learn all the secrets of the behind the scenes and what it took us to port it to an HTML5 game and a Metro app, including code snippets, best (and worst) practices and developer tools.
 This is the moment where I'm going to sing. Azzurro El pomeriggio. No, I'm not a good singer, so I'm just going to do what I'm good at. Before I start, actually, quick logistic, out of the door you will see three cards, green, red, yellow. This is like the performance of my session. You don't need those two, so you just use the green and you just put the green one in the basket and you're done, right? My name is Giorgio Sardo. I work in Microsoft in Redmond, and I'm the director of the Windows Evangelist team. I think I have one of the best jobs in the company in Microsoft because I get to play with very, very smart people, either in the product team, like the Internet Explorer team, the Windows team, the JavaScript team, the Visual Studio team, but also with partners around the world. So I travel a lot around the world, I meet a lot of partners, and we often get to work on projects together. And one of these projects I've been involved on with my team has been Cat the Role in the last year. And so today I want to share some of the insights and some of the behind the scenes of that game. It's a fun session. I will tell you some stories. Something is kind of obvious. Something is more secret, so we just keep it for this room, all right? And then if you have any questions towards the end, I'm happy to take your questions. Before we start actually talking with Cat the Role, let me give you just a little bit of context, right? HTML5 games have been popular for a couple of years now. Do you remember this? Have you seen this before? It's called Pacman. And you might have seen it before, right? You might think, this is one of the very first HTML5 games that my team has been working on. And it's kind of lame, but this is what I love more, right? You have a maze, and I can go up, and then I can go right, and then I can go up, and I can go right, and I can keep going and going and going. And if I go home, actually, when we first released it, there was just one maze. Oh, now there are 1 billion dots eaten, and 91,000 maze is created by end users, right? So this is a big board, and you can just keep panning to a place where there is something, some spot available here, and you can create your own maze. And all of this is just HTML5. So this is a project we've been working with Nanko for the launch of Internet Explorer 9 one year and an alpha go. And this was a good, good fun. And since then, we've seen other games. For example, Google had been working on Angry Birds. I assume you know the game, and you can just play Angry Birds in the browser. It's an HTML5 game, well, mostly, and it's nice. It supports up cache, it supports other nice... Mozilla more recently released the browser quest. I love this game because it uses web sockets, and so allow you to connect to multiple people in real time, and it's quite a small view. You can actually interact with other people, and you're using web sockets, so behind the scenes, you're communicating real time with other people in the world. And then more recently, just for fun, we created another small game in Microsoft. This is what we do, and we don't know what to do. It's called Bored to Death. It's very complex, so let me show you how we work this. Just like the number of players. What is it? I super need to kick someone! Oh my god, me too! Let's totally do it! And this is the game. So you might wonder what is a mach-melo doing in here? Well, it is cool. You can eventually give them fire as well. Alright, you get the idea. So what is all of these games having in common? Don't be shy. HTML5, easy as that. They're all HTML5 games. We're just using JavaScript, HTML5, CSS, and other beautiful standards, but there is no plugin, there is no other things other than HTML5. And this is just to show you that we actually came a long way. And when we look at HTML5, you know, like three years ago, when we released IE9, HTML5 was just starting to grow and to be adopted and to become standard. Now, when we look at the standards implemented in IE10 or other browsers, this is getting bigger and bigger, right? HTML5 is not anymore one or two specs. We're talking about hundreds of these different specifications that cover graphic, cover API, cover offline, databases, sockets. You can do pretty much anything that an application needs in HTML5. And so today we're not going to talk about all of these, but some of them. And now that we kind of like started with very quick overview of what HTML5 is, do they want to share the experience building Catderob? How many of you played Catderob, the Catderob game before? OK, many of you. How many of you don't know what Catderob is? OK, wow. So Catderob is one of the most popular games on iPad and iOS. Originally it was for iPhone. Actually, I think it was one of the most popular games on iOS. And it was an application written in Objective-C, so in a native application for iOS. And I'll be honest, the Internet Explorer team spent about two-three years saying Internet Explorer is fast, it's hardware accelerated, and we support all of these standards, and it was beautiful, and blah, and blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, computer, GPU, blah, blah, blah. And so we thought, let's take a challenge for the Internet Explorer team. an application like CutDrop, which is a native application for iOS, let's try to convert it to HTML5. Let's see how it goes, right? And so we started from the code, the Objective-C code. And one of the criteria, we set two criteria for this project. The first is that we didn't want to lose fidelity. So we want to have exactly the same quality of the native game as an HTML5 game. So we didn't simplify, we didn't change the code. We wanted to have the same fidelity. And that means that eventually we decided to convert line by line, all of the Objective-C code into JavaScript. This is arguably a wrong thing to do, but we had 40,000 lines of Objective-C and we just converted to 40,000 lines of JavaScript. And that ensured us that we had exactly the same user experience. The other criteria was, let's use only HTML5, right? We didn't want to use plugins. And so we started the project and we start looking at the code. I cannot show you the code, obviously, today, but I will tell you that in the iOS source folder, there is all of the code for the CutDrop game. And 14,000 lines of code, you can imagine Objective-C was the component for obviously the code and then they were using OpenGL for all of the graphic. When we look at the JavaScript implementation, we were using JavaScript mainly for the code and the Canvas to show the graphic. And now we start with the Canvas. I will show you a very quick example of how an animation of CutDrop looked like. Actually, for those of you that didn't see the game, let me just play the game on the website so we know what we're talking about. So this is the game. You have an HTML5 video. You have a selection of boxes. So these are just divs. And then you start into a level. You have your game. You CutDrop. You make your score. And that's it. So how does it work? You all start from this. We kind of like built this in the first day we were working on this game. And we work on this game, by the way, with the company that owns the game. It's called ZeptoLab. It's based in Russia. As well as one of our partners called Pixel Labs, which is based in Seattle. And they've been helping us with the development and design. So this animation is in a Canvas animation. So we're using the HTML5 Canvas. Let me show you the code behind, because you might think that there is a lot of code behind this animation, but actually it's just maybe 10 lines of code, if not less. So I'll zoom here. First of all, there is nothing in the page. So we have an empty body. When we load the page, I'm just calling this init function. And the init function creates a Canvas element dynamically. Then I set a size for the element and I append it to my DOM. I just add the element to the DOM. I get a local context to do my drawing. And then I have the most simpler basic stupid loop. So set interval. And every 16 milliseconds, I just loop into this anonymous function. So this is a drawing loop. And every 16 milliseconds, I'm redrawing. And this is the beauty of the Canvas. It's a surface where you keep drawing, drawing, drawing, drawing, drawing. At every iteration, there are two things that happens. The first, I clear the screen. So I'm saying, hey, clear everything that was drawn before with Canvas.clearRect. And then draw an image. So where is that image coming from? That's the trick of the project. This is asprite. So asprite is an image that includes multiple images. And if we look closely, you basically is the OMOM, like this character. And you might think, oh, it's the same image. Not really, because it kind of like a change, right? Like each frame, each image is different from each other. And the idea is that actually all of these are frames of an animation. And so if you take the big image and you show only one portion of this image and then you scroll very quickly on one line, for example, on one strip, you will get the idea that is an animation playing. And that's what's happening on this page, right? I have a loop and I'm just very quickly redrawing, taking the image from a different position into this larger image. And so if we look at the function, the next function, the draw image function, that's basically what it's doing. It's just mapping the coordinates, x, y coordinates, and then it's just saying, hey, to the canvas, draw an image and take the image in particular from this source and draw it to this destination. So, the line of code and we get the image. That was easy. We arrived here in about one day. The next step, and this has been the most challenging step, is being this, the rope. Now, do you think this is a fast as low? Let me refresh you one more time. What do you think about the performance of these ropes? Good? Bad? Good. Right? Well, actually, when I sent this to Russia, to the team in Russia, the partners sent me an email saying, hey, George, this is horrible. I was looking. I was like, no, it's not. And then they say, we need to kill this project now. Let's just stop it and let's do some finesse. And I was like, no way. It's working. Why should we interrupt this project? And they make a good point. They say, no, actually, if you look in the profiler, if you look in the JavaScript profiler, you will see that this animation is taking, is low. It's not a 60 frames per second animation. The mistake I did was that I was testing my machine. And on my machine, the performance was good. But when you test on, like, the partner was testing on another machine, Mac. And the performance, I think they were using Chrome, I don't know, or Safari, I don't remember. But this is the performance that they got. So on the left, you see the performance that they were seeing on the screens. And on the right, you can see my performance. So there was a clear disconnect here, right? And so, harder matter, apparently. And so, this was a problem because we were about to kill the project at this point. We were about to say, no, actually, you know what? We just demonstrated that we cannot play cut the rope in HTML5. And then we tried to understand the problem. And here's the thing. That line, that rope, you might think it's a line, you might think it's a bezier, but you're wrong. It's actually made of 20,000 triangles next to each other. So imagine 20,000 triangles and every 60 milliseconds, you're just animating all those triangles to make it look like a rope. Why? Because in OpenGL, you don't have anti-alising. And so, the way, in order to do anti-alising, you need to break down, like, an align a bezier into triangles. On top of those 20,000 triangles, they also wanted to have nice soft edges. And so, they added other 10,000 triangles to the edges. And so, basically, every 60 milliseconds, you have a JavaScript loop that is iterating 30,000 triangles. So now you see why it's slow, right? That rope was 30,000 triangles. And it is still 30,000 triangles in the browser. Can you imagine? Like, take a look at this. 90,000 triangles playing on this page. Isn't this cool? But then, you know, like, we could have just say, okay, this game is going to work only 99 because it's hardware accelerating and we can run this. We decided to try to fix it and try to find a better solution to run this. And so, I'll show you some code here because it's interesting. But the real trick to identify this, like, if you're building a game or if you're building an application, the learning here is use the profiler, use the JavaScript profiler in your browser. So, for example, now I'm opening the F2L tools in IE. I start the profiling session. I refresh the page. And then we let this swing for a couple of times. Then I stop profiling. And you can see immediately where the issue is vector. This vector in Calpath-Besier is exactly the code I was referring to, right? There are, like, four million iterations of vector. And vector is actually like a class. So, we are creating the vector object four million times. This is just a waste of space, as I will show you shortly. And so, we knew at that point that we had to optimize vector. Let me show you the code snippet so it's more clear the type of optimization that we did. So this is quickly going to get very technical. Optimizing code lesson number one. How do we optimize this? So we have a game object. And in the prototype, we define a function called applyimpulse1. And the applyimpulse basically does two operations. The first is a multiply operation. And the second one is the add operation. I will tell you that there is a way to optimize the add. Any idea? Look what's going on there. You're basically taking this dot pause. So you're taking a variable. And you're passing it as an argument to the vector dot add. Then you're getting back a result. And you're assigning back the result to the same variable. So there immediately there is an override. Because on the other side, on the inside the vector dot add, most likely you're creating a new object. You're making a calculation. And then you're transferring the value to the original object. And creating that new object, making a new allocation is expensive. And so the way we have to optimize this, if you look at the applyimpulse2 is that instead of creating two different objects and then swapping memory the values, we're just creating a prototype for add. And we are in line the value inside the prototype. So this was the very first optimization. Now let's go to the next one. How can we optimize the vector multiply? Can we do the same trick for multiply function? Anyone? No, we can't. Just because it's a multiply. So this time we need to actually add two different parameters. But the way we can break this down is, you know, let's just use local variables. I mean, this is a complex algorithm. We are calculating this a thousand of times every 60 milliseconds. It's not important that your code looks beautiful with the right prototypes and the right naming function and the get and setters. You need to be fast. And if you want to be fast, you need to start inlining your code. And eventually there is a way to be even faster than this, which is just get rid of the prototype as well. And so we just get rid of the applying Pulse 3 completely. We removed it from the prototype and now we use the three lines of code that you see below. We just copy and paste the line of code every time we need to have this particular operation. It was easy. This optimization, when we look at the profiler that I showed you earlier, allow us to save from 2.2 million allocations to 30K. In terms of array to calculate all of those points of the BZR line, we moved from more than 200,000 arrays to 400. And now the game was running faster. Everything clear so far? This is easy, right? So this was my worst day in Microsoft, I think, because really, like, it's not good to be so close to cancel a project, such a cool project, actually. But it was so good to find a solution. And now finally you can play the game on some slowest browsers. The other thing you can do, have you ever used XPERF? So XPERF is part of the Windows SDK. This is a very, very complex tool. It wouldn't deserve its own session. But I want to show you the result. XPERF basically allow you to take a session in the browser and profile it and profile what's going on in the memory, in the disk, in the screen, and then visualize it. And so I basically took in the past a profile section of the game. And I'm just going to open it now with my visual analyzer. And what you're going to see shortly, this is basically what's going on in my machine when I play the CatDrop game. To you, probably, this means nothing. To the IE team, this is gold, because this gives you all the information about what's going on in the browser. On the X axis, you see the time. So the X axis is the time. The Y axis, depending on which chart we are looking at, it gives you different type of information from the CPU that is used. In this case, those dysfunctions is basically when you redraw on screen, so when you're calling the GPU card to redraw on screen. But the one that I want you to look at is the one in the middle here with the bars. This is seriously interesting because it basically break down the CPU time spent across the different engines, sub-engines of the browser. And so we'll tell you how much of the time was spent inside, for example, the JavaScript engine, or how much time was spent in the display engine, or really out in the page, or formatting the page. And so this is helpful to understand where you can be faster. And now, for example, if I look at this series, this is the time when I'm cutting the rope, when I'm playing the game. So I just zoom into the selection, and then I can zoom, keep zooming into one specific selection. You see that there are blocks of something happening. You remember that I show you a timer, every 16 milliseconds the timer was clicking. This is basically my timer. So every 16 or 40 milliseconds, I'm just starting to do a new operation, and so I'm reactivating in terms of the explorer. And the interesting part, let's zoom into one of these. You can see the first part is just the UI thread, so this is just the browser. Then it goes into the display, so then it's communicating to the GPU what to draw on screen. And then there is some JavaScript to calculate all of the points and to calculate the physics engine permutations. And eventually, there are always other costs with the layout if you're changing DOM elements in the page. The interesting part here is that if you take this loop, this is four milliseconds. So each loop, I'm just taking four milliseconds. Remember that the timer was 16 milliseconds? It means that I basically have 12 milliseconds left that I'm not using, which means eventually you can build games that are even more complex than this. So this was easy, right? You still have 12 milliseconds for each loop where you can do more if you're building more complex applications. How many of you are lost at this point? Is this too much? Is it too in depth? Is it okay? Just getting a feedback? Okay, cool. I wanted to show you something like more internal, more new that probably you haven't seen before. But if you have any question, just feel free to interrupt me. Nicely. And so at that point, we basically just keep working on the game. And about four weeks into the project, we just started, we were starting to get everything together. And about four weeks into the project, this is what Cut The Rope was looking like. So let me refresh again. It's not perfect, right? There is some bug and then as I cut the rope, the physics engine is still not there. But you can see that it's running six different per second. It got the rope, it got the animation, it gets everything you need. Yes, it's working. It's fucking working. Screw you that you say it was too slow, right? This was fun. When we got to this point, actually everything was easy. So we knew that we could have just done it. And so from this point on, it was just a matter of implementing the game, implementing the logic, implementing all of the various elements. And if we look at the page, again, it's still a fairly clean page, right? So we have only one thing going on on this page, a canvas element, which is where we are redrawing all of those frames. And then I have my logic of my JavaScript logic. Notice also that we are using Jaquiri. We decided to use Jaquiri for some of the animation that I will show you shortly. And we're not using a physics engine. So the physics engine is basically built in into the code. We're not using Box2D or other frameworks. And this actually helps us also to increase the performance and make sure that the game had the same playability that added the beginning. And also we didn't want to add overrides in the middle. We did build like a framework to preload all of the assets. So when you have a game, basically the first thing you need to do is preload in memory all of the visual assets, all of the images that you're going to use in the game. And we made that framework available open source is at, I think, pixellab.com. The next thing is about touch. As we were working on this game, we were designing this game for as an IE project, as an IE website, as a website actually, as an HTML5 website. And so we had the challenge of taking a game that was for a device, for a mobile device where you would use the touch to cut the ropes. And we had to convert that action into a mouse action. And so we initially start removing all of the touch gestures, touch inputs, and replacing those with mouse input. But eventually we realized that today it's not anymore about mobile or browser. I'm not sure if you follow some of the recent announcements. Last week we released Windows 8. This week, a computer text like Intel shows 50 different devices. But we talk about, at E3, we talk about Xbox and IE on Xbox. The reality is that the HTML5, the browser, and our platform is getting to a variety of devices. And these devices very soon, not 10 years from now, but this year, like this holiday, we start having touch screens. Like my laptop today is already touch screen and I will tell you, it's beautiful because it's just easy. And in a few years from now, all of the machines that you have in your office, in your home, everything will just be touch screen. And so it's very, very important to think about mouse and keyboard, but also the touch input. Up to the point where I was a couple of weeks ago, I was in Singapore, and I was talking with one of my colleagues and he said, Georgia, I hate you. Okay, sorry about that. Why? This basically, my friend has two kids. And you can see the kids playing Cat Drop on the machines that they have at home. So you see the first kid, she's playing Cat Drop using the mousepad on the laptop. The second one is using this Windows 8 tablet. So it's just using touch on a Windows 8 tablet. But here is the challenge, right? And there is a television that is projecting the tablet. And then you want to do that. You want to touch the television. And you want to, like, you know, the expectation at some point will be that. And this feels like, oh, she's a child. It's normal that she's so dumb, but she doesn't understand yet the reality between what's real and what's not. I made the same mistake every day. In the office, I have all touch screens. And at home, I still have an old monitor still in the upgrade. But then, you know, I spend the time in the office just touching the screen with my fingers. And then I get home and I touch the screen and I'm thinking it doesn't work. And then I'm thinking you're an idiot. Like, it's not touch. But soon, like, all of the screens will be touch screens. And so it's important to get there. And so bottom line, as we start looking at the touch screens, today there are a number of APIs. Actually, Apple has been the first to come out with a number of APIs, like touch, start events, et cetera. And we look at those APIs. We thought that they were good, but not enough. And we come up with a different proposal. We call them pointer. This is pointer API. I still prefixed it with MSMS. We're still looking for feedbacks and making this more solid. But the idea is that we have one event called pointer that can trigger all of the different input, like input. Either it's a touch or it's a pen or it's a keyboard. If it's a mouse, not the keyboard, sorry, the mouse, it's just one event called pointer. And so you get pointer down, up, up, over, cancel, et cetera. You get all of the properties that you will get before with the mouse. And in addition to that, you get new properties. Like, if you're doing a gesture, like some information about the gesture, the pressure, the movements, the diff of the points. But the beauty of this approach is that in our application, we have only one event. For example, canvas.listen for mouse, sorry, pointer down. And then if I'm on a tablet, that code is going, Windows is going to connect to my touch driver and it's going to transform the touch input into a JavaScript event. If I'm on my laptop or my desktop, I can just use the mouse and it will just work. And this is what we use in cat.rob. And it works great. And so eight weeks into the project, sorry, 12 weeks into the project, we were done. So let me show you the final project. And this is my beautiful application. So this is the same website that you saw before, right? It's just running locally. I will tell you that at this point, we started the QA with Zepto lab in Russia. We sent them the game. These guys are the same guys that at the beginning that told us it's too slow, we should kill the project. Next day, I got another email in my inbox. George, it's too fast. Can you slow it down? You laugh. I was like, yes, it's too fast. And you know what we did? Well, initially we kind of like negotiated. Why should we, like why should we need to slow it down? But then eventually we realized that it was important to keep a consistent experience. And that means that in that code, when you play the game online, inside all of the JavaScript loops, et cetera, we basically add other JavaScript code to slow down the animations. Believe it or not, like we really added code to slow down the performance. And there was a good test for the browser. Hardware acceleration matters. And having a good browser and a good platform, not just the browser, a good user agent in general that is able to render fast graphics, fast JavaScript is important and matters. And we did test this website, not just on IE, but we also wanted to test on a variety of devices. So we tested it on Chrome. It will work on Chrome, on Firefox, on Safari. We tested it on the iPad, on some Android, not all of them. We tested it on the Windows 8 devices. And the result was quite impressive. Like we built the website using IE, but at the end of the day, it just worked on most of the other browsers. There were very few things that we had to tune between one browser and the other. And in terms of the only difference was the performance. So the code works across all of these browsers. The performance was different. And we had to do some optimization on the slowest browser to optimize the performance. A couple of things I want to share. So if you're building a game, most likely you will need to use the Canvas object. And in particular, there are a number of new functionality and new APIs that have just been included recently in some of the browsers. Like some of these are just coming in with IE 10 and are not even implemented in other browsers, but they're all standard compliance, so you should expect them to see soon. A request animation frame, instead of having, the idea is that instead of having like a timer and then saying every 60 milliseconds send some code to the GPU and let the GPU draw on screen, you change this and you do the opposite. And so you say, A GPU, when you have time to draw, can you call me and then I'm going to give you the code back? And that's a nice way to optimize basically your workload with the GPU and to run even faster. And the thing immediate, it's something that developers ask for years, but browsers never gave it to developers. Have you ever done set timeout zero? Have you ever done it? And you know that it's silly, like there is no way any browser is going to return in zero milliseconds, just because the browser is basically using the CPU or the GPU clock. And so each browser will interpret the set timeout zero in a different way. So in Chrome you'll get between three and five milliseconds. In Firefox between 10 and 12, I believe, Opera is between 10 and 50. IE is around 16 or four if you're using high performance. Set immediate is basically a way to break down your code and say as soon as you can, it's almost zero, right? As soon as you can, call me back. And so this is very helpful if you have a long operation and sometimes you need to break down to make sure that the UI doesn't get stuck. You can just interrupt your loop or your thread with set immediate. In performance.now, this is very, very recent. Like we added this maybe a few weeks back. And the idea behind performance now is that today you have date time.now, right? Or date time, get time. That gives you more or less now it's, yeah, what time is it? 11, 55, 20 seconds and 50 milliseconds, but I'm not really sure. When you start drawing things, when you need to get precision, you need to have the CPU exit perfect time. And that's what performance now does. Performance now, they're basically high resolution timers inside the machine and it will give you very, very granular and precise information about what time it is. And again, this is coming from the web performance working group. So this is something we've been leading there for a while. For simpler interactions, for example, you know at the beginning that there is that sliding of the box and you just choose the box? That was not a canvas. We decided to use Jackery and CSS to do the animation because it was easy. We didn't want to complicate our life. And so eventually we end up having a page that has some canvas, some DOM element, Jackery to do the animation between the boxes or CSS to do like the closing animation. Some tip about audio as well. The good news, HTML5 audio is awesome. You have an audio tag, you can play audio and it just works. And that's what we use for this game. And I see some of you are thinking, what's the bad news? The bad news is that some browser cannot handle HTML5 audio yet properly. And there are non-bugs open at Firefox and Chrome and we actually work with these guys for a couple of years now. I'm waiting for them to fix it. But eventually at the end we had to, and this was a painful decision, but we had to fall back to Flash. So if you're using Chrome or Firefox, we are actually using Flash for the audio. It's the same trick that Google used for Angry Birds. And this is just, again, a fallback solution. This is not what we wanted, but eventually right now, like you're not able to loop very quickly audio loops in these browsers. On IE, it's still HTML5 audio. All right. Oh, did you notice this? That sound? No sound. Sound? No sound. So this is either called magic or it's actually, no, it's not magic. It's another standard coming from, I think it's the Web Performance Working Group. It's called page visibility. And it's the idea that if your tab is not like on the foreground, we basically give an event to the site or to the application and we can suspend the drawing loop or we can suspend the audio in such a way that we don't consume battery or resources behind the scenes. There are a lot of nice HTML5 things behind the site. All right. So at this point we moved from an iOS application to a browser application. It was working on most browsers. We were very happy. And by the time, by the way, we were two weeks away from the consumer preview, from launching the consumer preview of Windows 8. And so at that point, in Windows 8, we talk about the platform and I have a session after this where we will talk about Windows 8 meta applications. But one of the characteristics of the Windows 8 platform is that you can use HTML and JavaScript to create applications, meta applications. And so we thought, what does it take to take a game like this and turn it into a meta application? And so let me do step by step what I did that day. So I opened the new Visual Studio tools. Those are free. They just come with Windows 8. I create a new project. And so notice that I have a project template for JavaScript Metro app. And I just choose the blank app template. So Visual Studio is creating a template for me. And so I'm going to move this on the right. This is my website. So this is my previous website. What I'm going to do, I'm just going to go to the Windows Explorer folder. I'm going to select all of the files, right click, and I say copy. So I'm just copying all of the files that I use for the website. Now I move into my Metro project, go to the solution folder, and I say paste. And I decide to override everything as soon as you let me override. There it is. So I'm just copying all of the files inside my Metro template. Then there is a file here called package app manifest. This is an XML file which basically defines some of the property of the application. The only thing I need to change is basically I want to start from index.html. So I save. Ready? I click local machine debug. What do you think? Is it good? And this is functioning, right? So now I'm using my finger. It's touch friendly. And it's a Metro application. So with zero line of code, we move something that was a website built in HTML5, CSS, and JavaScript into an application. So this is an application that is running as a Metro application. Now what I've just done is I've just created a new application called a Metro application. I've just created a Metro application called a Metro application. So I've just created a Metro application called a Metro application. So this is an application that is running as a Metro application. Now what I've just done is horrible. Don't do it. Never. Promise. Do you promise? Please, don't do it. Because I'm not here to ask you to take website and port them to do a copy and paste and now you have the application, yeah, I have an application. This is not an application. This is just a technical proof that the platform is the same. You can build Metro application using the JavaScript HTML and CSS that you already know that said this is not an application. You see that it just doesn't feel like an application. It's not full screen. It doesn't have any capability that make it an application. And so I'm going to kill this project and I'm going to show you actually what the real application that you find in the Windows A store looks like. So you find here the tile, right? So I'm just going to launch the tile. This is my application, Metro application, the real one. So you see that it's full screen. So basically we did some work to change the assets and to make sure that we fit the screen resolution. By the way, Windows 8 runs on a variety of different resolution from 1024 up to 2560. And so we basically have three different set of assets and then depending on which resolution you're coming from, we rescale using CSS 3, the whole viewport to a different resolution. Then you can play the game and you have the same functionalities. The options, for example, if I click options, I'm using the setting charm bar of Windows 8. So I can also open this by swiping on the right. I got settings and now I have specific settings for my game. But it already feels like settings of a Windows app, right? I'm already using Windows. When I play a game, and so now I'm going to play without looking. I'm very good and I'm very happy about my 3,544, a lot of score. And I want to share this with my friends. And so what I do is, again, I swipe from the right, I pull the share contract and I have a number of applications that I can use to share. This is Windows 8, right? And so basically I'm creating a connection between an application that gives some content to share and other applications like my mail client that takes that application. And I can just say to my manager, hey, Drew, I'm playing, not working. And I can just share this over email. Or I could use one of the other applications and just share it on Twitter and very quickly tweet it from here. I can do other things like, you know, Windows 8, you can snap side by side application. So you can have, let's see, for example, you can have, let's open my mail client and then I take a drop. And so for example, if you're in the office, no, no, I'm working, I'm working. And then when your manager leaves the office, you can continue playing your experience. And then as soon as something happens, oh, no, I'm back on my emails. And this is again something that you can do using, as part of Windows 8. So other things that we can do is just play with the ties. And so you see, for example, the ties of the application on my side, those are called live ties, because basically depending on the context of the application or what's get pushed by the server, we show a real time notification and updates to the user. And so eventually think about displaying a new achievement or new levels or other players waiting for you in the queue. And so these are just some of the things that you can do with Windows 8. And you can see that now it starts feeling as an application. It's not a website anymore. So let me show you the code behind the application. So I already have a project here. And all the code is the same. The difference is that I just wrote a few additional lines, which are all here, to implement some of the specific functionalities of Windows 8. Let me increase the font here. 16, so you can see it. So for example, at the beginning, I'm connecting to the own settings. And basically when the users wipe on the user like the settings panel, this is just like an HTML page inside my project where I define all of the settings property. And I just say, hey, when the user used the charm bar in the setting, go and display my page. Another thing that I did is, oh, this is very nice. One of the features that has been more requested during the consumer preview is just the ability to roam the settings of the game. So you start playing in the office. You have a very busy day in the office and you get to the 20 level and you unlock a lot of achievements. And then you go home and you have a different machine and you need to restart. You expect to catch up from the same place. And so what we have in Windows 8 is the ability to roam setting. Each application has its own space. It's like a folder in the Discord. You can imagine it as a virtual space in the cloud where you can just store information. And so all of that logic is within those 10 lines of code. Basically, every time you unlock a new level, you're just saying to the cloud, hey, save this new information to the profile of my user for this application. And then the other machines will just reconnect and sync automatically. And the roaming is given to you by the Windows runtime. And we will talk about the Windows runtime later again. You remember that I snapped the application side by side with the mail client. That code is just using a media query. So we're using CSS3 media query. In particular, we have a specific media query defined as view state, synapt. And basically, we have a listener, which this is a very new standard from the CSS3 working group that allow you to listen for the specific state. And when you're in that state, we basically pause or re-enable the logic of the game. Tiles. We actually also have tile notifications. So as you start unlocking new levels, we can update the tile of the application. And the way we do this is just, again, using the notification namespace in the Windows runtime. We start from a standard template. We change the image. We create the image on the fly using the number of stars of your last level. And then we create a tile for your application and we update it. And then the last one is the share contract. And now we show you the share contract here. So this is the basic function for the share contract. You start from Windows and then you get a data transfer manager. Oh, here it is. Sorry. Data transfer manager. And you add an event listener for data requested. The share contract in Windows 8 is a contract. It's like an interface. It's very simple. Normally in the past, for example, if you have a website and you want to share information to Facebook and Twitter, you need to code. You need to write the code for two buttons, Facebook and Twitter, and embed them inside your application, inside your website. With Windows 8, we decided to make this experience more linear and more flexible and more powerful. The application says, in this case, cut the rope, it's not sharing. The application is saying, I have something that I can share. Right? So for example, if you just unlock a new level, it will say, I have a new achievement. And this is my text, image or link. And you ask to the operating system, here's my content. Can you please ask Windows to share it with some other application? The operating system is basically going into the, when you do this, it's basically looking all of the application installed on my machine. And you look for all of the applications that are able to reshare content. In this case, I have like a Twitter, I have a People app and a Mail app. And the operating system is responsible for creating that connection between your data and the contract or this application. So it's like an interface. And this is very powerful because then you don't need to implement one contract for every channel you want to distribute. You have one unique data and you can have as many applications installed as you need. All right. So this was basically the application. Let me show you one more thing. This is actually quite exciting. Everything I show you so far is called Visual Studio. Have you used Visual Studio before? Good. Now, let me show you another tool that we call Blend. And if you use Civalite or XAML or you did development for Windows Phone before, you're probably already familiar with Blend. The news with Windows 8 is that now Blend allows you to also to work with HTML project. But it's not just the type of tool that you would expect. And let me show you why. Let's open my page. Default. It's slow. It's taking some time. Here is my page. Do you notice anything? Anyone? It's animated. It's moving. It's alive. You see the shadow in the background? That shadow is not CSS or HTML. It's JavaScript. So we're actually looking at a page that is running JavaScript in the background. And that's the power of Blend. Blend allows you to edit an application in real time. Not just looking at the static DOM, but also at what gets created in real time from JavaScript. Up to the point where eventually you can even navigate into the application. For example, I can start playing. I can start getting the video. I select my level. I go into the level. And then I'm thinking, no, there is something wrong in this page. And you can just pause it and you create a snapshot. But the way this is a canvas. So everything you see on screen now is created by JavaScript. And with the tool, you can still operate on top of the canvas. And you can just edit. In real time, a page is created by JavaScript, not by static DOM. Isn't that impressive? This is freaking cool. This is the definition I use internally. And actually, when you look at the DOM Explorer here, let's go back, for example. Let me reset it to the beginning. Actually I'll show you in the next session. But the Explorer, the solution, the live DOM is called live DOM exactly because it shows you both static DOM elements as well as, like when you see the flash symbol, that means that it's coming from JavaScript. And so the ability of this tool is to combine static editing of a page with HTML, CSS, like you've done in the past, with real time editing of content is creating real time or data binding in real time and anything coming from JavaScript. I think this is the best tool I ever used. And I'm biased. I work in Microsoft as you probably know by this point. But still, this is pretty impressive. And other things you can do with this tool, eventually you can test a different resolution. So you can test, for example, how it will look like on some device, for example, running a 2560 resolution. Or you can see what it looks like when you run it in a snap view, right? Remember when I snapped it on the screen. What it looks like in portrait. And I'm not scared because we didn't test this. So, like you see, it's not really optimized for portrait right now. But you can test all of this very easily. And of course, like you have a full live editing of all of the CSS property and you can set animations, we'll get deeper on this tool in the next session. And the next thing, obviously, is the store, right? At this point, we have an application, which means that we have a great platform, Windows 8, to add a lot of nice features. But we also have a distribution channel to eventually monetize the application. And that is called store. And the Windows Store is the same store across all of the Windows 8 devices. So no matter if you are on a laptop or on desktop, on a tablet, on an Intel or an ARM device, you actually have access to the same store. And so if you go to games, you will see there my page for Cat Drop. You see the nice preview. Good news is that because we are still in a release preview, all of the applications today are free. So go and download it now that they're free because eventually, as we get closer to GA, obviously, developers will be able to monetize their applications. And now I want to show you that exactly the same code, like once I release the application to the store, I didn't change anything, right? So that code base is one code base. It works on the machine. And it works also on a machine like this, right? So no change at all. And now I'm able to play the same game on a touch device. And you can see that the performance is still good, right? We're still running at 60 frames per second. And I can still choose all of my... I can just play the full game here. And eventually, if this device was connected and I play some level here and then I stop playing and restart from here, you remember the roaming? I'm just going to roam in real time through the cloud, my setting and my achievements. And that's why I say that I have the best job in the company because it's fun to work with this stuff. Like, Windows 8 is such a powerful platform that I really invite you to take a look. And it's definitely a good time to spend on Windows 8 now. So today, I share some of the story working on Catderope. This is just one of the many projects we work in internally in Microsoft. And I know that there are people in this room actually that have been working on other Windows 8 applications or are thinking to work on applications. I hope this was inspiring. I hope we gave you the idea that everything is possible and HTML5 is ready, not just for websites, but also for applications. We have tools, we have a platform, we have a store. And this is, again, we just released this preview last week. This week, we are talking about the hardware. So if you haven't seen it yet, just search for Computex and you will see 50 new devices, Windows 8 devices that will ship soon. Because of 2GA, we will talk also about other devices. And I'm really looking forward to see some of the applications that eventually people in this room are going to build in the next weeks or months. And if you have anything interesting, please let us know. We are always excited to see projects from you. The last one is not. My team in Redmond is hiring a Windows 8 HTML5 evangelist. So if you're interested, just contact me after this session. Thank you again. Thank you. So I see five minutes left as a reminder. Green card in the box, the other color, so I just leave them in the table. And is there any question that I can answer now? Yes, please. I saw on your slides you had for the event point, you had mouse, finger and pen. Is there any concept for multiple fingers? Of course, yes. So the short answer is yes. I'll show you later eventually, one demo. We absolutely support multi-touch and we don't have a limit to the number of fingers that you can put on the screen. And actually, I'll show you on this device. Let me see. Or I can even do it here. I just see. If I go to the IE test drive, there is a nice demo that shows like the touch APIs. It's here at the bottom. There it is. Touch effects. So two fingers, one on the right, one on the left. And you can see, so this is just JavaScript and using the MS pointers. And you can see like the shadow of my fingers on the screen, right? So this happens to be, this my laptop supports only two touch points. This Nike device supports 10, so I could put 10 fingers and you will see 10 different fingers there. The code is just the same and we allow that, which was somehow a limitation in other platforms. And also in terms of gestures, like I didn't talk about it, but we support also gestures. And so eventually you can use the Windows gestures or you can eventually create your own gestures just using JavaScript events. Any other question? Yes? How about the non-Java script HTML way of doing things? So the question is, can I do Metra apps in C sharp? Will the support continue? I'll talk about this in the next session, but the answer is, of course. It's the platform, I have a slide and in the next session I'm going to talk about the Windows 8 platform. The beauty of Windows 8 is that we kind of remade in the world system and we have a runtime called Windows runtime, which is the base. On top of this, we have different projections. One is HTML and JavaScript, one is C sharp, BbNet and Samu. And one is C++. And today when you look at the store and you look at the application, some of them are HTML5 games. This is a C++ game. This is a C++ game for the ninja. You might have seen it before. Yes? Oh, you're thinking Windows 9 and Windows 10. We're thinking about Windows 8 now. We didn't ship yet. We will talk about Windows, the next version of Windows after we ship Windows 8. All right. Thank you again.
 This is the moment where I'm going to sing.  Azzurro El pomeriggio.  No, I'm not a good singer, so I'm just going to do what I'm good at.  Before I start, actually, quick logistic, out of the door you will see three cards, green, red, yellow.  This is like the performance of my session.  You don't need those two, so you just use the green and you just put the green one in the basket and you're done, right?  My name is Giorgio Sardo. I work in Microsoft in Redmond, and I'm the director of the Windows Evangelist team.  I think I have one of the best jobs in the company in Microsoft because I get to play with very, very smart people,  either in the product team, like the Internet Explorer team, the Windows team, the JavaScript team, the Visual Studio team,  but also with partners around the world.  So I travel a lot around the world, I meet a lot of partners, and we often get to work on projects together.  And one of these projects I've been involved on with my team has been Cat the Role in the last year.  And so today I want to share some of the insights and some of the behind the scenes of that game.  It's a fun session. I will tell you some stories.  Something is kind of obvious. Something is more secret, so we just keep it for this room, all right?  And then if you have any questions towards the end, I'm happy to take your questions.  Before we start actually talking with Cat the Role, let me give you just a little bit of context, right?  HTML5 games have been popular for a couple of years now.  Do you remember this? Have you seen this before? It's called Pacman.  And you might have seen it before, right?  You might think, this is one of the very first HTML5 games that my team has been working on.  And it's kind of lame, but this is what I love more, right? You have a maze, and I can go up, and then I can go right, and then I can go up, and I can go right, and I can keep going and going and going.  And if I go home, actually, when we first released it, there was just one maze. Oh, now there are 1 billion dots eaten, and 91,000 maze is created by end users, right?  So this is a big board, and you can just keep panning to a place where there is something, some spot available here, and you can create your own maze.  And all of this is just HTML5. So this is a project we've been working with Nanko for the launch of Internet Explorer 9 one year and an alpha go.  And this was a good, good fun. And since then, we've seen other games. For example, Google had been working on Angry Birds.  I assume you know the game, and you can just play Angry Birds in the browser.  It's an HTML5 game, well, mostly, and it's nice. It supports up cache, it supports other nice...  Mozilla more recently released the browser quest. I love this game because it uses web sockets, and so allow you to connect to multiple people in real time, and it's quite a small view.  You can actually interact with other people, and you're using web sockets, so behind the scenes, you're communicating real time with other people in the world.  And then more recently, just for fun, we created another small game in Microsoft. This is what we do, and we don't know what to do.  It's called Bored to Death. It's very complex, so let me show you how we work this.  Just like the number of players. What is it? I super need to kick someone! Oh my god, me too! Let's totally do it!  And this is the game. So you might wonder what is a mach-melo doing in here? Well, it is cool.  You can eventually give them fire as well.  Alright, you get the idea. So what is all of these games having in common? Don't be shy. HTML5, easy as that.  They're all HTML5 games. We're just using JavaScript, HTML5, CSS, and other beautiful standards, but there is no plugin, there is no other things other than HTML5.  And this is just to show you that we actually came a long way. And when we look at HTML5, you know, like three years ago, when we released IE9, HTML5 was just starting to grow and to be adopted and to become standard.  Now, when we look at the standards implemented in IE10 or other browsers, this is getting bigger and bigger, right? HTML5 is not anymore one or two specs.  We're talking about hundreds of these different specifications that cover graphic, cover API, cover offline, databases, sockets.  You can do pretty much anything that an application needs in HTML5. And so today we're not going to talk about all of these, but some of them.  And now that we kind of like started with very quick overview of what HTML5 is, do they want to share the experience building Catderob?  How many of you played Catderob, the Catderob game before? OK, many of you. How many of you don't know what Catderob is?  OK, wow. So Catderob is one of the most popular games on iPad and iOS. Originally it was for iPhone.  Actually, I think it was one of the most popular games on iOS. And it was an application written in Objective-C, so in a native application for iOS.  And I'll be honest, the Internet Explorer team spent about two-three years saying Internet Explorer is fast, it's hardware accelerated,  and we support all of these standards, and it was beautiful, and blah, and blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, computer, GPU, blah, blah, blah.  And so we thought, let's take a challenge for the Internet Explorer team.  an application like CutDrop, which is a native application for iOS, let's try to convert it  to HTML5. Let's see how it goes, right? And so we started from the code, the Objective-C  code. And one of the criteria, we set two criteria for this project. The first is that  we didn't want to lose fidelity. So we want to have exactly the same quality of the native  game as an HTML5 game. So we didn't simplify, we didn't change the code. We wanted to have  the same fidelity. And that means that eventually we decided to convert line by line, all of  the Objective-C code into JavaScript. This is arguably a wrong thing to do, but we had  40,000 lines of Objective-C and we just converted to 40,000 lines of JavaScript. And that ensured  us that we had exactly the same user experience. The other criteria was, let's use only HTML5,  right? We didn't want to use plugins. And so we started the project and we start looking  at the code. I cannot show you the code, obviously, today, but I will tell you that in the iOS  source folder, there is all of the code for the CutDrop game. And 14,000 lines of code,  you can imagine Objective-C was the component for obviously the code and then they were  using OpenGL for all of the graphic. When we look at the JavaScript implementation, we  were using JavaScript mainly for the code and the Canvas to show the graphic. And now  we start with the Canvas. I will show you a very quick example of how an animation of  CutDrop looked like. Actually, for those of you that didn't see the game, let me just  play the game on the website so we know what we're talking about. So this is the game.  You have an HTML5 video. You have a selection of boxes. So these are just divs. And then  you start into a level. You have your game. You CutDrop. You make your score. And that's  it. So how does it work? You all start from this. We kind of like built this in the first  day we were working on this game. And we work on this game, by the way, with the company  that owns the game. It's called ZeptoLab. It's based in Russia. As well as one of our  partners called Pixel Labs, which is based in Seattle. And they've been helping us with  the development and design. So this animation is in a Canvas animation. So we're using the  HTML5 Canvas. Let me show you the code behind, because you might think that there is a lot  of code behind this animation, but actually it's just maybe 10 lines of code, if not less.  So I'll zoom here. First of all, there is nothing in the page. So we have an empty body.  When we load the page, I'm just calling this init function. And the init function creates  a Canvas element dynamically. Then I set a size for the element and I append it to my  DOM. I just add the element to the DOM. I get a local context to do my drawing. And then  I have the most simpler basic stupid loop. So set interval. And every 16 milliseconds,  I just loop into this anonymous function. So this is a drawing loop. And every 16 milliseconds,  I'm redrawing. And this is the beauty of the Canvas. It's a surface where you keep  drawing, drawing, drawing, drawing, drawing. At every iteration, there are two things that  happens. The first, I clear the screen. So I'm saying, hey, clear everything that was  drawn before with Canvas.clearRect. And then draw an image. So where is that image coming  from? That's the trick of the project. This is asprite. So asprite is an image that includes  multiple images. And if we look closely, you basically is the OMOM, like this character.  And you might think, oh, it's the same image. Not really, because it kind of like a change,  right? Like each frame, each image is different from each other. And the idea is that actually  all of these are frames of an animation. And so if you take the big image and you show  only one portion of this image and then you scroll very quickly on one line, for example,  on one strip, you will get the idea that is an animation playing. And that's what's  happening on this page, right? I have a loop and I'm just very quickly redrawing, taking  the image from a different position into this larger image. And so if we look at the function,  the next function, the draw image function, that's basically what it's doing. It's just  mapping the coordinates, x, y coordinates, and then it's just saying, hey, to the canvas,  draw an image and take the image in particular from this source and draw it to this destination.  So, the line of code and we get the image. That was easy. We arrived here in about one  day. The next step, and this has been the most challenging step, is being this, the  rope. Now, do you think this is a fast as low? Let me refresh you one more time. What  do you think about the performance of these ropes? Good? Bad? Good. Right? Well, actually,  when I sent this to Russia, to the team in Russia, the partners sent me an email saying,  hey, George, this is horrible. I was looking. I was like, no, it's not. And then they say,  we need to kill this project now. Let's just stop it and let's do some finesse. And I was  like, no way. It's working. Why should we interrupt this project? And they make a good  point. They say, no, actually, if you look in the profiler, if you look in the JavaScript  profiler, you will see that this animation is taking, is low. It's not a 60 frames per  second animation. The mistake I did was that I was testing my machine. And on my machine,  the performance was good. But when you test on, like, the partner was testing on another  machine, Mac. And the performance, I think they were using Chrome, I don't know, or Safari,  I don't remember. But this is the performance that they got. So on the left, you see the  performance that they were seeing on the screens. And on the right, you can see my performance.  So there was a clear disconnect here, right? And so, harder matter, apparently. And so,  this was a problem because we were about to kill the project at this point. We were about  to say, no, actually, you know what? We just demonstrated that we cannot play cut the rope  in HTML5. And then we tried to understand the problem. And here's the thing. That line,  that rope, you might think it's a line, you might think it's a bezier, but you're wrong.  It's actually made of 20,000 triangles next to each other. So imagine 20,000 triangles  and every 60 milliseconds, you're just animating all those triangles to make it look like a  rope. Why? Because in OpenGL, you don't have anti-alising. And so, the way, in order to  do anti-alising, you need to break down, like, an align a bezier into triangles. On top of  those 20,000 triangles, they also wanted to have nice soft edges. And so, they added  other 10,000 triangles to the edges. And so, basically, every 60 milliseconds, you have  a JavaScript loop that is iterating 30,000 triangles. So now you see why it's slow, right?  That rope was 30,000 triangles. And it is still 30,000 triangles in the browser. Can  you imagine? Like, take a look at this. 90,000 triangles playing on this page. Isn't this  cool? But then, you know, like, we could have just say, okay, this game is going to work  only 99 because it's hardware accelerating and we can run this. We decided to try to  fix it and try to find a better solution to run this. And so, I'll show you some code  here because it's interesting. But the real trick to identify this, like, if you're building  a game or if you're building an application, the learning here is use the profiler, use  the JavaScript profiler in your browser. So, for example, now I'm opening the F2L tools  in IE. I start the profiling session. I refresh the page. And then we let this swing for a  couple of times. Then I stop profiling. And you can see immediately where the issue is  vector. This vector in Calpath-Besier is exactly the code I was referring to, right? There  are, like, four million iterations of vector. And vector is actually like a class. So, we  are creating the vector object four million times. This is just a waste of space, as I  will show you shortly. And so, we knew at that point that we had to optimize vector.  Let me show you the code snippet so it's more clear the type of optimization that we did.  So this is quickly going to get very technical. Optimizing code lesson number one. How do  we optimize this? So we have a game object. And in the prototype, we define a function  called applyimpulse1. And the applyimpulse basically does two operations. The first is  a multiply operation. And the second one is the add operation. I will tell you that there  is a way to optimize the add. Any idea? Look what's going on there. You're basically taking  this dot pause. So you're taking a variable. And you're passing it as an argument to the  vector dot add. Then you're getting back a result. And you're assigning back the result  to the same variable. So there immediately there is an override. Because on the other  side, on the inside the vector dot add, most likely you're creating a new object. You're  making a calculation. And then you're transferring the value to the original object. And creating  that new object, making a new allocation is expensive. And so the way we have to optimize  this, if you look at the applyimpulse2 is that instead of creating two different objects  and then swapping memory the values, we're just creating a prototype for add. And we  are in line the value inside the prototype. So this was the very first optimization. Now  let's go to the next one. How can we optimize the vector multiply? Can we do the same trick  for multiply function? Anyone? No, we can't. Just because it's a multiply. So this time  we need to actually add two different parameters. But the way we can break this down is, you  know, let's just use local variables. I mean, this is a complex algorithm. We are calculating  this a thousand of times every 60 milliseconds. It's not important that your code looks beautiful  with the right prototypes and the right naming function and the get and setters. You need  to be fast. And if you want to be fast, you need to start inlining your code. And eventually  there is a way to be even faster than this, which is just get rid of the prototype as  well. And so we just get rid of the applying Pulse 3 completely. We removed it from the  prototype and now we use the three lines of code that you see below. We just copy and  paste the line of code every time we need to have this particular operation. It was  easy. This optimization, when we look at the profiler that I showed you earlier, allow  us to save from 2.2 million allocations to 30K. In terms of array to calculate all of  those points of the BZR line, we moved from more than 200,000 arrays to 400. And now the  game was running faster. Everything clear so far? This is easy, right? So this was my  worst day in Microsoft, I think, because really, like, it's not good to be so close to cancel  a project, such a cool project, actually. But it was so good to find a solution. And  now finally you can play the game on some slowest browsers. The other thing you can  do, have you ever used XPERF? So XPERF is part of the Windows SDK. This is a very, very  complex tool. It wouldn't deserve its own session. But I want to show you the result.  XPERF basically allow you to take a session in the browser and profile it and profile  what's going on in the memory, in the disk, in the screen, and then visualize it. And  so I basically took in the past a profile section of the game. And I'm just going to  open it now with my visual analyzer. And what you're going to see shortly, this is basically  what's going on in my machine when I play the CatDrop game. To you, probably, this means  nothing. To the IE team, this is gold, because this gives you all the information about what's  going on in the browser. On the X axis, you see the time. So the X axis is the time. The  Y axis, depending on which chart we are looking at, it gives you different type of information  from the CPU that is used. In this case, those dysfunctions is basically when you redraw  on screen, so when you're calling the GPU card to redraw on screen. But the one that  I want you to look at is the one in the middle here with the bars. This is seriously interesting  because it basically break down the CPU time spent across the different engines, sub-engines  of the browser. And so we'll tell you how much of the time was spent inside, for example,  the JavaScript engine, or how much time was spent in the display engine, or really out  in the page, or formatting the page. And so this is helpful to understand where you can  be faster. And now, for example, if I look at this series, this is the time when I'm  cutting the rope, when I'm playing the game. So I just zoom into the selection, and then  I can zoom, keep zooming into one specific selection. You see that there are blocks of  something happening. You remember that I show you a timer, every 16 milliseconds the timer  was clicking. This is basically my timer. So every 16 or 40 milliseconds, I'm just starting  to do a new operation, and so I'm reactivating in terms of the explorer. And the interesting  part, let's zoom into one of these. You can see the first part is just the UI thread,  so this is just the browser. Then it goes into the display, so then it's communicating  to the GPU what to draw on screen. And then there is some JavaScript to calculate all  of the points and to calculate the physics engine permutations. And eventually, there  are always other costs with the layout if you're changing DOM elements in the page.  The interesting part here is that if you take this loop, this is four milliseconds. So each  loop, I'm just taking four milliseconds. Remember that the timer was 16 milliseconds? It means  that I basically have 12 milliseconds left that I'm not using, which means eventually  you can build games that are even more complex than this. So this was easy, right? You still  have 12 milliseconds for each loop where you can do more if you're building more complex  applications. How many of you are lost at this point? Is this too much? Is it too in  depth? Is it okay? Just getting a feedback? Okay, cool. I wanted to show you something  like more internal, more new that probably you haven't seen before. But if you have any  question, just feel free to interrupt me. Nicely. And so at that point, we basically  just keep working on the game. And about four weeks into the project, we just started, we  were starting to get everything together. And about four weeks into the project, this  is what Cut The Rope was looking like. So let me refresh again. It's not perfect, right?  There is some bug and then as I cut the rope, the physics engine is still not there. But  you can see that it's running six different per second. It got the rope, it got the animation,  it gets everything you need. Yes, it's working. It's fucking working. Screw you that you say  it was too slow, right? This was fun. When we got to this point, actually everything  was easy. So we knew that we could have just done it. And so from this point on, it was  just a matter of implementing the game, implementing the logic, implementing all of the various  elements. And if we look at the page, again, it's still a fairly clean page, right? So  we have only one thing going on on this page, a canvas element, which is where we are redrawing  all of those frames. And then I have my logic of my JavaScript logic. Notice also that we  are using Jaquiri. We decided to use Jaquiri for some of the animation that I will show  you shortly. And we're not using a physics engine. So the physics engine is basically  built in into the code. We're not using Box2D or other frameworks. And this actually helps  us also to increase the performance and make sure that the game had the same playability  that added the beginning. And also we didn't want to add overrides in the middle. We did  build like a framework to preload all of the assets. So when you have a game, basically  the first thing you need to do is preload in memory all of the visual assets, all of  the images that you're going to use in the game. And we made that framework available  open source is at, I think, pixellab.com. The next thing is about touch.  As we were working on this game, we were designing this game for as an IE project, as an IE website,  as a website actually, as an HTML5 website. And so we had the challenge of taking a game  that was for a device, for a mobile device where you would use the touch to cut the ropes.  And we had to convert that action into a mouse action. And so we initially start removing  all of the touch gestures, touch inputs, and replacing those with mouse input. But eventually  we realized that today it's not anymore about mobile or browser. I'm not sure if you follow  some of the recent announcements. Last week we released Windows 8. This week, a computer  text like Intel shows 50 different devices. But we talk about, at E3, we talk about Xbox  and IE on Xbox. The reality is that the HTML5, the browser, and our platform is getting to  a variety of devices. And these devices very soon, not 10 years from now, but this year,  like this holiday, we start having touch screens. Like my laptop today is already touch screen  and I will tell you, it's beautiful because it's just easy. And in a few years from now,  all of the machines that you have in your office, in your home, everything will just  be touch screen. And so it's very, very important to think about mouse and keyboard, but also  the touch input. Up to the point where I was a couple of weeks ago, I was in Singapore,  and I was talking with one of my colleagues and he said, Georgia, I hate you. Okay, sorry  about that. Why? This basically, my friend has two kids. And you can see the kids playing  Cat Drop on the machines that they have at home. So you see the first kid, she's playing  Cat Drop using the mousepad on the laptop. The second one is using this Windows 8 tablet.  So it's just using touch on a Windows 8 tablet. But here is the challenge, right? And there  is a television that is projecting the tablet. And then you want to do that. You want to  touch the television. And you want to, like, you know, the expectation at some point will  be that. And this feels like, oh, she's a child. It's normal that she's so dumb, but  she doesn't understand yet the reality between what's real and what's not. I made the same  mistake every day. In the office, I have all touch screens. And at home, I still have an  old monitor still in the upgrade. But then, you know, I spend the time in the office just  touching the screen with my fingers. And then I get home and I touch the screen and I'm  thinking it doesn't work. And then I'm thinking you're an idiot. Like, it's not touch. But  soon, like, all of the screens will be touch screens. And so it's important to get there.  And so bottom line, as we start looking at the touch screens, today there are a number  of APIs. Actually, Apple has been the first to come out with a number of APIs, like touch,  start events, et cetera. And we look at those APIs. We thought that they were good, but not  enough. And we come up with a different proposal. We call them pointer. This is pointer API.  I still prefixed it with MSMS. We're still looking for feedbacks and making this more  solid. But the idea is that we have one event called pointer that can trigger all of the  different input, like input. Either it's a touch or it's a pen or it's a keyboard. If  it's a mouse, not the keyboard, sorry, the mouse, it's just one event called pointer.  And so you get pointer down, up, up, over, cancel, et cetera. You get all of the properties  that you will get before with the mouse. And in addition to that, you get new properties.  Like, if you're doing a gesture, like some information about the gesture, the pressure,  the movements, the diff of the points. But the beauty of this approach is that in our  application, we have only one event. For example, canvas.listen for mouse, sorry, pointer down.  And then if I'm on a tablet, that code is going, Windows is going to connect to my  touch driver and it's going to transform the touch input into a JavaScript event. If I'm  on my laptop or my desktop, I can just use the mouse and it will just work. And this  is what we use in cat.rob. And it works great. And so eight weeks into the project, sorry,  12 weeks into the project, we were done. So let me show you the final project. And this  is my beautiful application. So this is the same website that you saw before, right? It's  just running locally. I will tell you that at this point, we started the QA with Zepto  lab in Russia. We sent them the game. These guys are the same guys that at the beginning  that told us it's too slow, we should kill the project. Next day, I got another email  in my inbox. George, it's too fast. Can you slow it down? You laugh. I was like, yes,  it's too fast. And you know what we did? Well, initially we kind of like negotiated. Why  should we, like why should we need to slow it down? But then eventually we realized that  it was important to keep a consistent experience. And that means that in that code, when you  play the game online, inside all of the JavaScript loops, et cetera, we basically add other JavaScript  code to slow down the animations. Believe it or not, like we really added code to slow  down the performance. And there was a good test for the browser. Hardware acceleration  matters. And having a good browser and a good platform, not just the browser, a good user  agent in general that is able to render fast graphics, fast JavaScript is important and  matters. And we did test this website, not just on IE, but we also wanted to test on  a variety of devices. So we tested it on Chrome. It will work on Chrome, on Firefox, on Safari.  We tested it on the iPad, on some Android, not all of them. We tested it on the Windows  8 devices. And the result was quite impressive. Like we built the website using IE, but at  the end of the day, it just worked on most of the other browsers. There were very few  things that we had to tune between one browser and the other. And in terms of the only difference  was the performance. So the code works across all of these browsers. The performance was  different. And we had to do some optimization on the slowest browser to optimize the performance.  A couple of things I want to share. So if you're building a game, most likely you will  need to use the Canvas object. And in particular, there are a number of new functionality and  new APIs that have just been included recently in some of the browsers. Like some of these  are just coming in with IE 10 and are not even implemented in other browsers, but they're  all standard compliance, so you should expect them to see soon. A request animation frame,  instead of having, the idea is that instead of having like a timer and then saying every  60 milliseconds send some code to the GPU and let the GPU draw on screen, you change  this and you do the opposite. And so you say, A GPU, when you have time to draw, can you  call me and then I'm going to give you the code back? And that's a nice way to optimize  basically your workload with the GPU and to run even faster.  And the thing immediate, it's something that developers ask for years, but browsers never  gave it to developers. Have you ever done set timeout zero? Have you ever done it? And  you know that it's silly, like there is no way any browser is going to return in zero  milliseconds, just because the browser is basically using the CPU or the GPU clock. And  so each browser will interpret the set timeout zero in a different way. So in Chrome you'll  get between three and five milliseconds. In Firefox between 10 and 12, I believe, Opera  is between 10 and 50. IE is around 16 or four if you're using high performance. Set immediate  is basically a way to break down your code and say as soon as you can, it's almost zero,  right? As soon as you can, call me back. And so this is very helpful if you have a long  operation and sometimes you need to break down to make sure that the UI doesn't get stuck.  You can just interrupt your loop or your thread with set immediate. In performance.now, this  is very, very recent. Like we added this maybe a few weeks back. And the idea behind performance  now is that today you have date time.now, right? Or date time, get time. That gives you  more or less now it's, yeah, what time is it? 11, 55, 20 seconds and 50 milliseconds,  but I'm not really sure. When you start drawing things, when you need to get precision, you  need to have the CPU exit perfect time. And that's what performance now does. Performance  now, they're basically high resolution timers inside the machine and it will give you very,  very granular and precise information about what time it is. And again, this is coming  from the web performance working group. So this is something we've been leading there  for a while. For simpler interactions, for example, you know at the beginning that there  is that sliding of the box and you just choose the box? That was not a canvas. We decided  to use Jackery and CSS to do the animation because it was easy. We didn't want to complicate  our life. And so eventually we end up having a page that has some canvas, some DOM element,  Jackery to do the animation between the boxes or CSS to do like the closing animation.  Some tip about audio as well. The good news, HTML5 audio is awesome. You have an audio  tag, you can play audio and it just works. And that's what we use for this game. And  I see some of you are thinking, what's the bad news? The bad news is that some browser  cannot handle HTML5 audio yet properly. And there are non-bugs open at Firefox and Chrome  and we actually work with these guys for a couple of years now. I'm waiting for them  to fix it. But eventually at the end we had to, and this was a painful decision, but we  had to fall back to Flash. So if you're using Chrome or Firefox, we are actually using Flash  for the audio. It's the same trick that Google used for Angry Birds. And this is just, again,  a fallback solution. This is not what we wanted, but eventually right now, like you're  not able to loop very quickly audio loops in these browsers. On IE, it's still HTML5  audio. All right. Oh, did you notice this? That sound? No sound. Sound? No sound. So  this is either called magic or it's actually, no, it's not magic. It's another standard  coming from, I think it's the Web Performance Working Group. It's called page visibility.  And it's the idea that if your tab is not like on the foreground, we basically give  an event to the site or to the application and we can suspend the drawing loop or we  can suspend the audio in such a way that we don't consume battery or resources behind  the scenes. There are a lot of nice HTML5 things behind the site. All right. So at this  point we moved from an iOS application to a browser application. It was working on  most browsers. We were very happy. And by the time, by the way, we were two weeks away  from the consumer preview, from launching the consumer preview of Windows 8. And so  at that point, in Windows 8, we talk about the platform and I have a session after this  where we will talk about Windows 8 meta applications. But one of the characteristics of the Windows  8 platform is that you can use HTML and JavaScript to create applications, meta applications.  And so we thought, what does it take to take a game like this and turn it into a meta application?  And so let me do step by step what I did that day. So I opened the new Visual Studio tools.  Those are free. They just come with Windows 8. I create a new project. And so notice that  I have a project template for JavaScript Metro app. And I just choose the blank app template.  So Visual Studio is creating a template for me. And so I'm going to move this on the right.  This is my website. So this is my previous website. What I'm going to do, I'm just going  to go to the Windows Explorer folder. I'm going to select all of the files, right click,  and I say copy. So I'm just copying all of the files that I use for the website. Now  I move into my Metro project, go to the solution folder, and I say paste. And I decide to override  everything as soon as you let me override. There it is. So I'm just copying all of the  files inside my Metro template. Then there is a file here called package app manifest.  This is an XML file which basically defines some of the property of the application. The  only thing I need to change is basically I want to start from index.html. So I save.  Ready? I click local machine debug. What do you think? Is it good? And this is functioning,  right? So now I'm using my finger. It's touch friendly. And it's a Metro application. So  with zero line of code, we move something that was a website built in HTML5, CSS, and JavaScript  into an application. So this is an application that is running as a Metro application. Now  what I've just done is I've just created a new application called a Metro application.  I've just created a Metro application called a Metro application. So I've just created  a Metro application called a Metro application. So this is an application that is running  as a Metro application. Now what I've just done is horrible. Don't do it. Never. Promise.  Do you promise? Please, don't do it. Because I'm not here to ask you to take website and  port them to do a copy and paste and now you have the application, yeah, I have an application.  This is not an application. This is just a technical proof that the platform is the same.  You can build Metro application using the JavaScript HTML and CSS that you already know that said  this is not an application. You see that it just doesn't feel like an application. It's  not full screen. It doesn't have any capability that make it an application. And so I'm going  to kill this project and I'm going to show you actually what the real application that  you find in the Windows A store looks like. So you find here the tile, right? So I'm just  going to launch the tile. This is my application, Metro application, the real one. So you see  that it's full screen. So basically we did some work to change the assets and to make  sure that we fit the screen resolution. By the way, Windows 8 runs on a variety of different  resolution from 1024 up to 2560. And so we basically have three different set of assets  and then depending on which resolution you're coming from, we rescale using CSS 3, the whole  viewport to a different resolution. Then you can play the game and you have the same functionalities.  The options, for example, if I click options, I'm using the setting charm bar of Windows  8. So I can also open this by swiping on the right. I got settings and now I have specific  settings for my game. But it already feels like settings of a Windows app, right? I'm  already using Windows. When I play a game, and so now I'm going to play without looking.  I'm very good and I'm very happy about my 3,544, a lot of score. And I want to share this  with my friends. And so what I do is, again, I swipe from the right, I pull the share contract  and I have a number of applications that I can use to share. This is Windows 8, right?  And so basically I'm creating a connection between an application that gives some content  to share and other applications like my mail client that takes that application. And I  can just say to my manager, hey, Drew, I'm playing, not working. And I can just share  this over email. Or I could use one of the other applications and just share it on Twitter  and very quickly tweet it from here. I can do other things like, you know, Windows 8,  you can snap side by side application. So you can have, let's see, for example, you  can have, let's open my mail client and then I take a drop. And so for example, if you're  in the office, no, no, I'm working, I'm working. And then when your manager leaves the office,  you can continue playing your experience. And then as soon as something happens, oh,  no, I'm back on my emails. And this is again something that you can do using, as part of  Windows 8. So other things that we can do is just play with the ties. And so you see,  for example, the ties of the application on my side, those are called live ties, because  basically depending on the context of the application or what's get pushed by the server, we show  a real time notification and updates to the user. And so eventually think about displaying  a new achievement or new levels or other players waiting for you in the queue. And so these  are just some of the things that you can do with Windows 8. And you can see that now it  starts feeling as an application. It's not a website anymore. So let me show you the code  behind the application. So I already have a project here. And all the code is the same.  The difference is that I just wrote a few additional lines, which are all here, to implement  some of the specific functionalities of Windows 8. Let me increase the font here. 16, so you  can see it. So for example, at the beginning, I'm connecting to the own settings. And basically  when the users wipe on the user like the settings panel, this is just like an HTML page inside  my project where I define all of the settings property. And I just say, hey, when the user  used the charm bar in the setting, go and display my page. Another thing that I did  is, oh, this is very nice. One of the features that has been more requested during the consumer  preview is just the ability to roam the settings of the game. So you start playing in the office.  You have a very busy day in the office and you get to the 20 level and you unlock a lot  of achievements. And then you go home and you have a different machine and you need to restart.  You expect to catch up from the same place. And so what we have in Windows 8 is the ability  to roam setting. Each application has its own space. It's like a folder in the Discord.  You can imagine it as a virtual space in the cloud where you can just store information.  And so all of that logic is within those 10 lines of code. Basically, every time you unlock  a new level, you're just saying to the cloud, hey, save this new information to the profile  of my user for this application. And then the other machines will just reconnect and  sync automatically. And the roaming is given to you by the Windows runtime. And we will  talk about the Windows runtime later again. You remember that I snapped the application  side by side with the mail client. That code is just using a media query. So we're using  CSS3 media query. In particular, we have a specific media query defined as view state,  synapt. And basically, we have a listener, which this is a very new standard from the  CSS3 working group that allow you to listen for the specific state. And when you're in  that state, we basically pause or re-enable the logic of the game. Tiles. We actually  also have tile notifications. So as you start unlocking new levels, we can update the tile  of the application. And the way we do this is just, again, using the notification namespace  in the Windows runtime. We start from a standard template. We change the image. We create the  image on the fly using the number of stars of your last level. And then we create a tile  for your application and we update it. And then the last one is the share contract. And  now we show you the share contract here. So this is the basic function for the share contract.  You start from Windows and then you get a data transfer manager. Oh, here it is. Sorry.  Data transfer manager. And you add an event listener for data requested. The share contract  in Windows 8 is a contract. It's like an interface. It's very simple. Normally in the past, for  example, if you have a website and you want to share information to Facebook and Twitter,  you need to code. You need to write the code for two buttons, Facebook and Twitter, and  embed them inside your application, inside your website. With Windows 8, we decided to  make this experience more linear and more flexible and more powerful. The application says, in  this case, cut the rope, it's not sharing. The application is saying, I have something  that I can share. Right? So for example, if you just unlock a new level, it will say,  I have a new achievement. And this is my text, image or link. And you ask to the operating  system, here's my content. Can you please ask Windows to share it with some other application?  The operating system is basically going into the, when you do this, it's basically looking  all of the application installed on my machine. And you look for all of the applications that  are able to reshare content. In this case, I have like a Twitter, I have a People app  and a Mail app. And the operating system is responsible for creating that connection between  your data and the contract or this application. So it's like an interface. And this is very  powerful because then you don't need to implement one contract for every channel you want to  distribute. You have one unique data and you can have as many applications installed as  you need. All right. So this was basically the application.  Let me show you one more thing. This is actually quite exciting. Everything I show you so far  is called Visual Studio. Have you used Visual Studio before? Good. Now, let me show you  another tool that we call Blend. And if you use Civalite or XAML or you did development  for Windows Phone before, you're probably already familiar with Blend. The news with  Windows 8 is that now Blend allows you to also to work with HTML project. But it's not  just the type of tool that you would expect. And let me show you why. Let's open my page.  Default. It's slow. It's taking some time. Here is my page. Do you notice anything?  Anyone? It's animated. It's moving. It's alive. You see the shadow in the background? That  shadow is not CSS or HTML. It's JavaScript. So we're actually looking at a page that is  running JavaScript in the background. And that's the power of Blend. Blend allows you  to edit an application in real time. Not just looking at the static DOM, but also at what  gets created in real time from JavaScript. Up to the point where eventually you can even  navigate into the application. For example, I can start playing. I can start getting the  video. I select my level. I go into the level. And then I'm thinking, no, there is something  wrong in this page. And you can just pause it and you create a snapshot. But the way  this is a canvas. So everything you see on screen now is created by JavaScript. And with  the tool, you can still operate on top of the canvas. And you can just edit. In real  time, a page is created by JavaScript, not by static DOM. Isn't that impressive? This  is freaking cool. This is the definition I use internally. And actually, when you look  at the DOM Explorer here, let's go back, for example. Let me reset it to the beginning.  Actually I'll show you in the next session. But the Explorer, the solution, the live DOM  is called live DOM exactly because it shows you both static DOM elements as well as, like  when you see the flash symbol, that means that it's coming from JavaScript. And so the  ability of this tool is to combine static editing of a page with HTML, CSS, like you've  done in the past, with real time editing of content is creating real time or data binding  in real time and anything coming from JavaScript. I think this is the best tool I ever used.  And I'm biased. I work in Microsoft as you probably know by this point. But still, this  is pretty impressive. And other things you can do with this tool, eventually you can  test a different resolution. So you can test, for example, how it will look like on some  device, for example, running a 2560 resolution. Or you can see what it looks like when you  run it in a snap view, right? Remember when I snapped it on the screen. What it looks  like in portrait. And I'm not scared because we didn't test this. So, like you see, it's  not really optimized for portrait right now. But you can test all of this very easily.  And of course, like you have a full live editing of all of the CSS property and you can set  animations, we'll get deeper on this tool in the next session. And the next thing, obviously,  is the store, right? At this point, we have an application, which means that we have a  great platform, Windows 8, to add a lot of nice features. But we also have a distribution  channel to eventually monetize the application. And that is called store. And the Windows  Store is the same store across all of the Windows 8 devices. So no matter if you are  on a laptop or on desktop, on a tablet, on an Intel or an ARM device, you actually have  access to the same store. And so if you go to games, you will see there my page for Cat  Drop. You see the nice preview. Good news is that because we are still in a release  preview, all of the applications today are free. So go and download it now that they're  free because eventually, as we get closer to GA, obviously, developers will be able to  monetize their applications. And now I want to show you that exactly the same code, like  once I release the application to the store, I didn't change anything, right? So that code  base is one code base. It works on the machine. And it works also on a machine like this,  right? So no change at all. And now I'm able to play the same game on a touch device. And  you can see that the performance is still good, right? We're still running at 60 frames  per second. And I can still choose all of my... I can just play the full game here. And eventually,  if this device was connected and I play some level here and then I stop playing and restart  from here, you remember the roaming? I'm just going to roam in real time through the cloud,  my setting and my achievements. And that's why I say that I have the best job in the  company because it's fun to work with this stuff. Like, Windows 8 is such a powerful  platform that I really invite you to take a look. And it's definitely a good time to  spend on Windows 8 now. So today, I share some of the story working on Catderope. This  is just one of the many projects we work in internally in Microsoft. And I know that there  are people in this room actually that have been working on other Windows 8 applications  or are thinking to work on applications. I hope this was inspiring. I hope we gave you  the idea that everything is possible and HTML5 is ready, not just for websites, but also  for applications. We have tools, we have a platform, we have a store. And this is, again,  we just released this preview last week. This week, we are talking about the hardware. So  if you haven't seen it yet, just search for Computex and you will see 50 new devices,  Windows 8 devices that will ship soon. Because of 2GA, we will talk also about other devices.  And I'm really looking forward to see some of the applications that eventually people  in this room are going to build in the next weeks or months. And if you have anything  interesting, please let us know. We are always excited to see projects from you. The last  one is not. My team in Redmond is hiring a Windows 8 HTML5 evangelist. So if you're interested,  just contact me after this session. Thank you again. Thank you.  So I see five minutes left as a reminder. Green card in the box, the other color, so  I just leave them in the table. And is there any question that I can answer now? Yes, please.  I saw on your slides you had for the event point, you had mouse, finger and pen. Is there  any concept for multiple fingers? Of course, yes. So the short answer is yes. I'll show  you later eventually, one demo. We absolutely support multi-touch and we don't have a limit  to the number of fingers that you can put on the screen. And actually, I'll show you  on this device. Let me see. Or I can even do it here. I just see. If I go to the IE  test drive, there is a nice demo that shows like the touch APIs. It's here at the bottom.  There it is. Touch effects. So two fingers, one on the right, one on the left. And you  can see, so this is just JavaScript and using the MS pointers. And you can see like the  shadow of my fingers on the screen, right? So this happens to be, this my laptop supports  only two touch points. This Nike device supports 10, so I could put 10 fingers and you will  see 10 different fingers there. The code is just the same and we allow that, which was  somehow a limitation in other platforms. And also in terms of gestures, like I didn't talk  about it, but we support also gestures. And so eventually you can use the Windows gestures  or you can eventually create your own gestures just using JavaScript events. Any other question?  Yes? How about the non-Java script HTML way of doing things? So the question is, can I  do Metra apps in C sharp? Will the support continue? I'll talk about this in the next  session, but the answer is, of course. It's the platform, I have a slide and in the next  session I'm going to talk about the Windows 8 platform. The beauty of Windows 8 is that  we kind of remade in the world system and we have a runtime called Windows runtime, which  is the base. On top of this, we have different projections. One is HTML and JavaScript, one  is C sharp, BbNet and Samu. And one is C++. And today when you look at the store and you  look at the application, some of them are HTML5 games. This is a C++ game. This is a  C++ game for the ninja. You might have seen it before. Yes? Oh, you're thinking Windows  9 and Windows 10. We're thinking about Windows 8 now. We didn't ship yet. We will talk about  Windows, the next version of Windows after we ship Windows 8. All right. Thank you again.
Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_0_3119.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_3120_3443.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_3444_4691.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_4692_6443.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_6444_12155.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_12156_12203.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_12204_13079.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_13080_13247.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_13248_13331.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_13332_13475.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_13476_15563.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_15564_15779.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_15780_15839.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_15840_16823.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_16824_17183.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_17184_17567.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_17568_22307.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_22308_22355.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_22356_23867.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_23868_24023.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_24024_24383.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_24384_24527.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_24528_24947.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_24948_25355.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_25356_25991.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_25992_29423.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_29424_29615.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_29616_30203.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_30204_30719.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_30720_32723.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_32724_33599.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_33600_34523.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_34524_35555.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_35556_44339.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_44340_52799.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_52800_52871.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_52872_52919.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_52920_52979.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_52980_53027.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_53028_53099.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_53100_54311.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_54312_54371.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_54372_54455.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_54456_56507.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_56508_59939.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_59940_60959.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_60960_61151.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_61152_62015.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_62016_63935.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_63936_64151.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_64152_64283.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_64284_64595.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_64596_64739.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_64740_64943.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_64944_66011.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_66012_66203.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_66204_66431.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_66432_66599.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_66600_69611.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_69612_70451.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_70452_72311.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_72312_72923.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_72924_74495.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_74496_77219.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_77220_77435.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_77436_79907.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_79908_80771.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_80772_81983.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_81984_82091.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_82092_84671.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_84672_85223.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_85224_85295.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_85296_85475.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_85476_85655.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_85656_85739.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_85740_85811.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_85812_87995.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_87996_88091.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_88092_88163.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_88164_88355.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_88356_88427.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_88428_89183.png Giorgio_Sardo_-_Cut_The_Rope__from_iOS_to_HTML5_to_Windows_8_89184_89222.png
This is the moment where I'm going to sing. Azzurro El pomeriggio. No, I'm not a good singer, so I'm just going to do what I'm good at. Before I start, actually, quick logistic, out of the door you will see three cards, green, red, yellow. This is like the performance of my session. You don't need those two, so you just use the green and you just put the green one in the basket and you're done, right? My name is Giorgio Sardo. I work in Microsoft in Redmond, and I'm the director of the Windows Evangelist team. I think I have one of the best jobs in the company in Microsoft because I get to play with very, very smart people, either in the product team, like the Internet Explorer team, the Windows team, the JavaScript team, the Visual Studio team, but also with partners around the world. So I travel a lot around the world, I meet a lot of partners, and we often get to work on projects together. And one of these projects I've been involved on with my team has been Cat the Role in the last year. And so today I want to share some of the insights and some of the behind the scenes of that game. It's a fun session. I will tell you some stories. Something is kind of obvious. Something is more secret, so we just keep it for this room, all right? And then if you have any questions towards the end, I'm happy to take your questions. Before we start actually talking with Cat the Role, let me give you just a little bit of context, right? HTML5 games have been popular for a couple of years now. Do you remember this? Have you seen this before? It's called Pacman. And you might have seen it before, right? You might think, this is one of the very first HTML5 games that my team has been working on. And it's kind of lame, but this is what I love more, right? You have a maze, and I can go up, and then I can go right, and then I can go up, and I can go right, and I can keep going and going and going. And if I go home, actually, when we first released it, there was just one maze. Oh, now there are 1 billion dots eaten, and 91,000 maze is created by end users, right? So this is a big board, and you can just keep panning to a place where there is something, some spot available here, and you can create your own maze. And all of this is just HTML5. So this is a project we've been working with Nanko for the launch of Internet Explorer 9 one year and an alpha go. And this was a good, good fun. And since then, we've seen other games. For example, Google had been working on Angry Birds. I assume you know the game, and you can just play Angry Birds in the browser. It's an HTML5 game, well, mostly, and it's nice. It supports up cache, it supports other nice... Mozilla more recently released the browser quest. I love this game because it uses web sockets, and so allow you to connect to multiple people in real time, and it's quite a small view. You can actually interact with other people, and you're using web sockets, so behind the scenes, you're communicating real time with other people in the world. And then more recently, just for fun, we created another small game in Microsoft. This is what we do, and we don't know what to do. It's called Bored to Death. It's very complex, so let me show you how we work this. Just like the number of players. What is it? I super need to kick someone! Oh my god, me too! Let's totally do it! And this is the game. So you might wonder what is a mach-melo doing in here? Well, it is cool. You can eventually give them fire as well. Alright, you get the idea. So what is all of these games having in common? Don't be shy. HTML5, easy as that. They're all HTML5 games. We're just using JavaScript, HTML5, CSS, and other beautiful standards, but there is no plugin, there is no other things other than HTML5. And this is just to show you that we actually came a long way. And when we look at HTML5, you know, like three years ago, when we released IE9, HTML5 was just starting to grow and to be adopted and to become standard. Now, when we look at the standards implemented in IE10 or other browsers, this is getting bigger and bigger, right? HTML5 is not anymore one or two specs. We're talking about hundreds of these different specifications that cover graphic, cover API, cover offline, databases, sockets. You can do pretty much anything that an application needs in HTML5. And so today we're not going to talk about all of these, but some of them. And now that we kind of like started with very quick overview of what HTML5 is, do they want to share the experience building Catderob? How many of you played Catderob, the Catderob game before? OK, many of you. How many of you don't know what Catderob is? OK, wow. So Catderob is one of the most popular games on iPad and iOS. Originally it was for iPhone. Actually, I think it was one of the most popular games on iOS. And it was an application written in Objective-C, so in a native application for iOS. And I'll be honest, the Internet Explorer team spent about two-three years saying Internet Explorer is fast, it's hardware accelerated, and we support all of these standards, and it was beautiful, and blah, and blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, computer, GPU, blah, blah, blah. And so we thought, let's take a challenge for the Internet Explorer team. an application like CutDrop, which is a native application for iOS, let's try to convert it to HTML5. Let's see how it goes, right? And so we started from the code, the Objective-C code. And one of the criteria, we set two criteria for this project. The first is that we didn't want to lose fidelity. So we want to have exactly the same quality of the native game as an HTML5 game. So we didn't simplify, we didn't change the code. We wanted to have the same fidelity. And that means that eventually we decided to convert line by line, all of the Objective-C code into JavaScript. This is arguably a wrong thing to do, but we had 40,000 lines of Objective-C and we just converted to 40,000 lines of JavaScript. And that ensured us that we had exactly the same user experience. The other criteria was, let's use only HTML5, right? We didn't want to use plugins. And so we started the project and we start looking at the code. I cannot show you the code, obviously, today, but I will tell you that in the iOS source folder, there is all of the code for the CutDrop game. And 14,000 lines of code, you can imagine Objective-C was the component for obviously the code and then they were using OpenGL for all of the graphic. When we look at the JavaScript implementation, we were using JavaScript mainly for the code and the Canvas to show the graphic. And now we start with the Canvas. I will show you a very quick example of how an animation of CutDrop looked like. Actually, for those of you that didn't see the game, let me just play the game on the website so we know what we're talking about. So this is the game. You have an HTML5 video. You have a selection of boxes. So these are just divs. And then you start into a level. You have your game. You CutDrop. You make your score. And that's it. So how does it work? You all start from this. We kind of like built this in the first day we were working on this game. And we work on this game, by the way, with the company that owns the game. It's called ZeptoLab. It's based in Russia. As well as one of our partners called Pixel Labs, which is based in Seattle. And they've been helping us with the development and design. So this animation is in a Canvas animation. So we're using the HTML5 Canvas. Let me show you the code behind, because you might think that there is a lot of code behind this animation, but actually it's just maybe 10 lines of code, if not less. So I'll zoom here. First of all, there is nothing in the page. So we have an empty body. When we load the page, I'm just calling this init function. And the init function creates a Canvas element dynamically. Then I set a size for the element and I append it to my DOM. I just add the element to the DOM. I get a local context to do my drawing. And then I have the most simpler basic stupid loop. So set interval. And every 16 milliseconds, I just loop into this anonymous function. So this is a drawing loop. And every 16 milliseconds, I'm redrawing. And this is the beauty of the Canvas. It's a surface where you keep drawing, drawing, drawing, drawing, drawing. At every iteration, there are two things that happens. The first, I clear the screen. So I'm saying, hey, clear everything that was drawn before with Canvas.clearRect. And then draw an image. So where is that image coming from? That's the trick of the project. This is asprite. So asprite is an image that includes multiple images. And if we look closely, you basically is the OMOM, like this character. And you might think, oh, it's the same image. Not really, because it kind of like a change, right? Like each frame, each image is different from each other. And the idea is that actually all of these are frames of an animation. And so if you take the big image and you show only one portion of this image and then you scroll very quickly on one line, for example, on one strip, you will get the idea that is an animation playing. And that's what's happening on this page, right? I have a loop and I'm just very quickly redrawing, taking the image from a different position into this larger image. And so if we look at the function, the next function, the draw image function, that's basically what it's doing. It's just mapping the coordinates, x, y coordinates, and then it's just saying, hey, to the canvas, draw an image and take the image in particular from this source and draw it to this destination. So, the line of code and we get the image. That was easy. We arrived here in about one day. The next step, and this has been the most challenging step, is being this, the rope. Now, do you think this is a fast as low? Let me refresh you one more time. What do you think about the performance of these ropes? Good? Bad? Good. Right? Well, actually, when I sent this to Russia, to the team in Russia, the partners sent me an email saying, hey, George, this is horrible. I was looking. I was like, no, it's not. And then they say, we need to kill this project now. Let's just stop it and let's do some finesse. And I was like, no way. It's working. Why should we interrupt this project? And they make a good point. They say, no, actually, if you look in the profiler, if you look in the JavaScript profiler, you will see that this animation is taking, is low. It's not a 60 frames per second animation. The mistake I did was that I was testing my machine. And on my machine, the performance was good. But when you test on, like, the partner was testing on another machine, Mac. And the performance, I think they were using Chrome, I don't know, or Safari, I don't remember. But this is the performance that they got. So on the left, you see the performance that they were seeing on the screens. And on the right, you can see my performance. So there was a clear disconnect here, right? And so, harder matter, apparently. And so, this was a problem because we were about to kill the project at this point. We were about to say, no, actually, you know what? We just demonstrated that we cannot play cut the rope in HTML5. And then we tried to understand the problem. And here's the thing. That line, that rope, you might think it's a line, you might think it's a bezier, but you're wrong. It's actually made of 20,000 triangles next to each other. So imagine 20,000 triangles and every 60 milliseconds, you're just animating all those triangles to make it look like a rope. Why? Because in OpenGL, you don't have anti-alising. And so, the way, in order to do anti-alising, you need to break down, like, an align a bezier into triangles. On top of those 20,000 triangles, they also wanted to have nice soft edges. And so, they added other 10,000 triangles to the edges. And so, basically, every 60 milliseconds, you have a JavaScript loop that is iterating 30,000 triangles. So now you see why it's slow, right? That rope was 30,000 triangles. And it is still 30,000 triangles in the browser. Can you imagine? Like, take a look at this. 90,000 triangles playing on this page. Isn't this cool? But then, you know, like, we could have just say, okay, this game is going to work only 99 because it's hardware accelerating and we can run this. We decided to try to fix it and try to find a better solution to run this. And so, I'll show you some code here because it's interesting. But the real trick to identify this, like, if you're building a game or if you're building an application, the learning here is use the profiler, use the JavaScript profiler in your browser. So, for example, now I'm opening the F2L tools in IE. I start the profiling session. I refresh the page. And then we let this swing for a couple of times. Then I stop profiling. And you can see immediately where the issue is vector. This vector in Calpath-Besier is exactly the code I was referring to, right? There are, like, four million iterations of vector. And vector is actually like a class. So, we are creating the vector object four million times. This is just a waste of space, as I will show you shortly. And so, we knew at that point that we had to optimize vector. Let me show you the code snippet so it's more clear the type of optimization that we did. So this is quickly going to get very technical. Optimizing code lesson number one. How do we optimize this? So we have a game object. And in the prototype, we define a function called applyimpulse1. And the applyimpulse basically does two operations. The first is a multiply operation. And the second one is the add operation. I will tell you that there is a way to optimize the add. Any idea? Look what's going on there. You're basically taking this dot pause. So you're taking a variable. And you're passing it as an argument to the vector dot add. Then you're getting back a result. And you're assigning back the result to the same variable. So there immediately there is an override. Because on the other side, on the inside the vector dot add, most likely you're creating a new object. You're making a calculation. And then you're transferring the value to the original object. And creating that new object, making a new allocation is expensive. And so the way we have to optimize this, if you look at the applyimpulse2 is that instead of creating two different objects and then swapping memory the values, we're just creating a prototype for add. And we are in line the value inside the prototype. So this was the very first optimization. Now let's go to the next one. How can we optimize the vector multiply? Can we do the same trick for multiply function? Anyone? No, we can't. Just because it's a multiply. So this time we need to actually add two different parameters. But the way we can break this down is, you know, let's just use local variables. I mean, this is a complex algorithm. We are calculating this a thousand of times every 60 milliseconds. It's not important that your code looks beautiful with the right prototypes and the right naming function and the get and setters. You need to be fast. And if you want to be fast, you need to start inlining your code. And eventually there is a way to be even faster than this, which is just get rid of the prototype as well. And so we just get rid of the applying Pulse 3 completely. We removed it from the prototype and now we use the three lines of code that you see below. We just copy and paste the line of code every time we need to have this particular operation. It was easy. This optimization, when we look at the profiler that I showed you earlier, allow us to save from 2.2 million allocations to 30K. In terms of array to calculate all of those points of the BZR line, we moved from more than 200,000 arrays to 400. And now the game was running faster. Everything clear so far? This is easy, right? So this was my worst day in Microsoft, I think, because really, like, it's not good to be so close to cancel a project, such a cool project, actually. But it was so good to find a solution. And now finally you can play the game on some slowest browsers. The other thing you can do, have you ever used XPERF? So XPERF is part of the Windows SDK. This is a very, very complex tool. It wouldn't deserve its own session. But I want to show you the result. XPERF basically allow you to take a session in the browser and profile it and profile what's going on in the memory, in the disk, in the screen, and then visualize it. And so I basically took in the past a profile section of the game. And I'm just going to open it now with my visual analyzer. And what you're going to see shortly, this is basically what's going on in my machine when I play the CatDrop game. To you, probably, this means nothing. To the IE team, this is gold, because this gives you all the information about what's going on in the browser. On the X axis, you see the time. So the X axis is the time. The Y axis, depending on which chart we are looking at, it gives you different type of information from the CPU that is used. In this case, those dysfunctions is basically when you redraw on screen, so when you're calling the GPU card to redraw on screen. But the one that I want you to look at is the one in the middle here with the bars. This is seriously interesting because it basically break down the CPU time spent across the different engines, sub-engines of the browser. And so we'll tell you how much of the time was spent inside, for example, the JavaScript engine, or how much time was spent in the display engine, or really out in the page, or formatting the page. And so this is helpful to understand where you can be faster. And now, for example, if I look at this series, this is the time when I'm cutting the rope, when I'm playing the game. So I just zoom into the selection, and then I can zoom, keep zooming into one specific selection. You see that there are blocks of something happening. You remember that I show you a timer, every 16 milliseconds the timer was clicking. This is basically my timer. So every 16 or 40 milliseconds, I'm just starting to do a new operation, and so I'm reactivating in terms of the explorer. And the interesting part, let's zoom into one of these. You can see the first part is just the UI thread, so this is just the browser. Then it goes into the display, so then it's communicating to the GPU what to draw on screen. And then there is some JavaScript to calculate all of the points and to calculate the physics engine permutations. And eventually, there are always other costs with the layout if you're changing DOM elements in the page. The interesting part here is that if you take this loop, this is four milliseconds. So each loop, I'm just taking four milliseconds. Remember that the timer was 16 milliseconds? It means that I basically have 12 milliseconds left that I'm not using, which means eventually you can build games that are even more complex than this. So this was easy, right? You still have 12 milliseconds for each loop where you can do more if you're building more complex applications. How many of you are lost at this point? Is this too much? Is it too in depth? Is it okay? Just getting a feedback? Okay, cool. I wanted to show you something like more internal, more new that probably you haven't seen before. But if you have any question, just feel free to interrupt me. Nicely. And so at that point, we basically just keep working on the game. And about four weeks into the project, we just started, we were starting to get everything together. And about four weeks into the project, this is what Cut The Rope was looking like. So let me refresh again. It's not perfect, right? There is some bug and then as I cut the rope, the physics engine is still not there. But you can see that it's running six different per second. It got the rope, it got the animation, it gets everything you need. Yes, it's working. It's fucking working. Screw you that you say it was too slow, right? This was fun. When we got to this point, actually everything was easy. So we knew that we could have just done it. And so from this point on, it was just a matter of implementing the game, implementing the logic, implementing all of the various elements. And if we look at the page, again, it's still a fairly clean page, right? So we have only one thing going on on this page, a canvas element, which is where we are redrawing all of those frames. And then I have my logic of my JavaScript logic. Notice also that we are using Jaquiri. We decided to use Jaquiri for some of the animation that I will show you shortly. And we're not using a physics engine. So the physics engine is basically built in into the code. We're not using Box2D or other frameworks. And this actually helps us also to increase the performance and make sure that the game had the same playability that added the beginning. And also we didn't want to add overrides in the middle. We did build like a framework to preload all of the assets. So when you have a game, basically the first thing you need to do is preload in memory all of the visual assets, all of the images that you're going to use in the game. And we made that framework available open source is at, I think, pixellab.com. The next thing is about touch. As we were working on this game, we were designing this game for as an IE project, as an IE website, as a website actually, as an HTML5 website. And so we had the challenge of taking a game that was for a device, for a mobile device where you would use the touch to cut the ropes. And we had to convert that action into a mouse action. And so we initially start removing all of the touch gestures, touch inputs, and replacing those with mouse input. But eventually we realized that today it's not anymore about mobile or browser. I'm not sure if you follow some of the recent announcements. Last week we released Windows 8. This week, a computer text like Intel shows 50 different devices. But we talk about, at E3, we talk about Xbox and IE on Xbox. The reality is that the HTML5, the browser, and our platform is getting to a variety of devices. And these devices very soon, not 10 years from now, but this year, like this holiday, we start having touch screens. Like my laptop today is already touch screen and I will tell you, it's beautiful because it's just easy. And in a few years from now, all of the machines that you have in your office, in your home, everything will just be touch screen. And so it's very, very important to think about mouse and keyboard, but also the touch input. Up to the point where I was a couple of weeks ago, I was in Singapore, and I was talking with one of my colleagues and he said, Georgia, I hate you. Okay, sorry about that. Why? This basically, my friend has two kids. And you can see the kids playing Cat Drop on the machines that they have at home. So you see the first kid, she's playing Cat Drop using the mousepad on the laptop. The second one is using this Windows 8 tablet. So it's just using touch on a Windows 8 tablet. But here is the challenge, right? And there is a television that is projecting the tablet. And then you want to do that. You want to touch the television. And you want to, like, you know, the expectation at some point will be that. And this feels like, oh, she's a child. It's normal that she's so dumb, but she doesn't understand yet the reality between what's real and what's not. I made the same mistake every day. In the office, I have all touch screens. And at home, I still have an old monitor still in the upgrade. But then, you know, I spend the time in the office just touching the screen with my fingers. And then I get home and I touch the screen and I'm thinking it doesn't work. And then I'm thinking you're an idiot. Like, it's not touch. But soon, like, all of the screens will be touch screens. And so it's important to get there. And so bottom line, as we start looking at the touch screens, today there are a number of APIs. Actually, Apple has been the first to come out with a number of APIs, like touch, start events, et cetera. And we look at those APIs. We thought that they were good, but not enough. And we come up with a different proposal. We call them pointer. This is pointer API. I still prefixed it with MSMS. We're still looking for feedbacks and making this more solid. But the idea is that we have one event called pointer that can trigger all of the different input, like input. Either it's a touch or it's a pen or it's a keyboard. If it's a mouse, not the keyboard, sorry, the mouse, it's just one event called pointer. And so you get pointer down, up, up, over, cancel, et cetera. You get all of the properties that you will get before with the mouse. And in addition to that, you get new properties. Like, if you're doing a gesture, like some information about the gesture, the pressure, the movements, the diff of the points. But the beauty of this approach is that in our application, we have only one event. For example, canvas.listen for mouse, sorry, pointer down. And then if I'm on a tablet, that code is going, Windows is going to connect to my touch driver and it's going to transform the touch input into a JavaScript event. If I'm on my laptop or my desktop, I can just use the mouse and it will just work. And this is what we use in cat.rob. And it works great. And so eight weeks into the project, sorry, 12 weeks into the project, we were done. So let me show you the final project. And this is my beautiful application. So this is the same website that you saw before, right? It's just running locally. I will tell you that at this point, we started the QA with Zepto lab in Russia. We sent them the game. These guys are the same guys that at the beginning that told us it's too slow, we should kill the project. Next day, I got another email in my inbox. George, it's too fast. Can you slow it down? You laugh. I was like, yes, it's too fast. And you know what we did? Well, initially we kind of like negotiated. Why should we, like why should we need to slow it down? But then eventually we realized that it was important to keep a consistent experience. And that means that in that code, when you play the game online, inside all of the JavaScript loops, et cetera, we basically add other JavaScript code to slow down the animations. Believe it or not, like we really added code to slow down the performance. And there was a good test for the browser. Hardware acceleration matters. And having a good browser and a good platform, not just the browser, a good user agent in general that is able to render fast graphics, fast JavaScript is important and matters. And we did test this website, not just on IE, but we also wanted to test on a variety of devices. So we tested it on Chrome. It will work on Chrome, on Firefox, on Safari. We tested it on the iPad, on some Android, not all of them. We tested it on the Windows 8 devices. And the result was quite impressive. Like we built the website using IE, but at the end of the day, it just worked on most of the other browsers. There were very few things that we had to tune between one browser and the other. And in terms of the only difference was the performance. So the code works across all of these browsers. The performance was different. And we had to do some optimization on the slowest browser to optimize the performance. A couple of things I want to share. So if you're building a game, most likely you will need to use the Canvas object. And in particular, there are a number of new functionality and new APIs that have just been included recently in some of the browsers. Like some of these are just coming in with IE 10 and are not even implemented in other browsers, but they're all standard compliance, so you should expect them to see soon. A request animation frame, instead of having, the idea is that instead of having like a timer and then saying every 60 milliseconds send some code to the GPU and let the GPU draw on screen, you change this and you do the opposite. And so you say, A GPU, when you have time to draw, can you call me and then I'm going to give you the code back? And that's a nice way to optimize basically your workload with the GPU and to run even faster. And the thing immediate, it's something that developers ask for years, but browsers never gave it to developers. Have you ever done set timeout zero? Have you ever done it? And you know that it's silly, like there is no way any browser is going to return in zero milliseconds, just because the browser is basically using the CPU or the GPU clock. And so each browser will interpret the set timeout zero in a different way. So in Chrome you'll get between three and five milliseconds. In Firefox between 10 and 12, I believe, Opera is between 10 and 50. IE is around 16 or four if you're using high performance. Set immediate is basically a way to break down your code and say as soon as you can, it's almost zero, right? As soon as you can, call me back. And so this is very helpful if you have a long operation and sometimes you need to break down to make sure that the UI doesn't get stuck. You can just interrupt your loop or your thread with set immediate. In performance.now, this is very, very recent. Like we added this maybe a few weeks back. And the idea behind performance now is that today you have date time.now, right? Or date time, get time. That gives you more or less now it's, yeah, what time is it? 11, 55, 20 seconds and 50 milliseconds, but I'm not really sure. When you start drawing things, when you need to get precision, you need to have the CPU exit perfect time. And that's what performance now does. Performance now, they're basically high resolution timers inside the machine and it will give you very, very granular and precise information about what time it is. And again, this is coming from the web performance working group. So this is something we've been leading there for a while. For simpler interactions, for example, you know at the beginning that there is that sliding of the box and you just choose the box? That was not a canvas. We decided to use Jackery and CSS to do the animation because it was easy. We didn't want to complicate our life. And so eventually we end up having a page that has some canvas, some DOM element, Jackery to do the animation between the boxes or CSS to do like the closing animation. Some tip about audio as well. The good news, HTML5 audio is awesome. You have an audio tag, you can play audio and it just works. And that's what we use for this game. And I see some of you are thinking, what's the bad news? The bad news is that some browser cannot handle HTML5 audio yet properly. And there are non-bugs open at Firefox and Chrome and we actually work with these guys for a couple of years now. I'm waiting for them to fix it. But eventually at the end we had to, and this was a painful decision, but we had to fall back to Flash. So if you're using Chrome or Firefox, we are actually using Flash for the audio. It's the same trick that Google used for Angry Birds. And this is just, again, a fallback solution. This is not what we wanted, but eventually right now, like you're not able to loop very quickly audio loops in these browsers. On IE, it's still HTML5 audio. All right. Oh, did you notice this? That sound? No sound. Sound? No sound. So this is either called magic or it's actually, no, it's not magic. It's another standard coming from, I think it's the Web Performance Working Group. It's called page visibility. And it's the idea that if your tab is not like on the foreground, we basically give an event to the site or to the application and we can suspend the drawing loop or we can suspend the audio in such a way that we don't consume battery or resources behind the scenes. There are a lot of nice HTML5 things behind the site. All right. So at this point we moved from an iOS application to a browser application. It was working on most browsers. We were very happy. And by the time, by the way, we were two weeks away from the consumer preview, from launching the consumer preview of Windows 8. And so at that point, in Windows 8, we talk about the platform and I have a session after this where we will talk about Windows 8 meta applications. But one of the characteristics of the Windows 8 platform is that you can use HTML and JavaScript to create applications, meta applications. And so we thought, what does it take to take a game like this and turn it into a meta application? And so let me do step by step what I did that day. So I opened the new Visual Studio tools. Those are free. They just come with Windows 8. I create a new project. And so notice that I have a project template for JavaScript Metro app. And I just choose the blank app template. So Visual Studio is creating a template for me. And so I'm going to move this on the right. This is my website. So this is my previous website. What I'm going to do, I'm just going to go to the Windows Explorer folder. I'm going to select all of the files, right click, and I say copy. So I'm just copying all of the files that I use for the website. Now I move into my Metro project, go to the solution folder, and I say paste. And I decide to override everything as soon as you let me override. There it is. So I'm just copying all of the files inside my Metro template. Then there is a file here called package app manifest. This is an XML file which basically defines some of the property of the application. The only thing I need to change is basically I want to start from index.html. So I save. Ready? I click local machine debug. What do you think? Is it good? And this is functioning, right? So now I'm using my finger. It's touch friendly. And it's a Metro application. So with zero line of code, we move something that was a website built in HTML5, CSS, and JavaScript into an application. So this is an application that is running as a Metro application. Now what I've just done is I've just created a new application called a Metro application. I've just created a Metro application called a Metro application. So I've just created a Metro application called a Metro application. So this is an application that is running as a Metro application. Now what I've just done is horrible. Don't do it. Never. Promise. Do you promise? Please, don't do it. Because I'm not here to ask you to take website and port them to do a copy and paste and now you have the application, yeah, I have an application. This is not an application. This is just a technical proof that the platform is the same. You can build Metro application using the JavaScript HTML and CSS that you already know that said this is not an application. You see that it just doesn't feel like an application. It's not full screen. It doesn't have any capability that make it an application. And so I'm going to kill this project and I'm going to show you actually what the real application that you find in the Windows A store looks like. So you find here the tile, right? So I'm just going to launch the tile. This is my application, Metro application, the real one. So you see that it's full screen. So basically we did some work to change the assets and to make sure that we fit the screen resolution. By the way, Windows 8 runs on a variety of different resolution from 1024 up to 2560. And so we basically have three different set of assets and then depending on which resolution you're coming from, we rescale using CSS 3, the whole viewport to a different resolution. Then you can play the game and you have the same functionalities. The options, for example, if I click options, I'm using the setting charm bar of Windows 8. So I can also open this by swiping on the right. I got settings and now I have specific settings for my game. But it already feels like settings of a Windows app, right? I'm already using Windows. When I play a game, and so now I'm going to play without looking. I'm very good and I'm very happy about my 3,544, a lot of score. And I want to share this with my friends. And so what I do is, again, I swipe from the right, I pull the share contract and I have a number of applications that I can use to share. This is Windows 8, right? And so basically I'm creating a connection between an application that gives some content to share and other applications like my mail client that takes that application. And I can just say to my manager, hey, Drew, I'm playing, not working. And I can just share this over email. Or I could use one of the other applications and just share it on Twitter and very quickly tweet it from here. I can do other things like, you know, Windows 8, you can snap side by side application. So you can have, let's see, for example, you can have, let's open my mail client and then I take a drop. And so for example, if you're in the office, no, no, I'm working, I'm working. And then when your manager leaves the office, you can continue playing your experience. And then as soon as something happens, oh, no, I'm back on my emails. And this is again something that you can do using, as part of Windows 8. So other things that we can do is just play with the ties. And so you see, for example, the ties of the application on my side, those are called live ties, because basically depending on the context of the application or what's get pushed by the server, we show a real time notification and updates to the user. And so eventually think about displaying a new achievement or new levels or other players waiting for you in the queue. And so these are just some of the things that you can do with Windows 8. And you can see that now it starts feeling as an application. It's not a website anymore. So let me show you the code behind the application. So I already have a project here. And all the code is the same. The difference is that I just wrote a few additional lines, which are all here, to implement some of the specific functionalities of Windows 8. Let me increase the font here. 16, so you can see it. So for example, at the beginning, I'm connecting to the own settings. And basically when the users wipe on the user like the settings panel, this is just like an HTML page inside my project where I define all of the settings property. And I just say, hey, when the user used the charm bar in the setting, go and display my page. Another thing that I did is, oh, this is very nice. One of the features that has been more requested during the consumer preview is just the ability to roam the settings of the game. So you start playing in the office. You have a very busy day in the office and you get to the 20 level and you unlock a lot of achievements. And then you go home and you have a different machine and you need to restart. You expect to catch up from the same place. And so what we have in Windows 8 is the ability to roam setting. Each application has its own space. It's like a folder in the Discord. You can imagine it as a virtual space in the cloud where you can just store information. And so all of that logic is within those 10 lines of code. Basically, every time you unlock a new level, you're just saying to the cloud, hey, save this new information to the profile of my user for this application. And then the other machines will just reconnect and sync automatically. And the roaming is given to you by the Windows runtime. And we will talk about the Windows runtime later again. You remember that I snapped the application side by side with the mail client. That code is just using a media query. So we're using CSS3 media query. In particular, we have a specific media query defined as view state, synapt. And basically, we have a listener, which this is a very new standard from the CSS3 working group that allow you to listen for the specific state. And when you're in that state, we basically pause or re-enable the logic of the game. Tiles. We actually also have tile notifications. So as you start unlocking new levels, we can update the tile of the application. And the way we do this is just, again, using the notification namespace in the Windows runtime. We start from a standard template. We change the image. We create the image on the fly using the number of stars of your last level. And then we create a tile for your application and we update it. And then the last one is the share contract. And now we show you the share contract here. So this is the basic function for the share contract. You start from Windows and then you get a data transfer manager. Oh, here it is. Sorry. Data transfer manager. And you add an event listener for data requested. The share contract in Windows 8 is a contract. It's like an interface. It's very simple. Normally in the past, for example, if you have a website and you want to share information to Facebook and Twitter, you need to code. You need to write the code for two buttons, Facebook and Twitter, and embed them inside your application, inside your website. With Windows 8, we decided to make this experience more linear and more flexible and more powerful. The application says, in this case, cut the rope, it's not sharing. The application is saying, I have something that I can share. Right? So for example, if you just unlock a new level, it will say, I have a new achievement. And this is my text, image or link. And you ask to the operating system, here's my content. Can you please ask Windows to share it with some other application? The operating system is basically going into the, when you do this, it's basically looking all of the application installed on my machine. And you look for all of the applications that are able to reshare content. In this case, I have like a Twitter, I have a People app and a Mail app. And the operating system is responsible for creating that connection between your data and the contract or this application. So it's like an interface. And this is very powerful because then you don't need to implement one contract for every channel you want to distribute. You have one unique data and you can have as many applications installed as you need. All right. So this was basically the application. Let me show you one more thing. This is actually quite exciting. Everything I show you so far is called Visual Studio. Have you used Visual Studio before? Good. Now, let me show you another tool that we call Blend. And if you use Civalite or XAML or you did development for Windows Phone before, you're probably already familiar with Blend. The news with Windows 8 is that now Blend allows you to also to work with HTML project. But it's not just the type of tool that you would expect. And let me show you why. Let's open my page. Default. It's slow. It's taking some time. Here is my page. Do you notice anything? Anyone? It's animated. It's moving. It's alive. You see the shadow in the background? That shadow is not CSS or HTML. It's JavaScript. So we're actually looking at a page that is running JavaScript in the background. And that's the power of Blend. Blend allows you to edit an application in real time. Not just looking at the static DOM, but also at what gets created in real time from JavaScript. Up to the point where eventually you can even navigate into the application. For example, I can start playing. I can start getting the video. I select my level. I go into the level. And then I'm thinking, no, there is something wrong in this page. And you can just pause it and you create a snapshot. But the way this is a canvas. So everything you see on screen now is created by JavaScript. And with the tool, you can still operate on top of the canvas. And you can just edit. In real time, a page is created by JavaScript, not by static DOM. Isn't that impressive? This is freaking cool. This is the definition I use internally. And actually, when you look at the DOM Explorer here, let's go back, for example. Let me reset it to the beginning. Actually I'll show you in the next session. But the Explorer, the solution, the live DOM is called live DOM exactly because it shows you both static DOM elements as well as, like when you see the flash symbol, that means that it's coming from JavaScript. And so the ability of this tool is to combine static editing of a page with HTML, CSS, like you've done in the past, with real time editing of content is creating real time or data binding in real time and anything coming from JavaScript. I think this is the best tool I ever used. And I'm biased. I work in Microsoft as you probably know by this point. But still, this is pretty impressive. And other things you can do with this tool, eventually you can test a different resolution. So you can test, for example, how it will look like on some device, for example, running a 2560 resolution. Or you can see what it looks like when you run it in a snap view, right? Remember when I snapped it on the screen. What it looks like in portrait. And I'm not scared because we didn't test this. So, like you see, it's not really optimized for portrait right now. But you can test all of this very easily. And of course, like you have a full live editing of all of the CSS property and you can set animations, we'll get deeper on this tool in the next session. And the next thing, obviously, is the store, right? At this point, we have an application, which means that we have a great platform, Windows 8, to add a lot of nice features. But we also have a distribution channel to eventually monetize the application. And that is called store. And the Windows Store is the same store across all of the Windows 8 devices. So no matter if you are on a laptop or on desktop, on a tablet, on an Intel or an ARM device, you actually have access to the same store. And so if you go to games, you will see there my page for Cat Drop. You see the nice preview. Good news is that because we are still in a release preview, all of the applications today are free. So go and download it now that they're free because eventually, as we get closer to GA, obviously, developers will be able to monetize their applications. And now I want to show you that exactly the same code, like once I release the application to the store, I didn't change anything, right? So that code base is one code base. It works on the machine. And it works also on a machine like this, right? So no change at all. And now I'm able to play the same game on a touch device. And you can see that the performance is still good, right? We're still running at 60 frames per second. And I can still choose all of my... I can just play the full game here. And eventually, if this device was connected and I play some level here and then I stop playing and restart from here, you remember the roaming? I'm just going to roam in real time through the cloud, my setting and my achievements. And that's why I say that I have the best job in the company because it's fun to work with this stuff. Like, Windows 8 is such a powerful platform that I really invite you to take a look. And it's definitely a good time to spend on Windows 8 now. So today, I share some of the story working on Catderope. This is just one of the many projects we work in internally in Microsoft. And I know that there are people in this room actually that have been working on other Windows 8 applications or are thinking to work on applications. I hope this was inspiring. I hope we gave you the idea that everything is possible and HTML5 is ready, not just for websites, but also for applications. We have tools, we have a platform, we have a store. And this is, again, we just released this preview last week. This week, we are talking about the hardware. So if you haven't seen it yet, just search for Computex and you will see 50 new devices, Windows 8 devices that will ship soon. Because of 2GA, we will talk also about other devices. And I'm really looking forward to see some of the applications that eventually people in this room are going to build in the next weeks or months. And if you have anything interesting, please let us know. We are always excited to see projects from you. The last one is not. My team in Redmond is hiring a Windows 8 HTML5 evangelist. So if you're interested, just contact me after this session. Thank you again. Thank you. So I see five minutes left as a reminder. Green card in the box, the other color, so I just leave them in the table. And is there any question that I can answer now? Yes, please. I saw on your slides you had for the event point, you had mouse, finger and pen. Is there any concept for multiple fingers? Of course, yes. So the short answer is yes. I'll show you later eventually, one demo. We absolutely support multi-touch and we don't have a limit to the number of fingers that you can put on the screen. And actually, I'll show you on this device. Let me see. Or I can even do it here. I just see. If I go to the IE test drive, there is a nice demo that shows like the touch APIs. It's here at the bottom. There it is. Touch effects. So two fingers, one on the right, one on the left. And you can see, so this is just JavaScript and using the MS pointers. And you can see like the shadow of my fingers on the screen, right? So this happens to be, this my laptop supports only two touch points. This Nike device supports 10, so I could put 10 fingers and you will see 10 different fingers there. The code is just the same and we allow that, which was somehow a limitation in other platforms. And also in terms of gestures, like I didn't talk about it, but we support also gestures. And so eventually you can use the Windows gestures or you can eventually create your own gestures just using JavaScript events. Any other question? Yes? How about the non-Java script HTML way of doing things? So the question is, can I do Metra apps in C sharp? Will the support continue? I'll talk about this in the next session, but the answer is, of course. It's the platform, I have a slide and in the next session I'm going to talk about the Windows 8 platform. The beauty of Windows 8 is that we kind of remade in the world system and we have a runtime called Windows runtime, which is the base. On top of this, we have different projections. One is HTML and JavaScript, one is C sharp, BbNet and Samu. And one is C++. And today when you look at the store and you look at the application, some of them are HTML5 games. This is a C++ game. This is a C++ game for the ninja. You might have seen it before. Yes? Oh, you're thinking Windows 9 and Windows 10. We're thinking about Windows 8 now. We didn't ship yet. We will talk about Windows, the next version of Windows after we ship Windows 8. All right. Thank you again.
so behind the scenes, you're communicating real popular games on iOS. And it was an application code, the Objective-C code. And one of the four weeks into the project, this is what Cut The game, most likely you will need to use the Canvas Metro application called a Metro application. So