Node.js Node.js Interactive Europe 2016, 24 Sep 2016

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Programming for the NES with JS

Description

Programming for the NES with JS

The NES (Nintendo Entertainment System) still is the favourite retro console in the hearts of many of us. What if I told you that you can write software and games for it using Javascript? (live demo included)

A

Okay, so I'm doing a talk on the nez, this device, a Nintendo, Entertainment System, who of you, doesn't know the Nintendo Entertainment System? Okay, it's probably the greatest console ever made and I'm, not exaggerating here.

A

It's a it's Nintendo's. First, a video console that went to your European and US markets. It has all of the classic games. Super Mario, one two: three: the games you all probably have seen or were jealous off of your friends. It all has it all. So without further ado, let's start to talk. Oh there we go.

A

Okay, let me just switch to the nez.

A

Is it working is it working is a red light? That's a good thing. Oh.

A

This is so exciting.

A

Yes, so just try and turn it off and on again right.

A

Yeah, that's that's the classic thing and like if it doesn't work, you yeah doesn't actually do anything. It's just. Oh man, I tested it just before and it was working so I think I'll just have to use an emulator that sucks the cable is plugged in everything is plugged in I can even show you Super Mario working, but it's not working. Okay. Well, that's fine! I'll! Just use the the other thing. Maybe I can building this. Does it work? Nah? Okay, fine, nevermind, yeah!

A

Well, if you really want I can show you afterwards or you can go online and find I. Did this talk another another time somewhere? So you can just look at that. It was super, exciting, really trying to say this, deadpan okay.

A

So this is an S ROM running on my emulator and I'm, going to talk about the next thing: programming, the nez with j/s and you're, like what javascript don't run on a console or not on a Ness at least you're right. It won't it's super slow and you will never well.

A

If you do congratulations, you have spent a lot of hours and nothing worthwhile, but I can I'm going to show you a bit on why I started the programming, the nez and how you can also do that with the Apes abstract, syntax tree analysis, yeah, okay, so I'm Fritz I am NOT. A computer scientist I did not do anything. Informatics related I did social sociology at the University and some soil erosion, so naturally, I ended up in engineering right. I I do a lot of things. Besides programming I am I.

A

I could enter a job title for this conference and I entered Boulanger, which is the French word for Baker I recently started sourdough bread, baking and I loved it. So I do that. I am also in a band called cheese's of Mexico. You can find us on cheese in Mexico two-column, of course, but I work for a company that does the stuff and I program the stuff and now I'm transitioning into teaching. So you'll soon find me at a local, Technical, College near you.

A

If you're in arnhem, okay, there you go so this is me: I've got 99 raper repos, but I ain't finished. None like I've got all these projects on my github and you probably have some projects as well, but I actually tried to finish this. One and I didn't really do that yet, but I I got the slides, working and I got this talk working. So if you are like that, don't worry it's fine!

A

It's it's actually very good I'm going to say something about that: okay, so I'm going to talk about three things: I'm going to talk about constraints, doing new things and I'm going to show you a little demo if I still have time. Okay, so I, really like constraints, and especially the Ness constraints, are very this. This device is one of the most constrained devices you will ever encounter. It has a 1.79 megahertz CPU that runs six of 6502 assembler.

A

If you don't know that that's not a problem, it's a very old version of assembler, which also ran in the Commodore 64 and some some other old computers. It was very cheap at the time, still is very cheap. You can buy it for ten dollars, you can buy a 65 or two CPU. The nez had a audio processing unit in it, which is really perfect for synth music. So if you into synth music, you can do four channels of like saws and triangles and then one the channel of beats. So those sounds.

A

You know the Mario sounds, but that wasn't really a big thing. I mean the cpu, an APU Wow. If we've got a CPU now, but it's still very slow, so in 1985 that wasn't special at all. But what what was very special was the PPU the picture picture processing unit.

A

It ran a little bit faster, but it also could show sprites so eight by eight pixel images and it could stitch it together and it looked like a little person was walking and could animate and it could do scrolling of backgrounds so either horizont or vertical alright.

A

