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.
- 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 }
Instagod!!
w00t! I can stop working on this now. Nice work, man!
Haha, glad to be of service.
Changing the key-settings from zxc to asd would be appreciated, too. Especially for non-English keyboard-users!
This is very impressive! The more ways to play Spelunky, the better!
I thought I heard you guys talking about this… damn Skype call drops.
#WHNBM
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
Nicely done, Darius! An HTML5 port of a similarly-famous indie game will be announced at PAX Prime.
If the game is Onslaught! Arena, I’m not impressed. I can port that to HTML5 in no time :)
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;
}
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.
Awesome! I’m picky about my smoothed pixel-ness!
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.
Yeah, HTML5 gamepad support is minimal right now. Firefox supports it but that’s about all.
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!!!
Yup — when I get some time to update this (this weekend, probably) I’ll allow for remapping to ASD.
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.
Oh thanks, I caught that but couldn’t repro it!
Bombs don’t seem to remove the decoration on top of destroyed tiles:
http://i.imgur.com/ndL7f.png
Yeah that’s a known issue that I’m 99% sure will be fixed when I update GameMaker.
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.
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/
Thanks!!
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 :)
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!
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
Maybe? I just think Spelunky with touch controls would be a horrible, horrible experience for everyone…
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.
You just made Kotaku.
R U Iranian?
Iranian-American.
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?
It’s a problem for me, too. I’ll look into it!
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.
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.
looks broken in Chrome (latest version) I’m getting 404 errors in the console as soon as I enter the tutorial:
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
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.
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 >.>
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.
Performance is pretty bad. Not been impressed with HTML5 in this regard.
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 ! :)
I cant seem to buy stuff from the shop unless i roll the dice i pressed every button but it still didnt work.
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!
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
Me Too! PSH!
same here, Firefox Chrome and IE, go into the tutorial and it freezes… :/
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?
Great job! Is there any way to make this game playable on android phone?
It’s possible, and I think YoYo Games (the GameMaker people) are working on it…
That would be fantastic :)
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.
Comments on this entry are closed.
{ 17 trackbacks }