Final Fantasy IX in React: Fighting the Browser, One Frame at a Time

How to use ReactJS I'm a web engineer, I finished a job today, so I'm currently freelance for about a week before I start a new thing. If you want to talk to me at all, and if you have any thoughts about the talk, you can go and do it yourself. I've got Master on Butterfly website, email, all that stuff.

So first of all, I want to talk to you about some of the silly things I do. Lots of people with their spare time when they're software engineers, they build businesses or side projects or hustles. I don't. I make useless things. One thing I run is the Pride Flag API. If you've ever thought that gay pride and queer pride in general was really missing being served over GraphQL, this is for you. It's so inefficient to serve SVG Basics over GraphQL.

And then a couple of things I haven't finished doing yet, but these are like ideas I have that I want to do. One of them is like a kind of like Soviet-themed depressing pull request simulator where people like send you stuff and you have to review it. And it's like horribly sloppy vibe code and you have to review it. But if you don't get stuff into main, then your family isn't fed and it might explode. It's called Changes, Please. Thank you. Another one I'm working on is one of my favorite games growing up was strategy games, so Command and Conquer. So I'm working on a game called Command and Conquer Tiberium Jira, which is a sprite for sprite remake of Command and Conquer Tiberium Sun, except the entire build queue is managed with Jira. We do have a more accessible, mobile-friendly version that uses Trello. Sorry to anyone who uses Trello. We don't have a linear vibe. I'm very sorry.

If you want something fun that you can play today, I do have something on my website. And this is the niche-est thing I've ever made in my life. It's called Katamari Node Modules. So you can go and play this on my website. You can go to joehard.co.uk slash games and it's basically you play a node folder and you have to like move across the world, absorbing packages until you become as large as the sun. That's one you can take home with you today.

But why are we here today? Today we're here to talk about Final Fantasy. There is the old classic joke, which is how many of them do you have to make before you stop calling them Final? There are 16 of them and these are just the mainline games. There's a few Final Fantasy players that I've checked in but you don't need to know anything about Final Fantasy to enjoy this talk. This will be totally fine.

Really Final Fantasy, interestingly, they did call it Final Fantasy because the company was going to go out of business and they were like, this is our Hail Mary project. We need this to work. And then they did Final Fantasy and it became one of the most successful game franchises of all time. It's essentially a fantasy RPG that is massively inspired by Dungeons and Dragons, but via the lens of being developed in Japan. There are a lot of them. I'm not going to talk about all of them. I mainly want to focus on these three.

These three are the PlayStation 1 games. The PS1 was a weird little console that technically could do 3D graphics but not very well. Final Fantasy 9 is highlighted as the pinnacle of technical advancements in gaming. The speaker compares the technical innovations of Final Fantasy 9 to modern game development technologies.

The speaker discusses how Final Fantasy 9 was ahead of its time in terms of technical achievements. The game showcased dynamic lighting, particle effects, water effects, and god rays back in 2000. The speaker admires the technical aspects of Final Fantasy 9, pointing out its advanced features compared to modern game engines. The speaker muses about rebuilding Final Fantasy 9 and suggests using game engines like Godot, Unreal, or Unity for easier development.

The speaker acknowledges a team's effort in rebuilding the engine for Final Fantasy 9. The team, known as Memoria, aimed to improve the game's performance to run at 60fps. The speaker discusses utilizing high-resolution assets and a strongly typed language like C sharp for an easier development process. Despite not following the recommended approaches for rebuilding the game, the speaker appreciates the advancements made by others in enhancing the Final Fantasy 9 experience.

So Unreal Engine is like the most powerful, you know, most popular video game engine you can get at the moment. And they're always like oh we can do dynamic lighting, we can do particle effects, we can do water effects, we can do god rays. Final Fantasy 9 did all of those 25 years ago. Look at that. That's dynamic lighting as he wanders around the room. Also, I do love the kind of UX of 2000 where you go you're this thing with a giant pointer, it's very fun. It also had wonderful particle effects. Look, it's a snow, it's a quite low res snow storm, but it's a snow storm, it's doing all of it.

