Making an Emulator in JavaScript?

Hello, everyone. Thank you so much for being here instead of the other very cool talk that is happening right now. I'm sorry they put us both at the same time. So if you've seen the schedule before, like two days ago or like a week ago, it actually said building a Game Boy emulator in JavaScript, so we know how that went. But basically, that was my main plan because I thought it would be easy. I was like, I'll just make a Game Boy emulator. Turns out that's really hard. Who would have thunk it, huh?

And basically, I felt like a lot of the stuff that I learned along the way would make a good talk by itself, not because I didn't do it, but because I wanted to give you the best possible talk. So it went from this to just building an emulator in JavaScript. So that's what we're going to talk about. As Nathaniel said, my name is Sarah. I actually do not work at Orama anymore, but I forgot to tell them. I'm a product engineer at a company called ePilot. We're actually hiring. I mean, we're also working. And I'm from Cologne. So come join us. You don't have to join us in Cologne. I live in London. It's fine. I mean, you can also... Cologne sounds nice. You know. Yes. So yeah. Again, I'm originally from Portugal. I lived in Berlin for five years. Hate the airport. But that's about all you need to know about me. Thank you so much.

Okay, I want to start the talk by saying that what I'm going to show you is definitely legal. And there are two reasons I put this slide. The reason one is that I always wanted a slide like this in talks that I did. But the reason two is that I think there is a very big misconception about emulation and the fact that it's illegal. And I don't know how in many countries it has become legal or what's the precedent. I know the one in the US. I am not American, but I feel like we're all American in a weird way. So there you go. So in the US, back in 2000, there was a company called Bleep. I swear to God, it's a real company. And they named it Bleep. And they made a PlayStation 1 emulator for Macs, of all things. And they asked Sony for their bias, which was a proprietary Sony thing, so they can make the emulator. Sony said, nine. And they were like, okay, then we'll just make our own. And they made the emulator, released it on MacOS. And there's videos of Steve Jobs being like, we can run video games on a Mac. Not anymore, but you could back in 2000. Now you need a Linux. But yeah. And then Sony sued them. And they were like, you can't do this. And turns out they couldn't, because they didn't have any proprietary code. So we counted it as reverse engineering, which is usually protected by law. If you're wondering what happened to Bleep, Sony bought them and killed the emulator. But they made a crap ton of money. So that's nice. Cool. I'm not a lawyer, though. So don't fuck with Nintendo. Like seriously, don't fuck with Nintendo.

Okay, what is emulation? So emulation, I'm going to say it as, emulation is when something is pretending to be something else. So my computer pretends to be a PlayStation 1, whether that be through software or hardware. And it can be, it's mostly used for video games, but it can also be used for actual operating systems. Like, I think you can run Windows 95 in the browser, which is cursed, but why not? If you can do it. Everything that can be written in JavaScript will eventually be written in JavaScript. I guess TypeScript now. But yeah. So let's say you have this computer, and this computer is like, no, I'm actually a PlayStation. So it can read that code, interpret it, run the instructions it's supposed to run, and do the thing. There are two types of emulation, though, and I want to make sure that we know the difference in what we're actually going to be talking about. So there's hardware emulation, and let's say that you actually know how to make chips. Right? You have that fancy software and you ship everything to the one company that sponsors all the YouTubers. And that's basically, let's say you have a chip for a Game Boy, and you made the exact same parts, so we can actually read the game. It's hardware emulation. The hardware is exactly the same or very similar, just not made by Nintendo, or Sega, or whatever. But this is not what we're going to be talking about. If you are interested in this, something that exists right now that is the most known is called FPGA, and you can buy devices of that. And it's a different type of emulation. There's also software emulation, and that's what we're going to be talking about.

So that's when you give your game file, which is usually called a Rome, or whatever file. Sometimes it's 10 files. Sometimes it's a zip file. But so you have this file, you put it in, and the software is basically like, oh, I know what this is. Let me try and do the exact same thing that this console would do. So that's software emulation. And that's what we're going to be talking about. I'm not going to teach you how to build chips. If you can teach me how to make chips, that would be great.