So it also had only two kilobytes of RAM yeah, just going to say that stop there a resolution was 256 pixels by 240. If you had a pal mez, so if you're on ntsc, so all the northern American countries had NTSC as a TV system, it was 224. Pixels NTSC ran at 60 Hertz, so that 60 frames per second and PAL ran at 50 Hertz per second.

A

So if you have a cartridge which isn't region locked- and you put it in like an NTSC cartridge- and you put it in the European nez- it will run slower. The music will be running slower. It's super funny.

A

It only has 64 colors and when I say 64, colors I actually mean 56. It's not because I could can't count. It's because they're like seven shades of black on an S so and yeah /, /, /, sprite or per trial. You can only show three colors, actually four colors, but one color is a background color. So that also doesn't really count and when I mean a sprites color. That's this one! So if you look carefully, most games will only have three colors per character.

A

So Mario only has three colors Mega Man did something special and has more colors, but I mean Mega Man so and there are only eight buttons on the nez there's a left/right up/down select start ba and you can do everything with it. It doesn't have a keyboard, nothing, it's just very simple device. Then it can only show eight sprites per scanline. Okay. So when I say sprite, it's not this whole image. It's just this little tiny part, because this is actually four sprites.

A

So if you have something like Super Mario, you will have Super Mario a Koopa I, don't know some something else, and if you would have more than eight sprites per scanline, it would leave one out. So some programmers would start flickering. So you could see it at some frames, so you would have the feeling it would still be there.

A

Then there's a Ness ROM. You probably downloaded these things very legally at some, not dodgy site to run in your emulator, and that is actually a combination of a character and program. Rom and I can probably show you this. So, on the one side, it's the character bomb. On the other side, it's a prog-rock. Okay, so constraints are really cool, but they also really suck so I'm going to switch to normal presentation slides now and not something on the nez, because you know it just doesn't make sense. Okay, here we go.

A

Where was I okay, so who a few knows which game this is from Super Mario, 2, okay, and on which platform did this particular image? Come from? Super Nez? Okay? Yes, super Nez you're still with me, okay, so what was this game originally called?

A

Dokie? Don't keep at it? Yes, you, sir, earned a one-up okay. This is what it looked like on the nez, so you can see a lot less colors and no animation, because you need to cram all that information into 8 kilobytes of the rant of wrong. Okay, so constraints are also the bomb because constraints make you think about systems or devices in a whole new light. You need to work around these constraints to get something done so this game.

A

Kirby's Adventure is the most astounding piece of work made on the nez because it could had save games. It had all these colors and it would still run smoothly it. It's perfect. So why I talk about constraints is because I think they're beautiful twitter has. It has constraints of 140 characters per message. Some people use these Twitter messages to create a very long blog, but I don't think. Twitter was meant for that.

A

Another form of constraints is emoji, like you can only convey so much in one emoji right and programming is a very big constraint. You only have 4 if you have some keywords that make you like. Let's say it's 20 or 30 keywords, if you're very lucky or very unlucky with a strange language, but with those constraints you can make anything sort of right, so I, love constraints.

A

This are all the images that are used in Super Mario Super constrained. You can see that they really had to be creative with creating the game. For example, if you look really closely, you can see that the clouds and the bushes are the same.

A

You can't see that on here, but if you play the game, you can see the clouds and bushes are the same. A combination of sprites just a different color, so super creative, and you don't actually see it. Unless you see it, you know so now you will never unsee it okay, and why do I talk about constraints because we encounter them every day we can encounter them in browsers.

A

It is ie I mean we have to work around I eat not so much anymore, though, but it is a constraint and we have clients that set boundaries for a budget or for date, or they want to do certain things and we're not always aware of it, but we always have constraints so try to find wherever you are to try to find out what your constraints are and yeah and see.

A

If you can work with that, if you're really into constraints, you should also check out manic Lawson's talk about constraints, I put here in the link, so you can go to it. Ok and now I want to talk about doing new things and I used the background. Image is a new game or relatively new nez game that came out like in the last few years, and we actually have the Creator here, Destin yay, so these games are still being made and I think that is very cool.

A

It's it's a very strange niche market, of course, but it's it's still happening and why do I want to talk about new things, because we have brains, of course, and our brains, the you know, you're told that a once or 25-man your brain capacity will only go down. This is the highlight for you. This is it which is true in some way like it won't mature anymore, but there it doesn't mean that your brain is is done. It still can learn new things and it can learn these things very quickly.