And then this is from one of my favorite scenes where you can see the kind of bubbling water in the right-hand side, fluid dynamics in 2000, it's amazing. And then this lovely scene of god rays, so eat your heart out Unreal Engine, we've got all of that there 25 years ago. So if we sat down and we were like we want to rebuild Final Fantasy 9, which is what I wanted to do, there are good ways of doing it. I did not do these things. A good way of doing it is you should use a game engine. You should go use Godot or Unreal or Unity, they have loads of stuff built in there that will do all the hard things for you.

I'm not going to do that. You should probably use the high-resolution assets that come with the kind of quasi remaster that came out on PC, and you should probably use like a strongly typed language like C sharp, because it will just help you make it a lot easier. The reason why I know this is a good way to do it is because a whole team of people have done this, it's called Memoria, and they basically just rebuilt the whole engine, because they were like this is naff, it doesn't run in 60fps, we're going to build the whole thing. So I didn't do any of that. Instead I'm going to start entirely from scratch. I'm going to do it using all of the original PlayStation 1 assets, and I'm going to do it just using React, JS, CSS, and then one other library I'll talk about later.

The reason why I did this is I just thought when it comes to these kind of side projects, doing this kind of thing and choosing these kind of technologies is just significantly more painful. And pain-driven development can drive you to places you never thought you would go. So I want you to cast your minds back now, imagine we have all the technology we have today, React, everything, and we go back to 1998. We're on the team that are developing Final Fantasy 9. It's not just we're moving in time, we're also moving in space. We're going to go to the Pacific island state that developed Final Fantasy 9, which was actually Hawaii, weirdly. And they set up a brand new office for this project. They got one of the old guys who worked on Final Fantasy 1 through 6 to go and work on this project, and it was going to be this massive success. Spoiler, it sold really badly and was terrible, and they massively regretted it. But it is now particularly kind of nostalgic for the people. And you get there, you're in Hawaii, you've had a lovely day at the beach, and you sit down at your desk and you turn on your dev machine. Just a little hit of dopamine for the millennials in the room.

So the Playstation 1 was a wonderful little console. It had a 33MHz CPU, the equivalent of a 2.4Mb internet connection via the CD drive, and it had 1MB of VRAM. The original version of this task was I was going to try and reduce the browser VRAM to 1MB, and try and run something, and it can't. You just can't even render HTML doing that. It's a horrible, horrible time. But so, these are our constraints. This is what we're working with. This is what they had to try and fit their vision into. And Final Fantasy 9 had three modes of playing it. There was this overworld one on the left, a city view, or an area view in the middle, and then a battle in the right-hand side. I'm not going to do the left one because that's boring, it's just a 3D world. We're going to do the other two. So we're going to start with the more exciting one first, we're going to do the battle view. So imagine it's 1998, they have Figma for some reason, and they've brought you this design. And you're like, okay, I'm going to have a look and try and spec this out. There's clearly a sort of list of things here, there's a list of things there. And we can do a lot of that with just HTML.

And we can do a lot of that with just HTML. Look at that, we've done it, we've made Final Fantasy 9. Okay, no. So we have to style this at least a little bit. But we've got, also, I spent way too long debating whether that should be an ordered list or an unordered list. Please don't be angry with me if I chose the wrong one. But we can style the vast majority of this with just using CSS and HTML, and we get close to most of the UI there. This is using some old techniques that are now, you know, if you're just using some UI library, you probably won't do most of these things.

But like, you can make the one on the left by doing a lovely border image, and then you splice it the old ways. And then, so what's really interesting is working with the browsers. The browser's incredibly helpful. It's trying to do lots of stuff to get around your bad choices. So like, with this, I wanted to pixelate, now this isn't going to show up on this screen, but trust me. This one on the left is more pixelated than this one on the right. And that's because the browser, by default, wait, those are meant to be swapped around, sorry.

So the browser, by default, if you upload an image, it's trying to smooth it out. You've given it like a hundred pixels for a hero image, and it's like, okay, let me sort that out for you. But I don't want that. I want it to look like a PS1. I want it to be blocky. I want it to be 320 by 240. You can do this by saying image rendering pixelated, and it will turn off all of that filtering, which is what we want. And then also, because it's HTML, you get a lot of stuff for free. So when you want to have that little pointer that I mentioned earlier pointing at things as you kind of tab down, you can just use a focus effect. So you can just do, like, button focus, after, and then render a little thing there. You don't even have to write any JavaScript or React.