Okay. So why do it in JavaScript? Why not? Like, I don't it's the worst language, I mean, it's not the worst language to do this, to be fair. That would be CSS, probably. But like, it is a terrible language to do this because like, okay, emulation runs on a very low level. You just shouldn't do this in JavaScript. But I like building curse things. Like curse shit brings me joy. Things that shouldn't exist. And like JavaScript emulation, it just kind of shouldn't exist, right? Cool. Okay. Now, instead of doing an emulator of a Game Boy, which would be way more interesting, and then I could actually bring a Game Boy, I didn't do that. I made an emulator for something called Chip 8.

So Chip 8 is a very old console from the 70s. And the reason I made it for this, and you probably never used, never heard of it, is like literally Chip 8 is only known to people who make emulators, because it's like baby's first emulator. It's very simple. So it's like the first thing you learn how to emulate so that then you can go into greener pastures and get sued. Chip 8 is not gonna sue you. It's open source. But also there's a very big reason why people use Chip 8 is like all of these specs, like what every instruction does is actually documented online, like literally on Wikipedia. So I think it was made in France. And so basically, you don't have to do the reverse engineering, all of that stuff anymore. You can just look at it and be like, oh, this does this, this clears the screen, for example. So it's much easier to get started, understand how the other concepts of emulation, when you already have all of this, right? Probably. I don't know.

So most software, most software, most like game consoles, computers, whatever, iPods, iPods have four parts of it. You have the hardware, and the hardware can be like the Rome, the RAM, like the CPU, all of the little wires. You have the screen. And yeah, you have the screen. Sometimes. Sometimes you don't have a screen. You have a keyboard or a gamepad. So in the case of CHIP-8, you have a keyboard. That's why there's a keyboard. And you have sound. OK. So two things is, I'm not going to talk about the keyboard and sound, because the only sound that CHIP-8 makes is like one beep. Like, it only makes like beep, and that's it. Like, you just have to make one sound when it tells you to make a sound. Like, there's no modulation or anything. And the keyboard is just like, you know, ad event listener.

And the keyboard is just like, you know, ad event listener. Like, window ad event listener when you click the K key and you do the thing. Yeah. So these are the four parts that are usually like standard across pretty much every console, every computer, everything. And of all of these, which ones do you think makes the most sense to do in JavaScript? Probably the screen, right? Like, we have Canvas. That makes sense. Like, that's actually a good use of JavaScript, unlike the beeps and the boops. But like, only the beeps. No boops. Only one sound. So screen.

When I was starting this talk, like, when I was starting to write this emulator, I thought that, like, okay, let's say you have a Game Boy game and you want to put Super Mario in it. Honestly, I'm just going to refer to Sega now. Makes me feel safer. Let's say you have a Mega Drive game and you want to put Sonic on it. I thought that you would, like, have to draw Sonic in the Canvas. And that was honestly, using Canvas is more scary to me than building an emulator. Like, I just, no. It's not. Turns out that's not how it works. Like, this is not the case here as much because, you know, it's monochrome and everything. But let's say you are doing this for the Mega Drive. Is that the European name? Yeah, that's the European name. The Mega Drive slash Genesis, if you're from the U.S., it uses sprites. So you actually just have to, like, get the sprite and put it. So it's easier. You don't have to draw the sprite. You just have to get it. And that's so much easier, because now I don't have to write code for Canvas. God. Okay. The screen for Chip 8 is very small. It's 64 by 32, which is basically incomprehensible to us anymore. I mean, I also have really bad eyesight, but I refuse to wear glasses. So that may be it. I'm not sure. To be fair, I did use glasses ever since I was two. Turns out I used to walk around the house with one eye in the middle, and my mom thought I was, she sent me to a witch. The witch told her to go to the hospital. You should visit Portugal. It's great. So 64 by 32. And it's monochrome. Which in today's age doesn't mean it's black and white. It means you can only have one color. So you have whatever background you have, which is basically just a canvas, and then you have one fill. It can be orange if you want. That's up to you. I'm not going to do it. I'm going to put white.

