

Microsoft launches an HTML5 version of Cut the Rope - jkbr
http://www.cuttherope.ie/

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

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

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

------
sumukh1
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?

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

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

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

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

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

------
aChrisSmith
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?

~~~
lloeki
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
What did you expect?

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

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

~~~
powertower
My apologies.

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

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

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

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

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

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

~~~
mbrubeck
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/>

------
MatthewPhillips
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
Safari doesn't support WebGL either because of security issues (AFAIK only
Firefox does) so while it might be easier it wouldn't work.

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

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

~~~
zalew
you have to turn flashblock off.

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

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

------
suhastech
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
Indeed. There are levels in cut the rope that _require_ multiple simultaneous
touches.

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

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

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

------
kibaekr
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
Sounds like <http://markup.io>

------
obilgic
My mouse does not show up, chrome 17 + mac

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

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

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

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

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

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

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

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

------
andrewpi
Works fine for me on Firefox 9.0.1/Mac!

------
saturdayplace
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
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-...](http://www.google.com/events/io/2011/sessions/super-
browser-2-turbo-hd-remix-introduction-to-html5-game-development.html)

------
eridius
Very cool, runs flawlessly in Safari.

------
forrestthewoods
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
I believe the hype is for what it is shaping up to be, not what it is at this
moment.

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

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

------
shmerl
Microsoft using Ogg Theora? That's a breakthrough.

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

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

------
thristian
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_
Try this:

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

(see my other longer comment for why)

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

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

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

------
FPSDavid
Works for me on W7 64-bit with Firefox 9.0.1

------
bdg
This is what I end up seeing, chrome 16:

<http://imgur.com/oNgoZ>

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

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

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

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

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

------
wildmXranat
How is Firefox 7.01 an old browser, huh ?

------
zsiciarz
Works flawlessly in Opera 11.60/Windows.

~~~
manojlds
Really? It was so sluggish on mine.

------
kaichanvong
Sadly does not work on my iPad 1.

------
zupreme
On my iPad it just stops at 73%

------
suyash
Very cool work pixelLab!

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

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

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

------
tete
Haha, IE TLD. Funny! :)