A

If you keep learning new things, it's actually the more you learn new things, the more you can acquire new things, so actually fun fact is that if you have done a lot of new things on a day like met new people or been in a new place, if you go home that day or it's our I, don't know to your hotel and you learn your you pick up your textbook or your the language, you're learning. You will store that information better, because you did a lot of new things now already expanded your brain.

A

So if you go home dive into your textbook and try to acquire all that knowledge and when I do talk about new things, I also talked about not embedded here. People usually say this as a bad thing like well like not invented here, means that you have to recreate everything, because you think you don't trust other people's work, something along that line right so I, actually like it reinventing the wheel, not because I think the wheel, sucks or because I think I can do better, but it's a very educational experience.

A

So if I write my own friend and framework or back-end framework, it's not because I think I can do better, because I will never use my own stuff in production. I know how I code but I, know I, know I now know what those layers of abstractions mean in other frameworks and I know what kind of problems I need to overcome.

A

I already said that said that just now I said removing abstractions what I mean with that is sometimes, when we think of a back-end framework. It's just like this thing. Where you you toss data at any stuff comes out. Okay, so I have a kind of an abstract way of looking at that, for the same was for me with a sourdough bread making. It was like okay, well, there's this yeasty thing and smells a bit and you toss flour at it.

A

The oven, okay done, not at all it's a lot of work, but doing that thing starting to acquire that knowledge about that, removes that abstraction from it, and you can actually have more respect for people like bakers or plumbers or web developers or designers. If you actually learn to do this thing, it will remove the abstract thought of what it is, and you will learn more about it if you are into that I also linked another post over there.

A

What I also learned was open-source is very great because I thought I was being very original. I was like okay, I'm doing JavaScript and doing nez. Oh yeah I must be so cool, not right now, but that wasn't the case there were. Lots of people are actually already doing this, a lot of people who wrote emulators, but there were also some people writing stuff to actually make the games themself. So I found this one guy called Michael Matuszak he's in LA, and he did like most of the work for what I am showing you.

A

He brought this abstract, syntax, syntax tree analysis of JavaScript and then replaces all the JavaScript with nez assembler I'm, going to show you in a bit and it uses falafel, which is pretty great library. So if you want to get into F check, syntax trees, try falafel it's pretty fun and also, if you want to get into the chip music on the nez NPM install and as the assembler and Leslie sound, because you can then make your own chip music. Yes, I can see that judo is like yes, yes, yes, yes, yes, let's do this!

A

Okay, so demo time, I create a little package called UJS, because I also did this talk at another conference. So sorry about that- and you can see here- there's a few scripts- this one compiles the JavaScript too or analyze it and then outputs an assembler file. This one compiles the the the ROM. This one creates images, and this one just runs everything and then runs the what bigger. Yes, thank you Thank You Thomas. How much bigger like this?

A

Like that? Okay, there you go! Thank you. So, let's just run npm run built right, so it does start compile and runs the emulator. So in all, if all goes well, yes, there we go. My background. Algorithm is kind of slightly off. You can see it shifted, but I made this. This this is a made from a javascript file. So let's look at the JavaScript file. Oh close it okay. So this is the JavaScript file it as a header reset is basically like HTML and CSS right.

A

Then it says background palette, sprite palette and we're going to actually change the palette. So you, what you saw was a light green background right. Let's try a different background. So give me a number code. Please sorry, twelve! Are you going to see that it's like being in blue? Okay, I'll? Try! Okay, let's do this! Okay, thank you item 12 boom npm run build it's blue there we go.

A

How am I doing on time by the way, how much more time 12 minutes, whoa? Okay, so um I can do some more demos if you know which game this is from, you can get the power block or the would equal this, the upgrader I, don't know we call this the mushroom, you know. Does anyone know which game this is from?

A

No it's! Yes, mr. gimmick this is one of the various games on the planet. You will, if you find a cartridge like this, you will you like it's worth $2,000, so yeah, oh yeah background, so I was talking about you. Could you still get the one I mean Dustin? Is cheating he's an s developer?

A

