Slashdot Mirror

← Back to Stories (view on slashdot.org)

A JavaScript Gameboy Emulator, Detailed In 8 Parts

Posted by timothy on from the behind-the-scenes dept.

Two9A writes "JavaScript has shed its image of being a limited language, tied to DOM manipulation in a browser; in recent years, new engines and frameworks have given JS a reputation as a language capable of bigger things. Mix this in with the new elements of HTML5, and you have the capacity to emulate a game console or other system, with full graphical output. This series of articles looks in detail at how an emulator is written in JavaScript, using the example of the Gameboy handheld: starting at the CPU, and (as of part 8) running a copy of Tetris."

10 of 62 comments (clear)

  1. Re:There are already tons of Game Boy emulators... by Anonymous Coward · · Score: 3, Informative

    And sure, it wouldn't support sound, but who needs that when you've got the beautiful noise of your computer fans running on full blast, thanks to its excessive CPU usage!

    This JavaScript NES emulator supports sound: http://benfirshman.com/projects/jsnes/

    Here are some other JavaScript audio demos:

    http://hacks.mozilla.org/2010/04/beyond-html5-experiments-with-interactive-audio/
    http://hacks.mozilla.org/2010/10/audio-data-api-audio-generation-demo/

  2. Your jokes are out of date. by pavon · · Score: 4, Informative

    Both sound and client-side data storage are features of HTML5.

  3. Synthesis in real time? by tepples · · Score: 2, Informative

    Both sound and client-side data storage are features of HTML5.

    I've heard of the HTML5 <audio> element. But as I understand it, it's designed for playing pre-recorded audio, not audio synthesized in real time as would be necessary for an emulator. The only reference that the page linked from "sound" makes to synthesis is in the context of text-to-speech for a textual description track. Even if you generate .wav into a data: URI, I know of no way within this spec to link multiple data: URIs to play gaplessly.

    1. Re:Synthesis in real time? by BZ · · Score: 3, Informative

      Indeed. https://wiki.mozilla.org/Audio_Data_API#Writing_Audio and https://github.com/corbanbrook/dsp.js are closer to what's needed for realtime synthesis. Hopefully it will make its way to other browsers too.

    2. Re:Synthesis in real time? by Anonymous Coward · · Score: 1, Informative

      sound_all=sound1+sound2+...soundN
      That didn't seem too hard now, did it?
      Of course, this will concat the headers as well, which you will need to not generate at this time, generate them externally to the actual data, then concat that to the front. (and likewise for the footers if there are any for .wav, would hope so...)

      And since AUDIO has a timer that you can access (well, you can with video at least), just have 2, or, you know, 8 separate AUDIOs for sound.
      This way you can alternate between 2 of them for music. Play next track 1 second before the last one to make it "seamless".
      Play sound effects on the rest of them.

      Of course, the way BZ linked to below is much easier.

  4. Re:Sound? by BZ · · Score: 3, Informative

    You might be interested in https://wiki.mozilla.org/Audio_Data_API#Writing_Audio and https://github.com/corbanbrook/dsp.js

    Not sure what the latency is, but if it's too high for uses like this, please let the people involved know? They want this to actually be useful for exactly the sort of things you're talking about.

  5. Re:There are already tons of Game Boy emulators... by AmberBlackCat · · Score: 2, Informative

    While I was playing Super Mario Brothers, the emulator in the first link was too slow in Firefox but worked fairly well in Opera. It's the first time in history that javascript performance actually mattered.

  6. Re:There are already tons of Game Boy emulators... by Anonymous Coward · · Score: 1, Informative

    On my system it works best for me in the currently Firefox 4 nightly build as it has the smoothest character motion and best responsiveness. Chrome works well but is a touch sluggish and seems to lose the key input sometimes. Opera claims to have the highest framerate but the motion of the characters is choppy, so I'm not sure that the framerate count is necessarily accurate.

  7. Vic20 in Javascript by Anonymous Coward · · Score: 4, Informative

    And here's a Vic20 emulator in Javascript HTML5
    http://www.mdawson.net/vic20beta/vic20.php

  8. Compile the JavaScript by Anonymous Coward · · Score: 4, Informative

    Saying that you shouldn't write this in JavaScript because of the limitations of JavaScript in web browsers is like saying people shouldn't write Apps in Java because Applets are limited. It's not JavaScript that is the problem per se, but the limitations of the Interpreter. If you want to write something like this in JavaScript, you should consider compiling the JavaScript instead.

    Using the Unity Framework ( http://unity3d.com ), you could write the emulator in JavaScript, compile it, and have a cross platform emulator that would work on Mac, PC, Wii, Iphone, Android, and PS3 with hardware accelerated 3d, support for sound, etc. Something like 20-25 of the top 100 Iphone Apps were made using Unity, and it is a pretty good platform for making 3d games.