Super Mario Brothers GameBoy (and all GameBoy games) ported to HTML5 | Hacker News Reader

Super Mario Brothers GameBoy (and all GameBoy games) ported to HTML5

grantgalitz.org

162 pointspaulirish46 comments

The parent link is Super Mario Bros running fullscreen. It runs best in FF4, the audio in Chrome can be a little choppy. It will suck in FF3.6 and everything else, probably. It uses the (very) experiemental Web Audio API in webkit and the Audio Data API in FF4; it has a fallback to standard HTML5 Audio(), which has known performance issues everywhere.

You can view the full emulator here: http://www.grantgalitz.org/gameboy/

It's all on github: https://github.com/grantgalitz/GameBoy-Online

And a few other ROMS are available for play now:

* http://www.grantgalitz.org/zelda/

* http://www.grantgalitz.org/pokemon/

Nice work! As it stands, you seem to be doing pure interpretation for the CPU; have you considered dynamic recompilation? You can see this in practice for the 6502 here: https://github.com/daeken/Dyna6502Asm

In essence, you accumulate instructions in basic blocks and turn them into functions, which are then 'executed' (meaning turned into function objects) and then cached. In your case it becomes a little more complex as you do cycle timing, interrupts, etc, but there's no reason you can't bake this into your basic block functions. This drastically increases the performance of CPU emulation, while maintaining the same high quality.

If you're interested in doing this and/or have any questions, feel free to contact me.

You might want to talk to me then (Look at the user name on the github repo. ;) ). The DMG/CGB CPU needs to be emulated with clock-cycle accuracy though, so dynarec would be very difficult.

P.S.: Here's another game - http://www.grantgalitz.org/SuperMarioLand2/

Ah, my apologies -- thought that the OP was the original creator.

