Microsoft launches an HTML5 version of Cut the Rope | Hacker News Reader

Microsoft launches an HTML5 version of Cut the Rope

cuttherope.ie

556 pointsjkbr124 comments

EDIT: Try this if it's not working for you: http://www.cuttherope.ie/?html5audio=true (read below for more info)

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.

Loads fine on my iPhone, and plays the audio, but the swipe motion doesn't work, it just wants to pan the screen from left to right.

Ya, I don't they are handling the touch events unfortunately.

Get to 72% and then stalls (multiple times) on Android 4.0.3. (edit, and later finishs if you wait long enough apparently)

Animation is very fluid, perfect. The sounds seemed a bit choppy, but otherwise it looks very, very playable if touch events were supported!)

android 2.3 loads perfectly fine with audio, but yeah as others have stated no touch http://i.imgur.com/DPM49.png

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.

if you click on the options button before you start to play you can toggle the 'Drag to cut' button to 'click to cut', then the game is playable.

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.

Both Angry Birds and Cut the Rope are now on HTML5 (http://chrome.angrybirds.com/)

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.

Just curious: Why the down vote?

Presumably someone who doesn't like the HTML5-based-apps direction.

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.

I very much agree with you. Although this week all the Google+ stuff first unavailable in Opera is now visible.

Maybe Google is just playing safe and only launches when they are 100% sure the browser supports the app.

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.

Microsoft blocks me (Firefox user) out of higher levels. So that's not true.

It works just fine in Opera. Why do you say it is blocked?

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."

I believe that the game itself is HTML5, and only the audio portion is flash-based.

The behind the scenes writeup is good: http://www.cuttherope.ie/dev/

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.

If you're curious about some of the developer issues they ran into porting to HTML5, check-out http://cuttherope.ie/dev.

Looks like the url needs the "www" to work: http://www.cuttherope.ie/dev

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?

Is actually a pretty IE commercial; to play the third level you have to put it on your windows taskbar and play it with IE9.

There could be two reasons:

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).

From their development details (http://www.cuttherope.ie/dev/), this point stuck out to me:

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.

To be fair, they probably could have found the same performance problem profiling using chrome or firebug

This combined with the recent typography in IE promotion they just ran makes me think they're trying to push IE as a quality browser again.

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.

What did you expect?

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.

My apologies.

Seems to be more a direct promotion for IE9 http://i.imgur.com/pLMyF.jpg

You have to see the cute picture they put if you try to view it on IE8 http://img502.imageshack.us/img502/1417/cuttheropeie.png

Yeah, and tough luck if you're on XP I guess, you're forced to switch browser!

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.

It may be old but it still has about 34% market share. http://gs.statcounter.com/#os-ww-weekly-201148-201201

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 ;)

Sorry for the dumb question, but when it says "HTML5" version, what is the underlying technology they are using, if it's not flash?

basically javascript and the new browser elements for drawing graphics

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/

HTML, CSS, JavaScript.

Version 5 of the HTML specification (colloquially known as HTML5) has a number of new features that support Flash-like interactive multimedia content.

See http://en.wikipedia.org/wiki/HTML5 and http://en.wikipedia.org/wiki/Canvas_element, for example.

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.

Safari doesn't support WebGL either because of security issues (AFAIK only Firefox does) so while it might be easier it wouldn't work.

chrome supports it too, which is higher than safari in use. firefox + chrome covers more together than any other 2 browsers in combination doesn't it?

but I see what you mean about compatibility, with canvas they get ie9 + firefox + chrome + safari, almost everything for desktops.

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 :)

Safari does support WebGL, but it's off by default. You have to enable it in the Develop menu.

All modern browsers support WebGL: http://caniuse.com/#search=webgl

It stuck on 00% on biggest balloon and nothing happens. Is it only IE10 compatible? (running Ubuntu so can not see what it looks like in IE)

you have to turn flashblock off.

Thanks! Now it loads and works great on FF for me.

I found their framerate numbers quite staggering, with OS X lagging far behind Windows. Is this a surprise to anyone else?

http://www.cuttherope.ie/dev/notes-framerates.jpg

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.