But yeah. That's the screen. So pretty simple shit, right? Stop. Not very ladylike. Okay. So you export a class name called screen, and you pass it a scale, because again, 64 by 32 is imperceptible to the human eye. It's basically nothing at this point. So you pass a scale, and you pass a canvas element, which is a normal canvas, HTML canvas element. This was originally in TypeScript, but the code got too big. So I removed the types, but it's an HTML canvas element, and the scale is an integer.

Okay. So then you create this.display, and you create an array of the cells times the rows, which is 32 by 64, and you just fill it with zeros. Which means this is not filled in. Because you only have one. It's either on or off. Right? So you can just create an array of zeros, and then when there's a one, you're like, holy shit, I need to turn on this pixel. And then you have the scale, canvas, blah, blah, blah, and you get the context. That's very standard. Okay. And then you have this.colors. So you can pass colors if you want. Otherwise, it's just a fill. It's black, and the background is white. I mostly did it backwards, but sure. And basically after this, all you need to do is multiply the cells and the rows times the scale. Right? Does this make sense so far? This is the part that should be done in JavaScript. So yeah. And then you get a canvas, and then you can create something called setPixel. And if you pass in, like, which column is it? Which row is it? Oh, this should be the other color. That's cool. Cool.

So now let's talk about the CPU, and this is the part that's cursed. And I don't think you should do it in JavaScript. Nor TypeScript. Nor. Wow. Okay. So the CPU has 4,096 memory locations, and all of them are 8-bit. What does that mean? It means it only takes a number up to 255. So if you've ever played really old older games, I mean, it kind of still happens today, but with obviously bigger numbers. And you got to something of 255, and then it went back to zero. That's why. Because it couldn't do bigger numbers than that. So it was just like, you know what? No. It just went back to zero.

It also probably means that you've got a European game. So 16 8-bit data registers. What are data registers? They are little parts of the hardware that can actually keep data in it. So you can access that data. So let's say like a high score. Like you can always access that high score, for example. So this is a game. This is Breakout. How do you think this looks if I load it into the computer? Because my thought was, as a baby dev emulator. No, the opposite. Wait, a baby? No. Whatever. Whatever they said that I couldn't hear. I also have bad hearing. The point is, I'm just not a very good human in general. So like, this is what you see. So when you load it, as someone who didn't know what the hell they were doing, I thought I was going to get the code. Which in this case, I think it's like Z80 assembly. And I thought I was going to have to parse the Z80 assembly. You know, like Babel. Or something like that. But no. No, no, no. That would be too easy. So what you have to do is you have to transform all of this thing that you get into a unit eight bit array. And this is how they look. This is the exact same game, but in a unit eight array. And you get to a point in your life where you're like, TypeScript can't help you here. These are just numbers at this point. You're like, I don't know what this does. But you can figure out.

So one very important thing is that like, two things, not one, two things that are very important when you're learning how to make emulators is exadecimal notation and bitwise operators. So we're going to talk about exadecimal notation first. And I'm going to calm down for a bit. There we go. So exadecimal notation.

