Microsoft launches an HTML5 version of Cut the Rope

http://www.cuttherope.ie/

by jkbr • 15 years ago

556 124 15 years ago

crabasa• 15 years ago

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

jQueryIsAwesome2• 15 years ago

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

marcamillion• 15 years ago

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

hippich• 15 years ago

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)

zalew2• 15 years ago

you have to turn flashblock off.

azakai• 15 years ago

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

thristian2• 15 years ago

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.

coda_5• 15 years ago

Try this:

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

(see my other longer comment for why)

thristian2• 15 years ago

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

andrewpi• 15 years ago

Works fine for me on Firefox 9.0.1/Mac!

eridius• 15 years ago

Very cool, runs flawlessly in Safari.

obilgic• 15 years ago

My mouse does not show up, chrome 17 + mac

drm237• 15 years ago

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

g3orge• 15 years ago

Mine is working. Chrome 17 beta on Mac.

septnuits• 15 years ago

My cursor is also hidden, chrome 17 on mac

drivebyacct24• 15 years ago

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.

coda_5• 15 years ago

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.

zalew2• 15 years ago

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

drivebyacct24• 15 years ago

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!

zem• 15 years ago

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

FPSDavid• 15 years ago

Works for me on W7 64-bit with Firefox 9.0.1

coda_5• 15 years ago

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.

johnbatch• 15 years ago

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.

coda_5• 15 years ago

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

drivebyacct24• 15 years ago

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

angryasian• 15 years ago

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

coda_5• 15 years ago

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.

sequoia• 15 years ago

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.

bchjam• 15 years ago

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.

gcp• 15 years ago

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.

aChrisSmith• 15 years ago

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?

jQueryIsAwesome2• 15 years ago

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.

deltaqueue• 15 years ago

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

mathrawka• 15 years ago

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.

chucknthem• 15 years ago

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

Bockit• 15 years ago

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.

lloeki2• 15 years ago

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.

fmoralesc• 15 years ago

What did you expect?

secoif• 15 years ago

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

sumukh1• 15 years ago

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?

Zirro• 15 years ago

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

rplnt2• 15 years ago

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.

tintin• 15 years ago

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.

tete3• 15 years ago

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

drhowarddrfine2• 15 years ago

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

0x006A• 15 years ago

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

morganpyne• 15 years ago

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

switz• 15 years ago

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.

nickbarnwell• 15 years ago

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.

shmerl3• 15 years ago

Microsoft using Ogg Theora? That's a breakthrough.

noveltyaccount• 15 years ago

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

shmerl3• 15 years ago

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

shmerl3• 15 years ago

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

zsiciarz• 15 years ago

Works flawlessly in Opera 11.60/Windows.

manojlds2• 15 years ago

Really? It was so sluggish on mine.

steve8918• 15 years ago

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

jakejake• 15 years ago

basically javascript and the new browser elements for drawing graphics

mbrubeck• 15 years ago

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/

rodw• 15 years ago

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.

suhastech• 15 years ago

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

wes-exp• 15 years ago

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

gokhan• 15 years ago

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.

nailer• 15 years ago

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

suyash• 15 years ago

Very cool work pixelLab!

yon• 15 years ago

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

AshleysBrain6• 15 years ago

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

statictype• 15 years ago

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.

winter_blue• 15 years ago

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

manojlds2• 15 years ago

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

kaichanvong• 15 years ago

Sadly does not work on my iPad 1.

kibaekr• 15 years ago

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.

perssontm• 15 years ago

Sounds like http://markup.io

alpb• 15 years ago

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

robgough• 15 years ago

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

JunkDNA• 15 years ago

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.

imajes• 15 years ago

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.

wanderful• 15 years ago

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

zupreme• 15 years ago

On my iPad it just stops at 73%

petercooper• 15 years ago

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

lusr• 15 years ago

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

opendomain• 15 years ago

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.

ccanassa• 15 years ago

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.

filipemonte• 15 years ago

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

ofca• 15 years ago

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

pacomerh• 15 years ago

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.

tete3• 15 years ago

Haha, IE TLD. Funny! :)

diarmuidie2• 15 years ago

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

tete3• 15 years ago

Because of the IE from Internet Explorer?

patrickk• 15 years ago

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

hopeless• 15 years ago

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.

simonswords82• 15 years ago

As a reference to Internet Explorer (IE)

AshleysBrain6• 15 years ago

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

janus• 15 years ago

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

MatthewPhillips• 15 years ago

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.

Tloewald• 15 years ago

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

etherealG• 15 years ago

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.

AshleysBrain6• 15 years ago

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

MBCook• 15 years ago

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

drhowarddrfine2• 15 years ago

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

bdg• 15 years ago

This is what I end up seeing, chrome 16:

http://imgur.com/oNgoZ

wildmXranat• 15 years ago

How is Firefox 7.01 an old browser, huh ?

saturdayplace• 15 years ago

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?

WesleyJohnson• 15 years ago

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

forrestthewoods• 15 years ago

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.

pstuart• 15 years ago

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

hornbaker• 15 years ago

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.

waterflame• 15 years ago

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

msftguy• 15 years ago

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

Microsoft launches an HTML5 version of Cut the Rope

Related Stories