How good is that? The only very tricky bit of this was getting these numbers. So all the other ones I could find fonts for, but I had to get the original sprite sheet, pull those numbers out. But then in CSS, CSS has support for sprite sheets, which I've completely forgotten. But where you can basically set a URL as a background image. So I did, like, each span has an eight, like, on numbers, one to nine, so that a screen reader can still read them, still very accessible. But then I give it a class of eight or four, and then you basically just set the background image, and then you give it a background position calculated over what number it is. So if it's eight, it moves along that amount, and you get the same things.

Now, I'm sure you're looking at all of those images going, Joe, I don't believe you. I don't think you've done any of those things. So let me have a look quickly at our little UI demo. Because the wonderful thing about doing everything in React is it means you can put them in Storybook. So you have, here's our little ATB gauge, oh, can I grab that? Yep, and you can make, ooh, look at that, going up and down. You can do, I can't see quite that a little bit. You can also get the number display that I talked about earlier. Let me zoom in a little bit for you, sorry. So we've got that there, and then we've got our command panel, which includes... Come on! For the people who just walked in, that would seem incredibly strange. So you also get your party status, where that's just a table rendering things. And then we can put that all together in a pretty good little UI here. So now you can tab in, hit Enter, and go and attack someone. There we go, we've done all of the UI. So if I close that...

Now we get to do the fun part. We want to make it interactive. This is React after all, we want to react to things. So we want to do this battle scene, and we've missed all of this lovely 3D stuff at the back. Now, before we get to the 3D bit, we need to run the game, in the same way that you're building any kind of interface, you need to have some sort of state, and we're React engineers, so we'll have a hook called UseBattleSystem, and you need to keep track of all the different elements and the attacks and all this stuff, so this is more complicated than just using a few use states. So we'll get a really big reducer that does all of this stuff. Trust me, it works. And basically the real trick here is, you take this big reducer, and we're going to create a game loop with it.

This code doesn't essentially matter, but we're going to use requestAnimationFrame, which if you've ever done anything in the web where you want some sort of smooth animation when you're doing something, it just allows you to call yourself and call yourself and call yourself with getting a delta time in the middle, which basically means you do some sort of thing, in our case, we see who's attacking who and if someone's ready to attack or not to attack, and then we wait a certain amount of time and we come back round. And that means we can animate perfectly smoothly. So by doing that, we get this. This is kind of like headless Final Fantasy IX running. You could do this in like a CI or something where people are attacking, you're doing stuff, Vivi's getting absolutely wrecked by the Cactuar. It's not a very good time.

Now doing 3D in the web is rough, to be perfectly honest. The basic way to do it, and I say basic as in the most primitive way to do it, is WebGL, which that's the code to render a cube in WebGL. We don't want to do that. So, everyone turns to 3JS, only four lines to render it. That's also very lovely. But this is JavaScript. We don't want JavaScript, we want React. We want to be able to hook into our lovely state thing we built. Of course, because we are React engineers, and indeed today we are React advanced engineers. That's the worst joke in the whole thing. You'll pass the worst point. You're okay.

So, the piece of technology we're going to use is a custom renderer. If you were here this morning, you would have heard Eric talking about custom renderers for React, with the default one being React DOM. We're going to use React 3 Fiber. This tracks into the state and then allows us to react to stuff and it makes it super easy and lovely. This is the amount of code you need for rendering a cube in React 3 Fiber. It is slightly more than just using 3JS, but you get staked with it. But it does require us to change our mental model slightly between how we were thinking about how it works before. So, welcome to this is my dumb brain's understanding of how React and the browser works. Where you have browser rendering, which is things like CSS animations, hover effects, stuff like that. And then you have React DOM rendering, which is like state changes, use effects going on forever and ever, and it's nuking the DOM and doing all this very heavy lifting, whereas browser is very light and very fast and very performant.

