Runs great in Chrome for me. I have the android app and this html5 version runs really well... after playing the first couple of levels, it runs just a well as the android game.
Tried loading the game in android browser, no go... also tried loading it in the dophin browser within android... no go (both just site at 00%).
Was curious what they were using for playing audio so I had a look at the code. They are using SoundManager2 (http://schillmania.com/projects/soundmanager2/) which will play audio using either html5 or flash (it's great, have used it on a few projects in the past)... I believe it dynamically detects what's available. Looking at the code though, I see they (MS/Zepto Lab) are only using html5 audio on IE9 or greater, and flash for everything else... if you want to force html5 audio, use this link:
This might fix issues people are having for browsers that don't support (or block) flash. Haven't tried in an iOS browser, but that link might increases your chances of it working there :)
Using that link I was able to get it to load in browser on Android and started the game, but couldn't cut the rope, likely cause it's not built to handle touch events. Too bad.
Tried loading the game in android browser, no go... also tried loading it in the dophin browser within android... no go (both just site at 00%).
Dolphin is just a different GUI for the Android browser, so this will never help. You need to try Firefox or Opera Mobile, which have their own rendering engines.
Ya, wont work on touch interfaces... all the js calls are bound to mousedown, mouseup and mousemove, would be pretty simple to bind to touchstart, touchend and touchmove as well... that might be all it would take.
Oh man really? Kudos to them for getting this really slick game out in HTML5, but I think they missed a trick by not giving touch support. I was playing with the mouse but the game is made for touch; it's much harder to play with the mouse. I wonder if this is a "don't compete with yourself" thing? I'd imagine the full game offers quite a bit more than the browser version.
> I wonder if this is a "don't compete with yourself" thing?
Nope. At least on iOS devices, they have a free edition which includes the same levels (except for the IE-only ones.) You get many more levels if you buy.
This is starting to become a trend, but it needs a strong driver. The Windows 8 App Store may provide the push needed to get HTML5 adoption up for applications. It's a different ball game in the web, but I think we'll start to see the web playing a bigger role in the marketplace.
Microsoft surprised me that they didn't block out other browsers. Google didn't surprise me at all and the game is blocked in Opera. It works when user-agent is changed.
It's sad when company acting as someone for open and standard web is doing this. And Google is doing this user-agent sniffing across all their products.
That's probably it for some features but it still sounds like "You have to use IE5 or higher to see this site" to me.
Also, some features have been blocked for a long time for no apparent reason, for example background image on search. It worked from the day one (when you changed the user-agent), there is nothing scientific about it, yet it is still blocked years later.
Angry Birds is not using HTML5, visit http://chrome.angrybirds.com/ without Flash installed and you get "Looks like you either don't have Adobe Flash installed or are using an older version of Adobe Show."
Although the senior developer says in the video: "Objective C is object oriented, has classes and structs. And those things just don't exist in JavaScript." .. Well, except object orientation, of course ;-)
A good writeup. A pity more of the source wasn't released (say, excluding the game physics and logic); I'd be keen to see how they structured their code and it'd be a great "cookbook" reference for somebody new to building HTML5 games. (At least the minified source is there.)
Are you saying that you think Javascript is object oriented because it can create an Object and enclosed functions? I have always been taught while we can make it look like OOP, it is not because it does not have inheritance through classes AS PART OF THE LANGUAGE.
JavaScript is object oriented but it gets the inheritance from prototypes instead of classes. Prototypes are very powerful, you can implement a class system in JavaScript if you want to but the reverse is not true.
I'm confused why Microsoft would sponsor something like this. Google going after game developers and getting them to port their apps to HTML5 makes sense, as it supports the Web as a platform as well as promotes the Chrome Web Store.
Is the plan that the Windows8 App Store feature Chrome Store-style URLs-as-applications?
The whole "behind the scenes" reads like an advertisement.
Striking excerpts:
*
> cuttherope._ie_
> Canvas is an amazingly fast rendering surface, especially in a browser where that API is hardware accelerated (like Internet Explorer 9).
> Internet Explorer 9’s Chakra JavaScript engine pre-compiles the code on a background thread [...] The result is near-native execution speeds. Amazingly, this is something that you just get for free.
> while we can say Internet Explorer 9 users get a great plug-in free experience, Chrome and some Firefox users could have run into an audio problem
> Much of our development was done in Visual Web Developer 2010 (the "express" version is available for free here). This is a really robust web editor with autocompletion for JavaScript and CSS. It’s great that the express version is free.
> in most cases, anything we tested in Internet Explorer 9 “just worked” everywhere else.
> With some guidance from Microsoft, we decided to replace the recursive function with an “unpacked” iterative version of the same code.
> Frankly, we would have never found that without the profiling tools in Internet Explorer 9.
*
The whole performance part is worded to sound like porting from Obj-C to JS is a breeze, JS code is actually cleaner and more straightforward than Obj-C, Canvas offers more features and performs better than OpenGL ES, and so on.
This is not so much an ad for IE9 as an ad targeting developers, showcasing the (present and future) Microsoft development ecosystem as best class.
He expected them to fail in some way, and when they instead succeeded by using MS tools, he made up some fault to complain about.
Microsoft bashing is getting old.
My suggestion for the like-minded is to either try MS tools for yourself, pick a new target, or modify own identity to not require for self to be the victim oppressed by an evil giant.
You are reading my post too far: I was not bashing anyone. If anything, I was complaining about the writing, not the stack itself (which I have used daily and still use from time to time since I moved to a mostly Ruby shop). I was hoping the "behind the scenes" to be a bit more technical and a bit less ad so the article, while an interesting story, was a let down.
With some guidance from Microsoft, we decided to replace the recursive function with an “unpacked” iterative version of the same code. The results were amazing. We saw a 10x improvement in every browser! Frankly, we would have never found that without the profiling tools in Internet Explorer 9.
1. Microsoft is attempting to pique interest in gaming because they see Xbox Live as a key differentiator for the Windows Phone platform.
2. Microsoft is just trying to prove relevance for IE, since their numbers have been slipping for so long (a "me too", if you will).
XP is about a decade old now. I think its completely reasonable for a web app showcasing modern technologies to not even acknowledge it's existence, let alone support it.
Modern technologies you are talking about? What I consider modern technologies are modern FPS games, like Crysis, Metro, Dirt or Rage. Cut the Rope uses techniques that are dated at least 10 years. It's a shame that people think of it as anything modern. XP can run a lot of games that are orders of magnitude more complex than any HTML5 game.
Those who downvoted you won't be happy until we've devolved into playing Zork-like text adventures and using Lynx. HTML5 will become like Flash/Silverlight ;)
JavaScript, HTML, and CSS. The HTML includes the canvas, video, and audio elements. There's some "behind the scenes" info at http://www.cuttherope.ie/dev/
I'm no game dev, but wouldn't porting from OpenGL to WebGL be much simpler than porting to 2D Canvas? I know IE doesn't support WebGL, so I'm just wondering how much extra work they created for themselves.
They could have supported WebGL for better performance on browsers which support it with a fallback to Canvas 2D for IE9. But I'm sure Microsoft didn't want them to have it running faster on other browsers :)
I was surprised too, I'd expect those numbers to be roughly equal. The only thing I can think of is that they're using Flash for audio. The Flash runtime has run better on Windows than other platforms for a while. Would be curious to see those numbers with the HTML-5 audio forced to true to see if they stay the same.
note also the specs of each of those tests; the windows tests have i5/i7 chips with at least 4gb of ram. The Lion test is a dual core with 2gb. That's not a fair test, so the whole table is bogus.
To be honest, this game is made for multi touch screens. Simultaneously cutting the rope and pressing the airbag doesn't work very well on Chrome (or IE).
This really does show the power and potential of HTML5. Personally, I'm really looking forward to the day where I can easily make notes and draw on any given webpage, and be able to save and share them.
IEDR requires a "real and substantive connection to Ireland" although I'd guess Microsoft could get any domain they want. I'm no fan of the IEDR but it's a shame to Microsoft polluting the domain space.
Third level in proper browsers:
1. Open a JS debug console (Cmd+Option+J)
2. Set a breakpoint on window load (Event Listener Breakpoints - Load - load).
3. Reload the page
4. After the breakpoint is hit, type
localStorage.setItem('msIsSiteModeActivated', 'true'); navigator = {appName: 'Microsoft Internet Explorer', userAgent: 'MSIE 9.0'};
5. Disable the breakpoint, level 3 should now work..
From what I understood on the dev page it was developed by a non-MS team, PixelLab, who likely use OS X machines for most of their day to day work. Microsoft gets their Windows license either way.
The development article makes a reference to the resource loader they built for this, PxLoader (http://thinkpixellab.com/pxloader/). Are there other JavaScript libraries around that have similar functionality?
If you watch the Super Browser 2 Turbo HD Remix talk from Google IO '11 there is a bit in there about developing something very similar, though less robust, to pre-load the assets. The core concept is the same as pre-loading image rollovers in JavaScript. Not a library, but the talk and slides give a decent overview of the code.
On one hand, it's fairly impressive. On the other hand it has pretty frequent hitches which for a game as simple as Cut the Rope is pretty unacceptable.
I don't get all the hype for the HTML5 bandwagon. I would never actually play a game this way "for real" because perf is too poor.
Very well made. This year will be strong for the canvas tag and web gaming.
And of course don't be surprised if it doesn't run well on your tablet or phone. Mobile browsers aren't that strong yet.
Loaded great on my iPad 2, music started playing, tutorial came up, but CAN'T CUT THE ROPE. Ugh. How hard would it have been for them to add some touch event captures?
Aw, too bad. They must be aware they're blocking browsers that support it if they have that override. But yes, that does work for me. (*Edit: it appears audio is [at worst] broken in Chrome stable according to the dev blog for this project).
Yup, doesn't even try to load Flash at all now, great!
Chrome is the only browser to support the Web Audio API (which isn't fully standardised yet anyway I don't think), but that is an amazing API for audio, and is far better than HTML5 audio.
Mozilla supports the Audio Data API which predates Chromes entry into that space: https://wiki.mozilla.org/Audio_Data_API
At some point this will be battled out in the W3C and a standard API will appear.
The two don't compare at all. The Audio Data API simply allows you to write custom sample data to audio buffers. The Web Audio API is a complete audio routing/processing graph complete with all the features you'd expect of a good audio engine. The Audio Data API is pretty useless for games compared to the Web Audio API.
The Audio Data API is terribly low level, and the current implementation in Firefox is so laggy that it's not an option for real-time game audio. Chrome's Web Audio should win this battle without a sweat.
Runs great in Chrome for me. I have the android app and this html5 version runs really well... after playing the first couple of levels, it runs just a well as the android game.
Tried loading the game in android browser, no go... also tried loading it in the dophin browser within android... no go (both just site at 00%).
Was curious what they were using for playing audio so I had a look at the code. They are using SoundManager2 (http://schillmania.com/projects/soundmanager2/) which will play audio using either html5 or flash (it's great, have used it on a few projects in the past)... I believe it dynamically detects what's available. Looking at the code though, I see they (MS/Zepto Lab) are only using html5 audio on IE9 or greater, and flash for everything else... if you want to force html5 audio, use this link:
http://www.cuttherope.ie/?html5audio=true
This might fix issues people are having for browsers that don't support (or block) flash. Haven't tried in an iOS browser, but that link might increases your chances of it working there :)
Using that link I was able to get it to load in browser on Android and started the game, but couldn't cut the rope, likely cause it's not built to handle touch events. Too bad.