Spelunky HTML5

by Darius Kazemi on July 30, 2012

in html5,Spelunky

So I had some time on my hands this weekend and made major headway on porting the PC version of Spelunky to HTML5. You can play it here.

A lot of people don’t know this, but the original Spelunky was made in GameMaker, and almost a year ago, YoYo Games released GameMaker HTML5 (now GameMaker Studio). This lets you take a GameMaker game and compile it to JavaScript so that it runs in a modern web browser.

In theory this should be a one-button process, but for a complex game like Spelunky it’s a bit harder.

Technical details:
  • Ripped out the entire sound system. It had an external dependency on a DLL, which clearly doesn’t play nice with HTML5
  • Fixed some bugs related to the compiler assuming the original programmer was being very careful with their GMScript.
    • In particular, in GMScript you can (though it is not recommended) do “foo.bar = baz” without checking to see if “foo” exists. It just fails silently. The compiler does not wrap this in a check to see if “foo” is defined, so JS complains when it’s not. (Note: this may not be an issue in GameMaker Studio. I’m using the last version of GM HTML5 before they switched to Studio.)
  • Repaired the rendering pipeline. For dark levels and a few other effects, the original game uses some draw modes that aren’t supported in GameMaker HTML5, so I had to take those out. I will eventually go in and reimplement them using globalCompositeOperation. For now, dark levels are not dark.
  • Made some horrible, wretched hacks for bugs I couldn’t track down. For instance, there was a bug that happened when your character spawned on the right-hand side of the level, so I hard-coded it so you only spawn on the left.

The whole port took about three hours. I’m still working on it — I need to reimplement sound, redo all the custom graphical effects, and track down some collision/math issues that are a pain in the ass to reproduce. I also need to add persistence using LocalStorage (right now it doesn’t save your scores). Update Aug 3 2012: a million thanks to the YoYo Games team for taking my three-hour port and fixing a bunch of the bugs (sound! saving! better performance in general!) and polishing the hell out of the game. I mean: look at that art framing the game!

{ 53 comments… read them below or add one }

KesieV July 30, 2012 at 1:37 pm

Instagod!!

Reply

xot July 30, 2012 at 2:55 pm

w00t! I can stop working on this now. Nice work, man!

Reply

Darius Kazemi July 30, 2012 at 3:02 pm

Haha, glad to be of service.

Reply

KMB July 30, 2012 at 6:12 pm

Changing the key-settings from zxc to asd would be appreciated, too. Especially for non-English keyboard-users!

Reply

Thedude3445 July 30, 2012 at 6:19 pm

This is very impressive! The more ways to play Spelunky, the better!

Reply

Andrew Doull July 30, 2012 at 7:00 pm

I thought I heard you guys talking about this… damn Skype call drops.

Reply

Ben Abraham July 30, 2012 at 10:47 pm

#WHNBM

Reply

Dan Bridge July 31, 2012 at 2:42 am

That is fantastic, 3 hours is not a bad little investment for a web version that could hopefully push people toward purchasing the XBLA version!

Cheers

Dan

Reply

richtaur July 31, 2012 at 12:59 pm

Nicely done, Darius! An HTML5 port of a similarly-famous indie game will be announced at PAX Prime.

Reply

Darius Kazemi July 31, 2012 at 1:17 pm

If the game is Onslaught! Arena, I’m not impressed. I can port that to HTML5 in no time :)

Reply

Vaughn July 31, 2012 at 1:48 pm

Why not a full nearest neighbor implementation?

JS:
ctx.mozImageSmoothingEnabled = false;

CSS:
canvas {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: -o-crisp-edges;
image-rendering: optimize-contrast ;
-ms-interpolation-mode: nearest-neighbor;
}

Reply

Darius Kazemi July 31, 2012 at 1:50 pm

First step is to upgrade to GM HTML5′s new compiler (actually GM: Studio) to see if it already does all that out of the box. If it doesn’t… then yes.

Reply

Vaughn July 31, 2012 at 1:53 pm

Awesome! I’m picky about my smoothed pixel-ness!

Reply

Diego Crusius July 31, 2012 at 2:01 pm

Im glad someone took the ‘first step’ to port gamemaker games to html5, since Im considering trying the same.

3 hours for a probably experienced programmer is not much (which would prob translate into 5 weeks for me hehehe) and so is highly recommendable to port all your gml games to html5 for value.