Why even use it and what the hell is it? So exadecimal notation, instead of going from zero to nine, which is the decimal way, it goes from zero to F. And I know this brings you back to like 11th grade or whatever you call it where you're from. But like the year before the last year of high school where they put letters in your math? It's basically that. It's just basically that. They put letters in my math. And now I'm putting letters in your numbers. So why do this though? Like why? The thing is, older computers and systems had very low space and memory and just very big constraints. So writing F is better than writing 15. It's one less byte. And you want to save all the bytes that you can. So that's basically it. That's the main reason why it exists. And you can, you know, I already said this. But hex colors, that's where the name comes from. So let's look at white. So white is FFFF. And for a number to be a max of 255, you can only have two bytes, which are the two letters or two numbers. It can be two letters or two numbers. Each one of them, you can call it a nibble. There's other names, but I like the word nibble. So you've got three sets of two nibbles, right? And how do you transform this into decimal? Math. So we're going to focus on one, and you have one F, two, and then second F starting from the right, so we start at the yellow one. Okay. What the fuck? Okay. So F is 15, correct? Yes, Sarah. Okay. And this is a hexadecimal notation, so which means it's 16. It's from zero to 16. So you multiply it by 16, and the power is how far away from the right you are starting at zero. So the first one is 15 times 16 at zero, right? And the second one is 15 times 16 at the power of one, and what does that give you? That basically gives you 15 times 16 plus 15 times one, because anything at the power of zero is one. So you basically get 240 plus 15, and what does that give you? I know. I'm serious. 255. So if you add all three of these together, you get 255, 255, 255, which is the color white. So basically, hex notation is very well known to us. We just don't think about it as such. Actually, I had this entire three slides trying to explain hex notation, and my partner was just like, why not use colors? And I'm like, the colors? Oh, the colors, dear. Yeah, so some people can even tell how much of green something is by the hex notation of it. So you just think of it as zero to 15, F is 15, from the right to the left.

Then you have bitwise operators. Bitwise operators should not be used in JavaScript. So let's say you have a byte and you want to shift this byte, or you want to combine two hexadecimal values together, and you want to get just a part of it or something like that. That's how you do it. So this is an end operator, and basically, let's say you have 12. Oh, yeah. I forgot to say this. You can only use this to show hexadecimal values in JavaScript. Otherwise, it thinks it's a string. So this will tell JavaScript, do not assume this is a string. This is a number. Leave me alone. Cool. So end will basically be like, OK, let's go to the first one. It's a one, and the other one is a one, so we're doing a one. And the second one, two and zero, they're not both the same. They're not both positive. Then we're doing a zero. Or is the same thing but different. So or is basically like, OK, one of them is a one either, and the other one definitely is not a zero, so we're doing that. And this is xor, which basically means that if one of them, both of them are positive, it will turn into negative. And if just one of them is positive, then you will be positive. So in this case, if you have 12 and 10, you will basically have two, because the one got deleted. Right. Cool.

OK. So we have these instructions. I'm in unit eight in array, and we can turn this into hexadecimal. What do we do, though? Where do we go from here? Well, we now have to tell the computer what to do. And how do you tell something with very many options what to do? You create a big switch statement. All code is a switch statement. But even like I've looked at emulators that were in Rust or something, and you're like, wow, they made Rust look bad. That's incredible.

OK. So you get an op code. Let's say your op code is FFFF, right? And what this means, like when you're doing this, I think I can select things. Yeah. It means that you are basically saying, I don't want these three first nibbles. I just actually care about this one. There we go. I just actually care about this one. Because that one, if it's zero, it will be zero. But if it's something else, then it will keep that one. Does that make sense? You guys are catching this way faster than me. OK. So we're doing case zero. It just means that, OK, this nibble was zero, basically. Like the one in the op code was zero. Cool. And if, in that case, we want to check, OK, was the thing that we got 00E0? And if it was, then you clear the renderer. It means the game is done, or you're rendering a new frame or something like that. Was it this? Then you pop the stack. So you basically just have to do this for every single instruction. So now, this is the entire code of this, which is just a lot of the same instructions. So everything you're seeing here is mostly of the stuff that I've explained. There are some stuff in bitwise operators where you shift the beats. We're not going into that. But yeah. As you can see, these are mostly the same things that I've told you before. Just a lot of it. It's not done yet.

OK, cool. Wait. Did I never put this in full screen? Oh, OK, cool. OK. And now, I'm going to show you the actual emulator. I may have to reload the screen. So this is the actual – oh, my God. I'm not very good at this. But this is the actual emulator. This is just an image. I hope you can tell that I didn't – The emulator is inside of it. It took me a long time, OK? I had to put this in Photoshop, fake Photoshop, photopea, and make it look good. But basically, yeah.