So, in effect what you do is take your code from `GameBoyCore.prototype.executeIteration' and roll that into your dynarec'd function on a per-instruction basis. The simpler you can make it, the better for performance; you have the benefit of knowing how long each instruction will take to execute at dynarec-time, so you can do some fun optimizations there.

Dynarec'ing cycle-accurate code is hard, but it's a lot of fun and damn efficient if you get it right.

HTML5 audio in Chrome is not at a point where it can be used for game sound effects yet. Rewinding and restarting a sound doesn't work consistently, and creating new Audio() objects too quickly crashes the tab. FF4 is great, though. Star my Chromium bug reports if you want this fixed. http://bit.ly/g9KJNz http://bit.ly/hSXvOj

BTW, just a reminder not to use shortened urls here - even if they are very long. Those urls are actually:

http://code.google.com/p/chromium/issues/detail?id=71322&... http://code.google.com/p/chromium/issues/detail?id=71323&...

And you if you had wanted them shorter just remove everything after the id field.

Nothing is ported to HTML5, you made a emulator though. Porting != emulating!

Great work!

If you want to read on about how to go about building one of these, check out my friend Imran Nazar's very detailed jsgb article series:

http://imrannazar.com/GameBoy-Emulation-in-JavaScript

Also, the source code:

https://github.com/Two9A/jsGB

I can vouch for the quality of these tutorials. It actually puts emulation within easy reach of novice programmers, as unlikely as that may sound.

Give it a go!

Without criticism of this particular project or site intended, I am surprised at the number of these emulation sites running commercial ROMs popping up without action being taken by Nintendo et al. Someone's going to have an example made out of them.

grantg, if you're just trying to show off an emulator but aren't ready to be the example, may I suggest finding a free Gameboy game to show off instead? I know there are actually-free games for many other consoles, I presume there are for the gameboy as well.

The game companies generally don't care about the really old stuff. They don't see much (if any) commercial value in them anymore.

Don't try to emulate their latest or one-to-latest console though.

Heh, nintendo certainly does. They are actively reselling these games in the wii / 3DS online stores. Expect a takedown notice soon.

Maybe, maybe not. Either the jsnes site has been boldly ignoring takedown notices for some time now, or Nintendo doesn't really care that much: http://benfirshman.com/projects/jsnes/

The UK company Codemasters takes a heavy handed approach to piracy, of 1986-era ZX Spectrum games!

I took down the violating pages.

I put up a freeware ROM test page - http://www.grantgalitz.org/gbc_demo/

Input doesn't seem to be working with Firefox 4 beta 12 on Linux...I tried the shortcuts listed under "Instructions" on http://www.grantgalitz.org/gameboy/ to no avail.

Running Iceweasel 4 beta 12 here and it is running fine on my Debian system.

There's also JSNES: http://benfirshman.com/projects/jsnes/ which probably benefits from not stretching to fullscreen.

For anyone interested in seeing this run well in a safari build on mac, please see http://chromium.googlecode.com/svn/trunk/samples/audio/bin/W...

It's a webkit/safari build with web audio in it, so audio is perfect as hell in it. :)

And for firefox, just get firefox 4 (god no, not 3.6!).

Impressively, it runs (very slowly) to the point of showing a title screen on an HTC Desire, but then I can't figure out how to send input.

I removed these pages because others here were right, in that I shouldn't be providing the ROMs, but the users themselves instead providing them. You can still use the emulator, just go to http://www.grantgalitz.org/gameboy/ and load in your own ROM files.

Sounds cool, tried it on my Droid, but unfortunately it runs at something like 0.25 frames per second.

Very nice work.

Too bad webkit browsers don't allow to turn off image smoothing like Firefox does, which makes true pixel art impossible. I'd love to see support for nearest-neighbor resampling included in the future versions of Chrome/Safari.

+1 -webkit-crisp-edges or crisp-edges

See -moz-crisp-edges @ https://developer.mozilla.org/en/css/image-rendering

The audio is messed up for me on SMB using Chrome on a MBR running OSX. Anyone else?

Horrid sound glitches on mozilla in windows 7 as well.

I'm guessing you're not using Firefox 4 then, I take it?

Edit: Firefox 4 on linux has a GC issue, not my fault.

Firefox 4 on Linux also has terrible sound.

Ubuntu has a GC issue for the canvas as far as I know of. Bitch to the Mozilla people to fix it. On Windows 7 and Mac OS X, it seems to work fine.

Works fine here... ? ff4.0b11 / Ubuntu 10.10 64-bit...

Must be hardware specific then with the gfx cards. damnit firefox.

4b11/Arch x64

Try going to about:flags and enabling web audio (if you have that option.). Doing so will allow you to use native audio instead of data uri generation in real time. Kind of like mozAudio, but for webkit.

Hmm, enabling web audio API disabled the sound completely. Oh well. Still, a very cool emulator!

If the audio stops playing after enabling web audio, then you just ran into a bad bug in chrome. :P

I've run into this bug before, it seems to be a bug with the GC possibly in V8.

Same setup, same issue.

Use Firefox 4 for OSX and all will be resolved (I have Snow Leopard on a MacBook Pro, so it better work well on your Mac too). :P

http://www.mozilla.com/en-US/firefox/beta/

I'm currently reading Masters of Doom, and I can't help but chuckle: John Carmack was doing this in 1990 on the PC platform. Back then it was considered too slow to do side-scrolling.

wow and it runs just as fast as it did back then too!

What the what I'm walking backwards?? What crazy magic is this? Super Mario Bros. should be frozen in time exactly as I remember them, damnit.

Oh nevermind, it's just an artifact of the smaller viewport.

I still want you kids off my lawn, though.

How do I get past the menu? I'm using epiphany-2.30.6-1.fc14.x86_64 which is powered by WebKit.

Anyone else seeing the site down? Or just me? Can't get to link or parent site.

See http://news.ycombinator.com/item?id=2268214

I took it down because the others posting about potential problems are right, so in order to use the emulator go to http://www.grantgalitz.org/gameboy/ and load in your OWN ROM files. Before I was providing the for you, but due to legalities, I am forcing you to provide your own. I didn't get a takedown notice, but I definitely don't want to get one, sorry for the inconvenience. :P

Thanks for letting me know. Great tool though.

Reply on news.ycombinator.com