In the video they talk of profiling it in IE — maybe it wasn't profiled and improved in other OSes/browsers.

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).

Indeed. There are levels in cut the rope that require multiple simultaneous touches.

And are those levels in this one? It's easy for them to select web friendly levels or create a couple more or omit them.

Love this. Guess I missed the game when it initially debuted. But this is hella fun!

the level of smoothness and playability amazes me. better run into the salt mines to brush up on html5 :)

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.

Sounds like http://markup.io

My mouse does not show up, chrome 17 + mac

Chrome 17 is a beta release. It seems to work fine in Chrome 16 on OS X.

Mine is working. Chrome 17 beta on Mac.

My cursor is also hidden, chrome 17 on mac

Anyone know why they are using a .ie (Ireland) domain? Just curious.

Because of the IE from Internet Explorer?

Maybe because "ie" also stands for Internet Explorer? I'm just guessing, I was wondering the same thing.

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.

According to the Whois info it is registered to ZeptoLab UK Limited as a Registered Trademark. Not much of a link to Ireland there!

Wait are you being sarcastic?

UK = Great Britain + Northern Ireland

Great Britain = England + Scotland + Wales

So technically if they're registered in the UK they're a part of Ireland I suppose.

As a reference to Internet Explorer (IE)

Microsoft have an office in Ireland, so it may actually be Irish.

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..

I absolutely love how they show it being developed on an iMac. Keep in mind IE hasn't been developed for the Mac since 2003.

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.

Works fine for me on Firefox 9.0.1/Mac!

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.

http://www.google.com/events/io/2011/sessions/super-browser-...

Very cool, runs flawlessly in Safari.

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.

I believe the hype is for what it is shaping up to be, not what it is at this moment.

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?

Really impressed otherwise.

Microsoft using Ogg Theora? That's a breakthrough.

2012 Microsoft isn't the 1995 Microsoft that you think you know.

In some ways it's better, in many others it's still the same (bad wise).

They were rather chilled off about WebM, so I wouldn't expect them to be interested in Ogg Theora either.

Didn't work for me in Firefox 11/Linux until I turned off my Flash blocker, then it crashed after hitting 99%.

Seems to work OK in Chrome 16, though.

Try this:

http://www.cuttherope.ie/?html5audio=true

(see my other longer comment for why)

Unfortunately, that didn't help - but thanks for trying!

This game runs more smoothly on Chrome than on IE 10. (I have Windows 8 Developer Preview)

[In IE, balloon presses are laggy - not so in Chrome.]

Yeah you said it, it is a preview ( including IE 10)

Works for me on W7 64-bit with Firefox 9.0.1

This is what I end up seeing, chrome 16:

http://imgur.com/oNgoZ

It's great on Chrome and better on IE (that's why and how it was built for :)) Very addictive!

Does not support touch controls. Therefore probably can't be used for Windows 8 demos.

It's even smoother than the iOS version in Chrome 16 for Mac. Amazing implementation.

When i saw the movie i feel sorry for this guys "using" IE

Works on the Playbook, playable but at a low frame rate.

How is Firefox 7.01 an old browser, huh ?

Works flawlessly in Opera 11.60/Windows.

Really? It was so sluggish on mine.

Sadly does not work on my iPad 1.

On my iPad it just stops at 73%

Very cool work pixelLab!

Make sure you enable Flash. Not sure why it's necessary, maybe cross site loading?

Works really well (Chrome 17.0.963.26 dev, Linux), I got sucked in and played several levels.

Kind of sad that at the end of the "trial", you're prompted to buy the game on iOS or Android.

it's cause they are using flash for audio if not IE9 or greater (as in IE10). you can force html5 audio instead of flash audio using this link:

http://www.cuttherope.ie/?html5audio=true

Let me know if that works.

no it doesn't. with flashblock it's 00% all the time (ff)

With the link he provided and that override, the site doesn't prompt me to load Flash at all.

Yeah, the html5audio option doesn't seem to work in Firefox with Flash disabled.

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.

doesn't work on chromium for me, not sure why (17.0.914.0 on linux, flash is installed and active)

Haha, IE TLD. Funny! :)

Reply on news.ycombinator.com