Anyone else want to once the POW block. Yeah there you go. Sorry I almost hurt you, okay backgrounds, so I use this bad I use this tile map editor I, like cold tiled.

A

There we go so I made this. This is the background you just saw. Remember. I can show you again. So this is the background only with eye messed up the algorithm, and this is the foreground. So this little dude does not have anything to do with backgrounds. Okay, let's so go back to the background and, let's add some more J's logos, because who doesn't love J is? Am I right? Am I right?

A

Yeah, okay, so save close this one and I actually wrote something that extracts the CSV data from the T, the tile map file, but it wasn't working this morning, so I'm just going to go like this copy paste so copy all this data. So this data is just like the tiles the number is corresponding to the tiles in the image we put that somewhere here and then we have all these ingest logos. Everything goes well.

A

Live demos, I'm, sweating, sorry, okay, Jas, logos, okay, let's do one more thing! Thank you by the way. Let's do one more thing and that's change the sprite so do sprite swap so I use. This image is the input to create the character, ROM and I. You see this little dude is oh well, I close it. There is this little dude yeah everyone following yeah, okay, so let's swap that with Kirby, so we boom select kirby there we go paste, it put it in the place of the other guy or girl by the way. I'm.

A

Sorry think so, not yes,.

A

Okay and if all goes well- oh now, we first need to run the image. Processor. Okay, run the image processor. Now we have Kirby yay.

A

Okay, okay, now I need to hurry up. Okay, takeaways what I take away from this experience see an assembler are totally learn about. I do not have a background in computer science or something like that. I did not know how chips worked. I did not know binary. Accounting I did not know bit swapping byte. Swapping I did not understand all of these things, but I could it was really easy to to learn these things when I dug into this?

A

It's also the removing abstraction I thought it was this huge big problem I need to solve, but it's it's not it's not that I can actually do exa decimal, counting now, which I think is pretty cool. What else it took away is that strong community draws people in so the Nets deaf community is super super nice. You go to the forum, you post something online and your question or something within a day. You will get a response with someone explaining to you.

A

Okay, this is how it works, and sometimes I mean there's always trolling on all forums, but usually it's it's pretty good and it really helped me to get to keep going with this, because it was a kind of a difficult project. It took me like a few months to get this this thing going, but it really draws people in and always lower the barrier to entry I went to some blogs than they explained to me, how to run the nez Center, but they didn't explain how to install it or where to find it.

A

So I was I, don't know. I felt, like I, was running in circles, trying to find these things.

A

But if you do come across things like this write, a blog post about it, share it somewhere and the next person after you will not run into this barrier, hopefully and constraints force. Creativity, I think that's one of the most powerful things. I've learned yeah about that and also nest dev as really cool people like Dustin over here then I want I want to thank some people.

A

These are the guys that wrote the libraries I used and I mail, some I emailed Michael, Matuszak back and forth about using his get to 3po, and it was all fine. So thank you. That was my talk.

A

And I don't know if I have time for Q&A. Let's see, I'm I actually have no idea like five minutes yeah. If anyone has a question or an answer or just wants to play, supermario online is there like over here. That's also fine! No, no questions! Well! Yes, oh this, where I found this goodness well this one. My dad bought this for my brother and I when I was 12 and he it's funny like the PlayStation, 1 or 2 was already coming out.

A

No PlayStation 1 I'm, not at all I'm, not that young so and he bought us this on a like some yard sale. It was I was really happy because, but uh you can still buy them on eBay or like the Dutch version of eBay mark class. If you're around here use, marktplaats dot, NL, it's really good and you can buy it I think for like 60 years No, and this one also cost me about $60 the total shipping packaging, everything yeah. So anyone else.

A

No III had to buy a cartridge. I first had to find out where to find a cartridge like, but there's still, people making these. They make the plastic shells somewhere in the States. This guy solders made these PCB boards and have that has a manufacturer somewhere and cost about $20 to have this, and then you also need the programmer to program the ROM onto this thing, but there so there also other alternatives.

A

If you go to my blog, like blog fritz VD, calm, fritz VD is like Fitz VD, not venereal disease, but just it looks like it blog fritz, VD calm and you can find the first I think the first or second article is about the Ness yeah, okay Cheers. Thank you very much.