But basically, yeah. It works. I render things on the screen, and they show up. And it works pretty OK. Not incredible, but enough. My God. For the love of God, I will get one. Thank you. We're good now. I can continue. OK. You come up here on stage and play video games. If you want to install it, I put it on npm at my name slash chippy, because it's a chippy emulator, and it's cute. You get it. You get it. It's also on GitHub under my name slash chippy. So you can install it. Do whatever you want with it. I do not have any attachment to my code, mostly when it's just a bunch of switch statements. OK. Yeah. Thank you so much. You can find the slides on the first QR, and that's my blue sky on the second. I mean, it depends from where you're looking. But, yeah. Thank you so much, and have a great day.

So I was actually about to ask, because when you were doing your slides, and then at one point you just were like, oh, can I highlight this? And then you highlighted the code. My brain had to kind of – Oh, yeah, it was reveal.js in React. Of reveal.js? That's pretty cool. Pretty cool. All right. Remember, folks, you can add your questions in, and we will go to the one – we will come back to the one that is most upvoted. Let us first talk about – so you started the talk by saying that you are not a lawyer. I'm not a lawyer, no. And you – but have you ever seen any – just want to quickly – I think the questions are moving, but have you any advice for someone who maybe wants to get into emulation, who's maybe a little bit worried about, like, what the right way to go about it is? Is there any advice just for that in general?

I mean, yeah. Don't ever provide ROMs. Like, don't ever provide games, and don't ever provide BIOS, which is proprietary to whoever made it. But in general, if it's an old console, no one cares. Like, Nintendo or Sega are not going to come after you unless you decide to emulate a Switch because it's still around. Like, don't emulate something that's still around. That's not really emulation. That's, you know. You can't do that. That's illegal. And also, I'm guessing there's something different between building something for yourself and just to learn how to build it versus building it to – Most of the things I got into problems in the last couple of – I don't know if any of you follow that kind of stuff, but two Switch emulators got copyright striked. And basically, like, a lot of the reasoning is they were making money out of Patreon for it. So, like, that's a lot of the issue is, like, if you want to work on this, you probably cannot make any money because they will use that against you. Fair, fair. But also, like, if you're making something for, like, the Mega Drive, no one is going to sue you. Like, that's all. Sega doesn't care. Look at all the weird Sonic shit you have online. If they're going to sue someone, they're going to sue DeviantArt. No, fair enough.

Fair enough. We've got a question coming in from Skulls. If hex is used to reduce the amount of bytes, why not use a base notation that takes advantage of all the letters? I think at the time this was the one that they decided upon. Honestly, I don't think there's, like – I think right now if that was an option, that would probably be used. But, like, I think at the time this was, like, what worked everywhere. Yeah, and also I feel like – and now I feel really bad that I don't remember exactly how hexadecimal came about, but I think it was a thing, and it may have been that back in those days there was a very legitimate explanation as to why. Which we don't have right now. That we don't have right now, but good history lesson that could come and be a tool next time.

What is the most complicated – this is an anonymous question – what is the most complicated emulation project you worked on? So I know you spoke about you started with – what was the name of the library again? The game that you used? Oh, I tried to make a Game Boy first one. Game Boy first, and then instead you used – I used Chip8. Chip8. Sorry, that was what I forgot. So Chip8 is, kind of, you said, where a lot of people can get started. Have you tried to go more advanced? Has there been something that's really complex? From what I've seen so far, you go basically, like, Chip8, and then Game Boy, and then you can do things like NES or any sort of 8-bit system. I have looked at how to make a Game Boy one, and I don't think that most of it will be incredibly different. I have no idea how to make sound. And, like, if you look at it online, if you go, like, Game Boy JS emulator, three-quarters of them are, like, sound doesn't work. And I'm, like, I wonder why. Like, this was the main thing that I was googling, how are people doing this? I've never really used the audio API very much. And, like, all of them are, like, yeah. So, yeah, I think the hardest part that I've tried to do was, like, when I started doing this emulator, but I think a lot of it came for the fact that I was just like, I can just pick it up, and just pick it up, just do it. You know, like, this is really old, it's fine. And I guess just being able to pick something up is a good reason to start a project.