also I believe javascript doesnt communicate with joypads, right? this would be such a great next step into browser gaming! Maybe theres a simple way to use a joypad mapping your keyboard or something…

great work man.

Reply

Darius Kazemi July 31, 2012 at 2:03 pm

Yeah, HTML5 gamepad support is minimal right now. Firefox supports it but that’s about all.

Reply

RotateMe July 31, 2012 at 5:03 pm

Please please please, if you use ZXC keys without any option to change this, think of the europeans and let the Y key do the same thing as the Z key, because we have YXC next to each other. Thanks so much for the port!!!

Reply

Darius Kazemi July 31, 2012 at 5:12 pm

Yup — when I get some time to update this (this weekend, probably) I’ll allow for remapping to ASD.

Reply

RabidZombie July 31, 2012 at 5:48 pm

Fantastic!

There seems to be an obscure bug (in Firefox on Linux at least) that pushing a box (from the mines) into the wall causes you to die. You can reproduce this super easily on the reset stats screen by pushing it all the way, and then some more.

Reply

Darius Kazemi July 31, 2012 at 9:58 pm

Oh thanks, I caught that but couldn’t repro it!

Reply

RabidZombie July 31, 2012 at 5:50 pm

Bombs don’t seem to remove the decoration on top of destroyed tiles:
http://i.imgur.com/ndL7f.png

Reply

Darius Kazemi July 31, 2012 at 9:58 pm

Yeah that’s a known issue that I’m 99% sure will be fixed when I update GameMaker.

Reply

Giik July 31, 2012 at 8:00 pm

I like how you can kill enemies by jumping into them. I killed a giant spider by doing so, I dug into it and ripped it apart until it was fleshy chunks from the inside out.

Reply

Brian Handy July 31, 2012 at 10:50 pm

Joystiq linked me to the page. “Darius Kazemi? I’ve heard that name before…” only to find the writer of many an article about getting into the game industry! Bravo sir! I’m sorry Joystiq didn’t put your name in the headline, but being in the first paragraph of the article, it is on the front page right now :)

http://www.joystiq.com/2012/07/31/original-version-of-spelunky-now-playable-in-your-browser/

Reply

Darius Kazemi August 1, 2012 at 7:46 am

Thanks!!

Reply

Elrinth August 1, 2012 at 5:37 am

3 Hours to make this? Are you shitting me? I’ve been coding on my own game for quite some time now and I’m nowhere near this finished.

I’m looking forwards to play this with sound. Keep up the fking great working! You rule! ;) Oh and so does Derek Yu :)

Reply

Darius Kazemi August 1, 2012 at 7:46 am

Ha, well, GameMaker’s compiler did 99% of the work. I just fixed a bunch of errors and hacked a few things in the code!

Reply

Jacob August 1, 2012 at 5:51 am

The game actually starts just fine on an iPhone, but since no controls appear on-screen, it get’s a little hard to control. Do you think you could implement some? It would be very welcome to play on the go :D

Reply

Darius Kazemi August 1, 2012 at 7:46 am

Maybe? I just think Spelunky with touch controls would be a horrible, horrible experience for everyone…

Reply

Jacob August 2, 2012 at 7:02 am

Mayhaps. Combining onscreen zxc buttons, with pointing-movement might work. But maybe that’s not so easy to implement.

I do think virtual dpad (or, well left and right buttons) COULD work, just not very well. It works in Super Crate Box, sort of.

Reply

Lucas August 1, 2012 at 1:00 pm

You just made Kotaku.

Reply

Sina August 2, 2012 at 6:29 am

R U Iranian?

Reply

Darius Kazemi August 2, 2012 at 7:53 am

Iranian-American.

Reply

And37 August 3, 2012 at 10:15 am

Nice work – both the original version and the update with music! :)

I can’t move in the tutorial since the update (before it was working), just in the normal game. Right after I enter the door the tutorial room is displayed but only the music continues to play. (FFox 14.0.1 / XP SP3)

Is it only my problem or others are also experiencing it?

Reply

Darius Kazemi August 3, 2012 at 10:19 am

It’s a problem for me, too. I’ll look into it!

Reply

And37 August 17, 2012 at 4:28 pm

Any possibility that you’ll have time for checking it sooner or later? I’d like to recommend this game to others but not without the tutorial.

Reply

Carborundum August 3, 2012 at 1:59 pm