Where you have browser rendering, which is things like CSS animations, hover effects, stuff like that. And then you have React DOM rendering, which is like state changes, use effects going on forever and ever, and it's nuking the DOM and doing all this very heavy lifting, whereas browser is very light and very fast and very performant. And now we're adding this new one on called React 3 Fiber rendering. Which basically, as we heard this morning, it does a render, it reconciles it against the 3JS scene. And there are basically two ways you can make the 3D scene react. The first is you do good old fashioned state. This makes sense for VV is attacking, someone is moving, something major is happening, or we're changing the color of this particular thing. And then the other way is you can interact with it via refs, which uses a thing called use frame, and you store a ref of the mesh that you're changing. This is really good for rotating something, or floating something, or playing a battle animation, or something like that.

So then we update our model where basically React 3 Fiber rendering is very similar to browser rendering. That's where you should do everything fast, everything that needs to happen often. You only want to do your big, heavy stuff inside React, and then everything else in the other ones. So, let's have a look at what that looks like with 3D on it as well. Oh, I remembered the screen, amazing. So here we have a 3D scene of some cubes fighting. Their health is represented by the size of them, and I can go in here and I can go and attack the cactuar, and it's damaged, lovely. This isn't that great. What we want is a little bit of 3D models. Here we go. Now we've got VV, and we've got a cactuar, and also what's lovely is that they themselves are just little components. So here is a little story for VV, and you can go and see what he looks like idling, or walking, or running.

And then you want to really... this isn't particularly exciting, they're fighting in a big cube, nothing's really happening. But if you add a backdrop and a little bit of music, suddenly it feels a lot like Final Fantasy IX! I couldn't get the actual sound effect from the game. No, I couldn't. I think the cactuar's going to win that fight. I'm not going to let that play out. But there we go, we've got most of the battle scene working in Final Fantasy IX! There's an odd economy of applause in that the single sound effect earlier was like, that's amazing! And then a full 3D scene is like, hmm, okay, show us more. Well I will show you more. This I think is the coolest bit.

So building a 3D scene is normal, that's standard. People do that all the time. But what we want to do is build these scenes. I mentioned earlier about how good these graphics were. They were doing things that you just couldn't do in 2000, no one else was doing. So how did Squaresoft manage to create real-time graphics that managed to do god-rays and liquid simulations and dynamic lighting and all that stuff? How did they manage to solve that hard computing problem? They didn't. The way they did it is they looked at the constraints of their Playstation, they were like, well we can't upgrade the CPU, we can't change the RAM or the VRAM, but we can add more disks. Because it's 660MB per disk. So when Final Fantasy IX came out it came on four disks, and what they did was instead of rendering this whole scene in 3D, the only 3D elements here are this character and this character hidden in the tree trunk if you can see him there, the rest of it is a still image. So every single location you went to in Final Fantasy IX was a still image. Which of course is very very large, but you just ask your person using it to replace the disk. If you're struggling to kind of imagine this, a good way to think about it is like old movies where they're very much in a backlot or something and they're projecting something behind them, and it looks kind of fine. Also I discovered this animation in PowerPoint. Oooh. That's essentially what we're doing. The reason why I think Final Fantasy IX is the best at this, is because they firstly did these pre-rendered kind of scenes. So this is a 3D scene they made, they sent it off to a big big big computer that's probably not as good as your phone to render this thing out. But then, they hand-painted on top of it. So these are just hand-painted artistic drawings. And I think they did, like, that's the default one. Look at that! That's so much better, I think that's absolutely beautiful. So we want to do that in the web. So we can render a 3D scene, we can render 2D stuff just by default outside of the 3D scene, but we need some stuff to do it. So I need to go and pull out a bunch of assets from the game, including these things called walk paths, which is like how they can walk around the 3D world. And then we need to put it together. So you pull this image out of the game, but it's not one image, it's a tiff of layered things, where each single one of them is a different thing. So if Vivi goes to the back over there, he goes behind the area. And we split them all out, and we want to put them together. So. This is the big demo where I'm going to show you everything from the very first cube being rendered all the way up to a kind of re-creation of the beginning of the game, where Vivi is going to the theater to try and see something.

I hope this works. So, here we go. So you start off very much with just, like, a little cube. Let me zoom in a little bit, there we go. Where you just have a little cube and you can look around it, that's not very exciting. But we want to add the walk path in. So we've loaded our walk path, that's the kind of hallway that we're going to be wandering around. And then we want to move our cube around. So we can do this, which is very exciting. But he goes off the edge! That's not very good, we don't want that to happen. So we do a thing called ray casting, and now our cube does not go over the edge, which is very lovely.