We've got Leo, who first says this was amazing. What's the next console? Is there another console that you'd like to work on? Are you still going for the Game Boy? Oh, I'm definitely doing the, like, making it emulated in Game Boy Talk. Nice, how far have you gotten? I guess they have many more opcodes that you need to list out. Yeah, basically, so I need to go through the, so, like, so obviously a Game Boy is not open source, like chip A, but there's been a lot of people over the years that have done the work of, like, reverse engineering all of the opcodes that go in. So that's the main thing that I'm working on right now is making sure that I know what, like, all of these opcodes do and what they're supposed to do, basically. That's actually a good question, and I'm just sliding my question in here, benefit of being an emcee. So what is the process of reverse engineering a console? Maybe, do you know, like, how they go about it? Because it's not something that's publicly documented. Do people just kind of, what's the word? Just how do they reverse engineer? I think a lot of, I think, I'm not actually sure, I'm just talking out of my ass right now, but I think that, like, first of all, you kind of need to know how to make games for it, right, and then from that you can kind of see what the console is doing, because you know also what is actually, like, what it's reading, like, you know the opcode it's reading to do that, and then from there you can kind of try it and figure it out, but for that you need to model the console before, so you need a lot of knowledge in hardware, right, because you can't just make a game for, like, the Game Boy and it will work. It won't work. Like, you have to, like, make the cartridge, make everything right to it, and then you can test it. So in my, I think that's how it was done, like, you had, like, test cartridges for these things, and, like, you would click right, and you would know, like, okay, this is what I told it to do, and it clicked right. So, like, it's just a lot of people that are very good at very specific things. Very good. So if you are interested in reverse engineering, I'm pretty sure you could write a talk maybe next year and explain some of that to us. I'd actually really like it. Yeah. We got Victoria who is now kind of just asking, why did you use a switch instead of something like a map? I'm going to be honest. I like switches. I like switch operators. I think they are good. I don't think they're bad. I don't know why and when we started thinking they were bad. Like, it doesn't look good, but, like, it's fine. It's good. It's fine. Like, I think it's more readable for me to use a switch operator. And you're like, do you use it at work? Yeah, I use switch operators at work, and they approve my PR.

Nice. Come work with us. The next one, this is another anonymous. Is JavaScript fast enough to emulate consoles like a Game Boy Advanced? Game Boy Advanced, yes. Anything after 16-bit, I do not think so. There is – oh, no, actually, there is – if you use WASM, you can emulate the PS2. PCS2 has an emulator that can run on the web. So that's pretty impressive. But I think that's mostly if you use WASM. Anything above, like, 16 to 32-bit. 32-bit is – the PlayStation 1 is actually 32-bit, not 64. So, like, anything up to PlayStation is probably possible. I mean, it is possible. Anything above that, I think you would start getting into bottlenecks, probably.

Fair enough. I know we've run – we're basically out of time. And there are so many more questions that people can find you in the speakers' Q&A outside. But also, where can people just find and follow your work just in general? Oh, yeah, there was a QR code. There was a QR code. And also, feel free to follow Sarah online as well.

And out of those questions that you had – excuse me, out of those questions that you had, which was your favorite? There was someone that asked what my high score was, and I'm sorry, but I'm picking that one. Well, yeah, I can't see it. I saw it in there. Yeah, I saw it, and it disappeared. But what was your high score on it? I think it was like 10, and I was really proud. Really proud. Because that shit is like – this is not responsive. I'm going to be honest. It's not a good console. Well, 10 is a solid score, Sarah. Thank you, thank you. Thank you so much. By the way, the person who asked that question, come find Sarah to get your prize as well, and let's give her one more round of applause. Thank you.