Under the Covers: Let It Snow…
With one of those rare Seattle snowstorms underway today, I feel this is a great time to publish this description of our Holiday 2011 Test Drive demo “Let It Snow.” —Editor
When a browser effectively uses the underlying hardware, the possibilities are limitless. Over the holidays we released a demo that helps showcase the advantages of a fully hardware-accelerated, touch first browsing experience with Internet Explorer 10. This post takes a closer look at how the Let It Snow demo was created. The patterns in this demo are typical of the HTML5 experiences emerging across the Web today and early Metro Style Apps. We’ll take a look from a functional point of view, rather than visual.
As low power mobile devices and touch first user experiences become mainstream, customer expectations around browser performance are quickly expanding. Browser performance now includes how smoothly the Web site moves under your finger, how quickly the Web site responds to touch interactions, and how efficiently the browser consumes battery. With Internet Explorer 10 and Windows 8 we set out to build the world’s fastest browser for real world scenarios.
Building Let It Snow
Holiday Postcard We start with a themed postcard which contains a designated area for the holiday greeting. The postcard is generated at runtime using HTML5 canvas and uses many common drawing techniques including drawing images, composing gradients, manipulating opacity and skew, and more. |
|
Animated Snowstorm We next add lots of falling snowflakes to create a snowstorm. We do this using a second canvas that���s layered over the postcard. Each snowflake is represented as an object in a JavaScript collection which holds the state of the snowflake, such as current location, velocity, and the image to draw. The canvas is cleared each frame and the scene recreated from the underlying model. |
|
Snowflakes Collecting Over time snowflakes will collect on the sign. Using hit testing techniques we determine when the snowflake is over the sign and then randomly assign the snowflake a target on the sign. As the snowflake approaches the target we use HTML5 Canvas composite modes to compose the snowflake on the canvas. |
|
Brushing Away the Snow Snow can be brushed off the postcard using your finger or mouse. We track the user input through the new MSPointer event which enables a single consistent API across different pointer models. This allows us to provide a great multitouch experience in Internet Explorer 10 running on Windows 8. We use these captured points to erase portions of the canvas, creating the illusion of the snow being brushed away. |
|
Complete scene When the layers are combined they create an interactive holiday scene. The patterns used in this demo represent techniques commonly found in games such as Angry Birds or Cut The Rope, including script based animations, sophisticated user input, physics based game logic, and more. |
We’re excited about the fast and fluid interactive experiences that can be achieved in Internet Explorer 10 and Windows 8 with a fully hardware-accelerated and touch enabled HTML5 platform. There’s no better way to experience these benefits than first hand through the Windows 8 Developer Preview.
—Bogdan Brinza, Program Manager, Internet Explorer
Comments
Anonymous
January 18, 2012
The comment has been removedAnonymous
January 18, 2012
Not supporting OGG and other open formats is a complete deal-breaker for most of us, they're either supported or a browser doesn't support the audio and video elements period. This "if the user installs it" move with IE9 wasn't acceptable either, time to drop MPEG-LA games and support standards without holding back because if you don't win us web developers over you'll only continue to see us migrate users away from your software and I would imagine Microsoft values Bing succeeding more than the MPEG-LA license/patent pool.Anonymous
January 18, 2012
The funny thing is that when bing runs videos, they use mpeg and then webm as a fallback for chrome and firefox.Anonymous
January 18, 2012
@John: OGG is container format, that can hold audio tracks with format like these: Vorbis, Flac, Speex. Which one of them do you think to be used? Only one of them is standardized and ironically it is the less used one. The OGG container format is also NOT standardized.Anonymous
January 18, 2012
@Enough: @John made it clear they meant the Vorbis format in the Ogg container, he mentioned Vorbis several times in his post.Anonymous
January 19, 2012
@John Heston Actually MP3 licensing does not apply to HTML5 games because such games do not contain codec or encoder software elements. All te MP3 patemt licensing applies to mp3 coding en decoding and transmitting technology. The files format themselves are not the patented technology. The patented technology is in the codec or encoder software. So in producing or playing mp3 files. In HTML5 audio case the browser plays the adio and thus contains the patented technology and the codec for that has been payed by te browsermaker. If you have a game which has th mp3 player contained in it then you have to pay a licening fee. Still I would advise everybody to use AAC which is a much better fomat for audioAnonymous
January 19, 2012
The comment has been removedAnonymous
January 19, 2012
The comment has been removedAnonymous
January 19, 2012
@John Heston: How are these HTML5 games and demos commercial? Did you even read what you copy/pasted?Anonymous
January 19, 2012
The comment has been removedAnonymous
January 19, 2012
@John Heston Does AAC have royalty fees too?Anonymous
January 19, 2012
@John Heston Actually streaming mp3s does probably could fall under patents because streaming is a form of transmitting the mp3's. It depend on how you stream the mp3 if you actually infringe on suc a patent. Even with streaming music it is likely possible to avoid transmission patents on mp3 but that would depend on you implementation However serving HTML5 does not use streaming but uses mp3 webserver file distribution on the server side and webserver file distribution technologie is not in any way mp3 patent related. You can look up the patents on the mp3 licensing site and see they all describe methods or processes in encoding, decoding and transmitting mp3s. They do not describe no static files of filedistribution which is what HTML5 is using. Of course the browser playing the HTML5 audio does decode and likely requires licenses or requires a media framework that has the licenses. For instance on Windows mp3 is always present in the media framework that all the browsers can use. And of course the site serving he HTML5 game might have to pay licensing for copyrighs to the music rights holder.Anonymous
January 19, 2012
@Aethec: "How are these HTML5 games and demos commercial? Did you even read what you copy/pasted?" I never said they were or they weren't. I said the running royalty for games probably applies. The running royalty for games makes no distinction between commercial and non-commercial games. Here is the link again: www.mp3licensing.com/.../games.htmlAnonymous
January 19, 2012
@A_Zune: "They do not describe no static files of filedistribution which is what HTML5 is using." The licensing for distribution of files is separate from the issue of patents. Whoever controls the patents controls how the format is licensed. Note that the license conditions explicitly talk about the distribution of MP3 files on physical media like CDs. There's no distribution more "static" that files on a write once disc. And again, in the case of HTML5 games it is the running royalty that is the core problem: www.mp3licensing.com/.../games.html If the MP3 files are "distributed" 5,000 times, by whatever means, you must pay the licensing fee.Anonymous
January 19, 2012
@A_Zune using mp3 files inside HTML5 games most certainly does require licensing fees if you exceed the download count noted here: www.mp3licensing.com/.../games.html There's a reason why ABSOLUTELY NO ONE building HTML5 games will even consider using mp3 files due to this specific issue. Luckily IE does support AAC files so there is a temporary alternative - however longer term Microsoft seriously needs to get their act together and support at least 1 open audio and 1 open video format or they will loose developer support very quickly. MSFT made great strides in IE9 and IE10 betas to support standards and use the same markup that works in other browsers. Currently Microsoft's lack of support for free and open audio/video formats are really the only thing holding them back from being able to claim support for HTML5. So close - but certainly at the moment not there yet. In the mean time we will continue to build apps that support open audio and video formats... and detect IE on load to redirect users to download a browser that does support open formats. It's harsh - but currently we have no choice but to force IE users to upgrade their browser to a Standards based one. :-(Anonymous
January 19, 2012
guys let W3C come up with the final decision about the "standard" codec... then expect the support... both are equal candidates.. just like SVG vs VML back in 90's when SVG won !Anonymous
January 19, 2012
Just because the mp3 licensing site claims somthing might require a license does not make it so. I have looked at ALL the patent they have listed on the site (and thus claim to license) and none of them apply purely to existing mp3 files (only to the processes or methods of encoding en decoding them) and none of the patents apply to distributing mp3 as a file. The mp3 sites encourages people to take a license even if they do not need it. Broadly seen games using mp3 require licenses because most videogames contain playing and decoding software. But HTML5 games normally do not contains any audio decoding or playing technolgy as a html game with an mp3 audio file itself does not code, encode, play or transmit the3 mp3. Decoding and playing is done by the browser (or underlying media framework). Delivery of the mp3 file is usually done by a webserver as a complete file and thus the mp3 is not transmitted as a signal either (in streaming audio it might be). The mp3 licensing site is trying to exaggerating the scope of their patent by avoid to state when their patents do not apply. They even avoid to use the word 'file' on the entire site because not of their patents apply to them. They are in the business of selling licenses. The more the better.Anonymous
January 19, 2012
MP4 => h.264+AAC These are the codecs for the near future at least untill h.265 arrives on the scene in the next few years.Anonymous
January 20, 2012
John Heston wrote: I never said they were or they weren't. I said the running royalty for games probably applies. So you admit you're spreading FUD?Anonymous
January 20, 2012
W3C isn't going to bother specifying a standard codec. They explicitly designed the video and audio tags to support multiple codecs pointing to multiple sources depending on browser support and state within the standard draft that user agents can support any codecs or containers that they want. They might make a recommendation at some point, but their notes state that no current codec exists that satisfies all parties and concerns. In any case it is absolutely silly for all browsers to not support whatever codecs as provided by the platform as at least a fallback mechanism. Even if there is a "standard" codec that is well rounded there are numerous situations where a specialized codec might make more sense, like for replaying screen captures.Anonymous
January 20, 2012
@alvatrus: "So you admit you're spreading FUD?" FUD? What's doubtful about the fact that the MP3 licensing is hugely problematic for anyone trying to develop for the web? What's uncertain about the fact that a licensing fee applies to "Interactive software products intended to interact with a user for entertainment"? It seems necessary to link you to the Scrira blog post again: www.scirra.com/.../why-you-shouldnt-use-mp3-in-your-html5-gamesAnonymous
January 20, 2012
The comment has been removedAnonymous
January 20, 2012
Let it snow is great but I have a good idea for IE-10 which is key shortcuts ie:- by long pressing keyboard keys user defined websites would open this will ease up browsing.Anonymous
January 20, 2012
The comment has been removedAnonymous
January 22, 2012
@A_Zune - Microsoft has already indicated that they need to pay the licensing fees for using mp3 files in their HTML5 based games. The reality is that using mp3's puts developers in a position where they may have to pay licensing fees... and using them in HTML5 games that become remotely popular will DEFINITELY require payments. Developers are well advised to use AAC format audio files when publishing games that will also play in Internet Explorer. Hopefully Microsoft will realize that supporting a fully open and free format like Ogg Vorbis is actually the only realistic option going forward in the future. HTML5 Game developers will be speaking loud and clear on the matter over the next year or so - don't expect this issue to die anytime soon. @A_Zune - in the mean time take a few minutes to familiarize yourself with the status quo and the many, many posts on the subject. You are very wrong in your current understanding of the mp3 licensing issues with HTML5, and you do a great dis-service to the entire developer community by continuing to spread false information about a subject you are not fully versed in. I'm sorry that you are so naive about the issue - but a little research and an open mind will solve your mis-understanding. If you accidentally released game titles using mp3's change them ASAP before you exceed the threshold that REQUIRES you make licensing payments!Anonymous
January 22, 2012
@Nelson Where has Microsoft indicated that? What mp3 technolgy would be involved uin distributing standard files trough a webserver?Anonymous
January 22, 2012
All the scirra.com links are trying to do is sell the product „Conxxxct 2” – and they are at least succeeding in getting back-links, which is good for their search engine ratings. The rest is FUD!Anonymous
January 22, 2012
@Microsoft - please step out of the shadows and come forth and clear up the air about mp3 usage in HTML5 games!!!!!! The vast majority of developers are aware of the licensing issues (except A_Zune) but clarification from Microsoft is necessary to continue. Is Microsoft exclusively recommending AAC audio only? Did Microsoft make the payments they were required to for mp3 licensing on their HTML5 games? Please tell us you led by example and paid the fees accordingly and on time. Microsoft fought to get annoying DRM and license encumbered audio and video formats pushed into IE - we'd like to hear that you felt the payments were worth the effort. Oh and by the way your comment form doesn't save posts properly, readers must save their post comments and re-post on every comment submission - please fix this!!!Anonymous
January 23, 2012
@Don Why don't you ask the Mp3 licensing site what mp3 patents would apply to webserver serving files to a browser.Anonymous
January 23, 2012
Boy I love "web development".Anonymous
January 23, 2012
The comment has been removedAnonymous
January 23, 2012
The comment has been removedAnonymous
January 23, 2012
Those patentholders on googles proprietary video format VP8 already surfaced 7 month ago. fosspatents.blogspot.com/.../googles-webm-vp8-allegedly-infringes.html "Thus far, 12 parties have been found to have patents essential to the VP8 standard."Anonymous
January 23, 2012
@@Trish - PRECISELY!!!* as you quoted: "h.264. It's not going anywhere." it may be a great video format, but on the Web its useless due to being a patent encumbered format. The Web is open, HTML is open, CSS is open... HTML5Video and HTML5Audio tags are part of HTML - thus they too must be open... this is where IE fails.Anonymous
January 23, 2012
The comment has been removedAnonymous
January 23, 2012
The comment has been removedAnonymous
January 27, 2012
Very interesting. I now know how one of my favorite Internet Explorer demos works.