In the same way, if you're struggling to imagine how that works, in the same way if I had a stick, I could kind of bang beneath me. And when I got to here, I know I'm at the edge of the stage, so I won't fall off it. It's the same kind of thing. And then we want to make this work with the mesh. So you see now, he goes over here, doesn't fall off. He goes up here, and he actually follows up! And then we want to make this a fixed camera as well, because we don't want the scene to align with our background image. And then we want to load the background image.

That's all that is. It's just an example of where it is. There is a fun thing in here that I won't go into because I'm going to run over a bit anyway, but ask me a question about that later. So now we're going to layer the scene on top of each other. Now this was the one bit of data I could not extract from the game, so I had to manually align this camera! It was infuriating! But now we have our cube running around. But we don't want a cube running around, we want Vivi running around! Here we go, he's running around up there. And now he'll run around, and he'll stop at the back. I also added some... he only runs at 15 FPS, which is the frame rate that Final Fantasy 5 ran on. And then you get Vivi on the walkway. And that is also then working, and then we layer him into the scene. But you see, that's not aligned.

But if you align the camera, now it looks like he is genuinely... he can go up the stairs, but he's rendering in front of those stairs. That's not how we want. So how do you layer things on the browser? Well, we can use a Z-index. So if you go over here to the back now, this whole thing pops down in Z-index, and then he can now move over here. And so I basically read the 3D Z position of Vivi in the scene, and it alters a CSS variable at the very top, and then it moves backwards and forwards. I love this, because there's several people in the audience going, like, that's cool. And I'm like, there's no other room in this world where that would be cool. It is the nichest of niche things. And then that's just showing it with it not being rendered, which is very lovely.

But, I said I would show you... No, go away, controls! I wanted to show you here. So I've tried to recreate the first scene of the game with a bit of the music as well, and we can run Vivi around, and he can go over here a little slowly. But then you go over here to the main central plaza... Oh, look at this! He needs to go get his ticket for the theater tonight. So he goes over to the guy, and he talks to him. Oh, that ticket you have is fake! Here's a ticket to React Advanced! It's a much better event! Well, okay, I don't remember that in the original game.

But if we walk around here, because the thing about being on the web is that I can do things on the web that you can't do elsewhere. You can plug in devices, you can render things that aren't normally rendered elsewhere. So we can come over here, and we can go and have a look at Vivi at React Advanced! And I'm hoping I should be able to... Is that... Oh no, I'm in the way! Oh, I'm so dark! That's the dumbest thing I've done in my career.

So, okay, I will wrap things up. Did we recreate the whole of Final Fantasy IX in React? No. We are missing quite a few things here. We didn't really get to doing any dialogue or background stuff. We did have a little bit of fun, but sort of outside of the game. But really it's an interesting exercise, because you learn quite a few things about it. First of all, the constraints they worked on at the time were here, and that's still a very relevant thing to us. But our constraints have flipped. We now have no constraints on computing power, or graphics, or anything like that. Our constraints are more about whether our user has a similar phone to us, or whether their signal is very good, or whether they have accessibility needs, or things like that. And then the other major learning when I did this, because I did this before at a conference where I remade Age of Empires II in React.

And that was quite easy. It was isometric, 2D, very lovely. This was so hard. Doing 3D stuff in the web is just awful. It is a horrible experience. And what makes me sad about that is that there's not a good... And it's not really React's fault there, because actually React 3 Fiber is a really lovely, declarative way of rendering 3D scenes. Whereas it just makes me sad that normal DOM rendering, if you have this JSX in React, you get this HTML out. And isn't that lovely? You get to go through this map of things, and you get the thing out the other side. It's super easy for your brain to go, how does the third one here relate to this? Oh, it'll be when we get to the third one in the list. But when you render something in React 3 Fiber, or in any kind of 3GS thing, it just ends up being a canvas. And then that is just where all accessibility and semantics goes to die. It also means if you do have an AI coding agent, he's like, I don't know. The cube is in the wrong place. He's like, okay. I can't see that. And wouldn't it be so cool if there was some sort of markup language where you spit it out of React 3 Fiber and it actually gives you a canvas and a camera and meshes and things like that?

Yes, that's right. This isn't a silly, fun talk. It's a web standards talk. At the end of the day! Interestingly, in 1995, they did a spec called virtual reality modeling language, which was just way ahead of its time. Lots of technology happens too early in the world. We are very close to getting a little bit of semantic 3D in the web. Unfortunately, it is sponsored by Safari and Apple, so everyone hates it. But other than that, I think it's a really cool spec where you get to say there's a 3D image here, and you fall back to an image, or things like that. I think if we got more web standards that could do 3D well in a semantic way, it would be less painful, and slightly more fun.

And that's basically it. I don't have anything to sell you. I don't have a newsletter or anything like that. I merely have a command. I just wish you to go out into the world and make silly things.

I think you should do it. It's very good fun. It's easier than ever to do, and also go and play Final Fantasy IX. It's fantastic. I've been Joe Hart.

How long did it take you to get to the stage? Because you said it's very silly. It's very tricky to do. It's not enjoyable, but the end result is fantastic. It was sort of like cooking around in my brain for a few months before I started to properly have a look at it.

It started off originally as like, I want to try and do a web browser with the VRAM they had of the PS1, which was just like, no. I couldn't even throttle a Raspberry Pi down to have only one mega VRAM. The kernel won't let you go that low. I just started playing around with it, and then a lot of very long nights of trying to get this thing to this point.

Even just getting the assets was a ... There's a big modding scene, but that took a long time of being able to ... You've got to find the image. You've got to pull the thing out. Everything just has random IDs. This is where the problem with Final Fantasy IX being less popular than Final Fantasy VII is a problem. Final Fantasy VII, there's this really interesting technical manual that these people have made on the internet that is like 200 pages long. Every byte on that disk is like, this is what it does. This is the name of it. It's amazing.

It's amazing. There's not one for Final Fantasy IX, and it just made me very, very sad. As you go down this rabbit hole, what ideas do you have next that you'll execute on? As in like more video game things? Yes. I think I'd love to do a Pokémon thing, but Nintendo scares me. They will swoop the shit out of you. Yeah, yeah. I'm like, I just can't leave that over there. Age of Empires, I've done strategy, I've done RPG. I'd love to do a sort of FPS thing. But also, Doom's been done a thousand times on different things, but doing something like, can I do Halo on the browser? Go one generation up from that. I think it would be quite interesting, but we'll see.

Very cool. How sensitive is the camera positioning in the first place? It's so... Trying to reverse engineer the camera position of the thing is mind-numbingly difficult. Because it's a function of both the position and the rotation, and then the positions in the scene. And I tried a bunch of... There's some really interesting reverse engineering tools where you can draw perspective lines and go, okay, with this, this. But for these things, it just didn't work because they're like hand-drawn and like really... And I don't know the FOV of the thing. Somewhere in that disk is the data I need. But it was one of those things where I spent like three days trying to find it. And I was like, I will just do this myself. I promise. Yeah, gotcha. All right, nice.

Will it run on... Will it run Crysis? That must be a reference. So Crysis is a video game from, I think, also like a very long time ago. I think maybe 10 years ago, if not more. It was very, very difficult to play at the time.

And you can now play it on a Nintendo Switch, which is deeply worrying. Okay. Good stuff. Had no clue what that was to be honest. It doesn't show my age. Yeah.

How do you start a project that is so massive? Do you plan it out in tickets and chunks? Or how do you not get terrified for the sheer size of this? Oh, you have to like the terror. Like you have to look at the thing and go, that isn't possible. And just... And also, I think that's the thing of like what I mean about doing a silly thing is like not just in the task is silly, but like free yourself from the constraints that you have in your regular day job of like, you don't have to do the tickets. You don't have to end-to-end test. You don't have to unit test it. You can write it in pure JavaScript without any types. Don't. It's actually weirdly easier to use. It's just easier to use TypeScript. But I think I just kind of like just slowly elephant eat it. I've got like, okay, here's this thing. How do I get the assets for it? That's the first thing. And even just doing that, it's probably like a blog's worth of fun that you can come and talk about. And then you just kind of keep going until the conference day arrives, or you get deeply tired and you're like, I can't do this anymore.

Well, already the fact that you say, okay, I know how to, what step one is, let me get the assets for it from someone that doesn't have any knowledge, but they want to do silly things. What is your advice then for them to get started? What is step one? I think with most things, especially in creative things, and I do think coding like this and coding generally is a very creative thing of like imitate people of like, go and make a copy of Pac-Man in JavaScript, go and make, and that's more complicated than you think it is. There's lots of little like things that you'll do in it. And then you'll figure out things that they did in the original game or like go and make Tetris or, or try and make something or make a personal video game of like, uh, there was a conference a couple of years ago called FFConf in Brighton where the organizer made a video game of the conference as a gift for all the speakers, which was just incredibly cool as like, you can make video, you can make video games for your friends and it can just be a small scale thing. And the same with like, if you did Dungeons and Dragons for four of your friends, you can make a video game for four of your friends, especially these days of like it's so easy to go and like get stuff started. And also if there's something that's been done before, there'll be guides and tools and stuff of like, here's how you do it. And then you go, how do I screw with it? How do I change it? How do I break it? How do I add something to it? Perfect. Awesome.

Awesome. Thanks for sharing. Let's see. How would you pixelate the React 3 fiber view for an eight bit effect? Ooh. Well, so what's interesting is like React 3 fiber has a ton of lovely filters and stuff and shaders like, um, especially also, so there was a point in this where I was going to go one of two ways I ended up doing, it only renders 320 by 240, but you can these days get really good 4k CRT shaders where it takes your whole 4k display renders each like individual pixel in a way that makes it look like a CRT monitor, which is like just insane. Like the amount of computing power you're using to emulate a thing that was tiny is absolutely ridiculous. Um, but especially cause like, because React 3 fiber is just three JS wrapped in some stuff, anything you can do in three, you can do in React 3 fiber. So like I would go down the rabbit hole of going like 3js, eight bit filter, and then there will probably be like seven of them and go and pick one off the shelf and then just shove it into React and you should be fine. Nice that it works like that. Yes. Oh, lovely. It's divine.

If you could ignore certain restrictions, what would be your dream game to remake on the web? Oh, great question. I think it would be Halo three and Halo three multiplayer specifically so that you could just imagine if you just play Halo three multiplayer at any time with the people around you, that would be amazing. Yeah. I want that. And it makes me sad that I'll never have that. I don't know. Maybe one day. At some point. Maybe. I don't know. I'm always building it. It might be.

Do you feel like you would have enjoyed solving all time you're rendering and performance issues more than how complex these things get even more so in the modern day? Oh, totally. I think I do not have the intelligence or the ability to be like a proper, proper graphics engineer of like, I'm like a graphics fan of like, I love reading about how they solved the thing. Whereas it's like if you sat there and you didn't know the path forward, I have no idea how you would discover lots of these kinds of techniques. Whereas like it's lovely to go back and go, they did what? And they did this and they actually piped this into that and then they got that thing out the other side.

Whereas it's like if you sat there and you didn't know the path forward, I have no idea how you would discover lots of these kinds of techniques. Whereas like it's lovely to go back and go, they did what? And they did this and they actually piped this into that and then they got that thing out the other side.

Like, like I just recent, it's not a rendering thing, but a web thing of I recently read Tim Berners-Lee's new book and it's all about him making the worldwide web back in the 90s. And there's so much lovely stuff from that. That's a genius idea. And but equally, if I'd have sat there in 1995, I'd have been like, oh no, the web wouldn't exist.

All right, then. Final question. Are there any libraries you're excited to try out for your next pain project? Interestingly, I think it's probably, I want to go back to a library I used to use a lot, which was processing or processing JS of a very, very long time ago. I did a design degree and we did a lot of processing stuff there. And you can do a lot of when ML was fun and like good vibes of like, it was just like you can do facial recognition in this opens CV thing of like doing something where the input is like a webcam or something. And it's less video gamey, but more it can read your whole body and do things and you can be the controller like, yeah, like recreating Microsoft connect or Wii sports, but using a webcam or something would be very cool.