The new version doesn’t work at all for me in Firefox. Works well in Chrome though, although all the shortcuts are open from the get-go. Don’t know if that’s intended.

Anyway, great work! This version performs better than the Windows executable running in Wine under Linux.

Reply

Steven August 4, 2012 at 1:29 am

looks broken in Chrome (latest version) I’m getting 404 errors in the console as soon as I enter the tutorial:

Reply

Rune August 4, 2012 at 12:19 pm

1st thing: 1,000 awesome points, sir

lil’ bugs noticed:
- mattock (specif. the snake-pit one) does not vanish upon breaking?
[worked for a few digs, then stopped, but remained equipped]

- carried rock to beginning second lvl, threw it, it got stuck in mid-air

Reply

o August 4, 2012 at 12:45 pm

Very clever, but right now HTML5 feels like the “new Java” (as Java seemed in the 1990s to end-users who weren’t developers) — just a big browser slowdown. Good experiment though.

Reply

Matt August 6, 2012 at 7:22 am

As much as I like the music is there any way to mute it? I had been playing during compiles at work and am usually watching something at the same time. The music makes this impossible >.>

Reply

Theory Georgiou August 7, 2012 at 10:04 am

My first thought on playing spelunky in a browser was, “This has to be Game maker html5!” I’m glad it is, next thought was I wish I could save!(pssst I know how to develop that.) Though I understand that Spelunky has no saves cause its supposed to be challenging.

Someone had to do it, Glad it was you.

Reply

Anon September 13, 2012 at 9:22 pm

Performance is pretty bad. Not been impressed with HTML5 in this regard.

Reply

Val September 28, 2012 at 2:42 pm

Very nice game indeed and… very nice port, I guess. Three hours to make the port, you say ? Well, I guess I’m light-years behind, far in the dusty trail. Gotta code moar ! :)

Reply

Nick Wolly October 14, 2012 at 7:50 pm

I cant seem to buy stuff from the shop unless i roll the dice i pressed every button but it still didnt work.

Reply

Alex Henry October 30, 2012 at 2:30 pm

I found some bugs with this (Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4):

*Dark levels are completely dark (flares don’t provide light)
*Pushing blocks into a wall (or another solid tile where they can’t move to) will instantly kill you
*Going to the next level while holding an item (say, a rock) causes weird behavior (item doesn’t move with you, can’t throw it, might cause instant kill)
*Others, less grave

This port is probably the best free game on the web! I can’t stop playing even while getting instant-killed by those bugs or having to restart due to completely dark levels (60 deaths and counting).

Would be great to see this port evolve into a full-fledged project with a proper repository and bug tracker, it certainly deserves it. Specially with all those 1.2 and 1.3 community forks around, also without infrastructure. I myself would do it, but I’m a Linux user, so I can’t run Game Maker :(

Anyway, congrats on the amazing port – it certainly merits further development and more than a static page, so please think about it!

Reply

daniel November 7, 2012 at 7:41 pm

hey cant play it when i enter tutorial i get freeze, and when i play the normal game then it freezes every 5sec for about 2 sec…

i have firefox 16.0.2

Reply

Markus December 26, 2012 at 4:30 pm

Me Too! PSH!

Reply

Tony August 31, 2013 at 10:49 pm

same here, Firefox Chrome and IE, go into the tutorial and it freezes… :/

Reply

Anon December 6, 2012 at 4:15 pm

I fought my way to the end and I found that Olmec killed all three of the cave men at the start and I was initially unable to move. I managed to wiggle free before Olmec could reach me but he didn’t destroy the blocks beneath him when trying to crush me (and in the end he did succeed in squishing me). Is this Spelunky unwinnable?

Reply

Slawek August 20, 2013 at 3:43 am

Great job! Is there any way to make this game playable on android phone?

Reply

Darius Kazemi August 20, 2013 at 11:38 am

It’s possible, and I think YoYo Games (the GameMaker people) are working on it…

Reply

Slawek August 23, 2013 at 4:54 pm

That would be fantastic :)

Reply

vonzippenstein September 24, 2013 at 1:08 am

Love it. I’m interested in porting Spelunky to the GCW-Zero which can run HTML5. Is this source available? Would just need to scale the resolution down to 1x, swap the keys, and test.

Reply

Leave a Comment

{ 17 trackbacks }

Previous post:

Next post: