Building video games in React with Joe Hart === joe: [00:00:00] Like I know there's a lot of discourse at the moment about like, do we even need frameworks? We should just do everything in the browser. You should have multiple page applications again. But building an actual app, , which is deeply reactive and there's lots of stuff happening on the screen. It's just a dream to work with. , it's so easy to go from , the UI you think of in your head to something that you can click and play around with and make reactor things. sean: Hi, and welcome to Pod Rocket, a web development podcast from Log Rocket. Log Rocket helps software teams improve user experience with session replay, error tracking, and product analytics. Try it free@logrocket.com. I'm Sean, and with me today is Joe Hart, who web engineering consultant who has worked for many companies including Risk Ledger, Lego, the bbc. He's here today to talk about his latest talk building age vampires two with React. Rise to the browser. Welcome to the show, Joe. joe: Hi. It's great to be here. sean: Yeah, we're excited to have you. \ , And, uh, , before we jump into the talk, do you mind us giving a little bit of an intro, , about your background and what you do as web engineering? joe: Yeah, sure. , see, I've been working in tech for a while now. , and mostly these days focus on helping teams, , kind of build out their frontend [00:01:00] best practices. , I like to joke, I kind of like being front end Mary Poppins. Like I arrive, I bring some best practices, a couple of penguins and a cartoon montage, and I sing on a dance and I leave back on my re merry way is the selling point. , Yeah. And then a lot of, , my kind of like tech talks and stuff has been a mixture of using some of my experience from doing stamp comedy in my spare time to then also bringing some of that fun into the tech space to wake people up halfway through a conference day is usually the kind of technique. sean: That's awesome. Okay. Actually is not that surprising that you have a little bit of that standup comedy background, cuz it was kind of like a performance that talk and, , I really urge our listeners to after this, , to go and watch it. It's really entertaining. , so agent event by , , Is an older game. , before we jump into this, , do you mind telling us what Agent Empires is and then why you chose that game? joe: Certainly, and it makes me feel old that it is now an old game. I mean, it's been an old game for a while, but in my head of like, when I was first putting the talk together, I was googling to remember , when did it come out? Came out 1999. , it's a real-time strategy game. , , and it was just fantastic , It got me interested in history as a kid, and I'm sure like many people who've played it in the past [00:02:00] kind of had the same thing. If you would play from one of the great civilizations from history and you would take it all the way from, the stone age through to the medieval age, through to the castle age , and fundamentally fight big battles with each other. I think I must have used like it as an excuse to say it was educational to my parents and be like, oh no, I'm definitely revising and doing homework. Definitely, definitely. But actually I'm just like sending night rushes against castles and defending myself against the French. sean: Yeah, I think that I had a similar game. It was kind of like a knockoff, , called. Rise of empires maybe. , and it was like totally slimed down version, , , , and it kind of, the idea , of building it in React reminds me of like the first React tutorial. I don't know if this is still a pitch tutorial, if you go on React website, but it's making Tic-tac toe and I remember having so much fun with that because it's like creating a game. And then, you know, eventually people start making user interfaces and stuff with React, what it's intended. , to be used for. , but , I'd like that it kind of harkens back to that first tutorial. , did you ever do that one? joe: Not that one, but , that thing \ of,, of video [00:03:00] games being like a way into playing with this technology of so many people I know it's like there's something magical about when you do something on a keyboard or a mouse or a controller or something and then something changes on the screen. And I feel like video games are a lot of people's first way into that. And therefore it's like this kind of way of capturing that childhood wonder, but then hopefully giving you some skills that you can turn into a job and go and build some, good user interfaces for. , , I I find video games particularly interesting cuz , they're really complicated. Like video game software engineers are doing stuff that are just wildly magnitudes level complicated. More than like most of the kind of crud apps that most websites are built on nowadays. And I think with that you can look. Piece of technology through a kind of different lens than just building up some wire frames. sean: Yeah, exactly. And you mentioned that, if you were building this for real, you might have used a game engine or a typed language. , like , what kind of things , do those help with? , , when you're creating something as complex as a game? joe: Definitely , cuz that's the thing is like, there's just lots of math stuff, right? Of like, , being able to set up, , [00:04:00] lighting algorithms or even pathfinding artificial intelligence like game engines like Unity or Unreal or, uh,, Gatos a fantastic, , um, uh,, open source one, which I highly recommend people try out. , Because it gives you all of these things and it lets you get to the,, the state of making a game quicker. , in the same whether like something like Next or Nextt is doing a lot of the, fundamental busy work of like, here's your routing, here's your page setup, here's your on mount, here's your service side rendering, so you can focus on making an app. Game engines do that for making games where you're not focusing on re-implementing, , like. Collision issues for the nth millionth time and you can just get to making a video game and start having that kind of like fun and enjoying creative journey with it as quickly, whereas building it in react , it was not necessarily joyous and there were lots of rabbit holes. I kind of got stuck down while I was in there. sean: Yeah, you kind of had to, , reinvent the wheel or like those black boxes that the game engine provides for you weren't there and, and react what were, what were some of like the most, , difficult aspects that you had to maybe like Bend, react to your will a little bit and things that it, it's not [00:05:00] built to do. joe: I think like the fundamental kind of like deep philosophy of how react renders versus how a modern video game renders , is like really the core of all the pain that the project calls me because, , , most games will just have a core game bloop, where you do some setup at the top and then you loop through some logic and you update the render at the end. And within that you'll be able to tell how much time has passed into the last render so you can update all of those things super easily. Whereas in React, it's in the name, it's reacting to state changes. It's this declarative state you ui, so isn't really built to do stuff on time. Like if you've ever tried to implement a stopwatch or anything like that in application, you'll know the same thing where you have to pop out of React weld and put it in like a set interval or in a set timeout thing. And that's why you're actually doing this stuff and kind of forcing react to render more than you want it to. sean: . Yeah. Cuz React wants to render , as little as possible for performance reasons. I think. So, if dependency one of those props is updated, then it will flow through your component tree. But yeah, like you said, you have to step out , , and [00:06:00] use the used raf, which is like one of the hooks that , I rarely go to that use ref hook. joe: use ref is, and that, that's also the thing about reactors. Like cuz we spend a lot of time, , indeed in any framework, not just the react thing of like, you spend time in the framework world, which is like your modifying state, you're modifying props and then things like use ref allow you to jump out of that world back into the browser dom space, which normally reacts doesn't want you to touch. React is like, I know better than. I'll deal with the dom, I'll update things. You just deal with props and state and all that stuff. Whereas when you are trying to do stuff smoother than that, or you're trying to do it like every, , 60 frames per second or something like that, , it's a lot easier to just go and talk directly to the dom, directly to the browser. Cause that's also, again, what it is. , it's react is just a language to express what you want. The browser to do, but it's just going through like several compilation steps of we're writing React application, which then compiles to a Dom description, which then goes into the browser, which then turns into machine gun and we drop down all of these layers. When you're trying to do what React wants you to do, it's wonderful. And when you are trying to do something [00:07:00] the React doesn't want you to do, then it gets a little bit more complicated. sean: Yeah, exactly. And , did that influence your decision to do this all in the dom , was that to use react as much as possible? Or did you consider, , kind of other alternatives like a canvas maybe? Or was that cheating or was that, , against the design of the experiment? joe: I think so , because if you end up rendering into a canvas or something, cause like, I've done this several times professionally, when you're building some sort of graph library or, or, or anything that's kind of dumping into a canvas, react just becomes a glorified kind of state management tool at that point. , And that's not as exciting. Like less can go wrong, I think. And I think with this, this was kind of me leaning in going of, I think this would be an interesting thing and the harder I make this, the more interesting it is going to become. , so with saying I wanted to create these things with dollar elements was just a lot easier of finding more interesting edge cases than the React. And also it makes a few things easier, right? So if you were rendering entirely in a canvas, if you wanted to have it, where something's selectable, that's quite a complicated bit of logic to come up with. Or you have to check where the mouse is, you have to check what it's clicking on, you have to check the borders and all those [00:08:00] things. Whereas with Dom elements, we have on click handlers that give you all of that stuff just for free and React can do that super easily. And , that was kind of where a lot of these first thoughts of doing this project came from. Of like, ooh, what if the thing I'm selecting wasn't a checkbox, but , a unit in an army or something like that of how can you take those builtin kind of state management things and apply that to something a little bit more fun? Cuz all it is, is a dressed up UI with some sprites of spin and a barracks thrown in. sean: Yeah, and in the talk you can see it all, come together very quickly from like this. Webpage and then , there's a moment where you like rotate the tiles in the units, , correctly. So they're all aligned and all of a sudden the game comes to life. , so it's really interesting that , you did it all, , in the dom, , and got it to render correctly. And I wanna jump back to the state management point, , because you used producers. I'm curious if, , you stay and it became too unwieldy, , or what , the thought process was. joe: Certainly. So like definitely when I first boot it up, I was just like, here's you state, let's put some stuff in there. And then I did the classic thing. If you dump like [00:09:00] an object in you state and then react doesn. Handle that properly. Like it doesn't handle reactivity down to this kinda like nested nth state. And , it was kind of a microcosm of every long-lived website you've ever worked on where the state starts very simple and easy and you're like, I totally know where everything is. And then you keep adding to it and it keeps growing and growing and getting more unwielding. , and it was that point where I really needed something that was going to be predictable. And that I think is where the use reducer thing comes in, I did years of redux stuff in various places. So , the muscles are still there for setting up actions and, , having, , dispatch functions and stuff all over the place. It also creates this like centralized place for your state to live. , , the other approach is I could have split that state up a little bit more cuz this was very much using that kind of model of having here's this global store and we can access that from anywhere. Whereas I could have easily split up that store and, , aligned it in slightly more of like a domain driven kind of way where, okay, this is the component that renders units. We're also gonna put all of the unit state in there, , I kind of wanted to avoid using libraries, but it would've been really interesting to see like, could I make an X State state [00:10:00] machine that does age of Empires, for example? Maybe that's a future project I should have a go at. sean: Right. Yeah. , toss it up on npm for people , to mod out or something. , were there parts of, the game where you were surprised that React just worked really well? , and that it actually, , you weren't breaking abstractions , or poking holes in abstractions to get it to work the way you wanted it to? joe: Basically everything that isn't the fun, exciting part, which is like the fun, exciting part is the part of the game with units and they're fighting each other and all of that kind of stuff. , the other way, whereas everything that was a ui, everything that was like a little mini map, everything that was a dropdown field or a menu laid on top of another thing was super easy to do. And what I find interesting about that is usually, at least in my experience in engines like Unity Building UI is really hard. Like it is really difficult cuz it's this very old school kind of, , you instantiate , a piece of UI over there and then you have to manually update it and it's like maintaining this very , complicated M V C style architecture. , whereas with the React being able to [00:11:00] turn some HTML with a little bit of state into UI took. Literally like an hour or two to rebuild the UI part of Age of Empire two, which I'm sure they spent way longer working on cuz they were writing it in, , c plus plus and a lot more complicated languages back then. Like I know there's a lot of discourse at the moment about like, do we even need frameworks? We should just do everything in the browser. You should have multiple page applications again. But building an actual app, , which is deeply reactive and there's lots of stuff happening on the screen. It's just a dream to work with. , it's so easy to go from , the UI you think of in your head to something that you can click and play around with and make reactor things. sean: Yeah, I'm sure working on that part was just a breath of fresh air after coming away from, , the complex you were doing to get like the units and stuff to render by and then, , updating, resources or joe: Yep. Absolutely. sean: seems more fitting to react use case. joe: Yeah. Just a quick pause here to remind you that Pod Rocket is brought to you by Log Rocket. Log Rocket can help you understand exactly how users are experiencing your digital product. With session replay, error tracking, product analytics, frustration indicators, performance [00:12:00] monitoring, UX analytics, and more machine learning algorithms service the most impactful issues, fetching your users so you can spend your time building a better product rather than hunting through. Solve user reported issues, find issues faster, and improve conversion and adoption with lock rocket. sean: , so jumping back to. The responsiveness and running something, a certain number of ticks or frames per second. , , what was the problem that you ran into , with use effect? Like ], why did you kind of have to jump down, , into the browser API. joe: Yeah, the first seeds for this kind of talk was when I first , watched the talk about hooks and was like, hooks coming to react and use effects looked really interesting cause I was like, oh, I bet I could build a video game using that , you have this little piece of logic that runs every time this set of dependencies changes. That's really interesting. You could do a lot of fun stuff. Originally I was thinking , could I do a turn base fan fantasy style game using that? And then when coming to this I was like, Ooh, I could put the core game loop in here. So the first kind of real interactivity I tried to add in was , , being able to scroll [00:13:00] as you move your curse to the left or the right hand side. So I was like, this is easy. This is super easy. I'll just whack it in some state. Run the user effect and will be totally fine. But then it only changes , when that data is changing only does that code run, which is not what you want. In some games, I think you could totally get away with that kind of thing. And I think that would be a really interesting experiment to go and build maybe something more turn-based or , try and build fun and fancy or like a scale down version of civilization using just use effects to manage turns and things like that. And entirely, , actively generate the UI based on like a court state model. , But in this case , it was trying to go , okay, how do we get react to render more often and more predictably in a smooth way , because much like UI development, video game development depends on feeling good and unfortunately that kind of isn't something you can measure. But like when I was playing round with just doing these effects and even doing, , , a set interval or trying to just make it constantly update the state, it just didn't feel quite correct. sean: Yeah. And that's just kind of something you [00:14:00] have experience as a user. , and there's . This whole part of the life cycle of game development, which is like the play testing that we don't, I mean we have a little bit in web development, , like user accessibility testing, those kind of things. But I think, you know, , there's more emphasis on it in developing games. and so that makes us a ton of sense that you just have to know when you're joe: Hmm. And this thing is like to get to that creative kind of loop in game depth, and I think this is true for UI stuff as well of , you want to get to the point where it's running and you can click on it like as soon as possible. This is why , I really like tools like storybook , or doing component testing inside Cyprus or playwright or something where you can get what you're working on to be clickable and usable as soon as possible. Because otherwise you can get all the way to the very end and go, Ooh, that just doesn't quite feel. Well, that isn't quite intuitive and I ideally it is fully within the. Of the page and so on and so forth. And like there are many different ways to make that quicker as well. Like in the UI space where if you have a well built out component library, you can take a wire frame and build something super quickly by going, oh, I have all these [00:15:00] pre-built things, let's get it to running. Whereas other stuff is a little bit trickier, but trying to reduce that feedback loop to the point where you can start feeling creative, I think is very important in both UI stuff and game development. sean: , are there parts of React that you think you'll like, take away from this project and then use now in your day-to-day? , , or are the parts that you really had to kind of dive deep into? Are those a matter of the game requiring them, but our normal UI development, , doesn't necessitate them? joe: I think definitely use ref cuz like very similarly to you. I like use ref. I'd never really touched, , it'd never come up. My hooks are mostly use tape use effect. , and occasionally like a use memo if I'm feeling a bit excitable. , but use ref was really interesting figuring out what it can do. Cause like even just from reading the docs, I would , kind of get it. Maybe I would want to this or maybe I need to, keep a hold to this thing and pass it around or something. But being able to use it to go, oh, now I can directly reference the dom outside of the React life cycle. And cuz the main problem itself for me was inside request animation [00:16:00] frame. , , , which has allowed us to do the really smooth rendering. You can't access mutative state in that. Like if state changes, you can't access it within that scope. Whereas using a. You can pass around anything you want in various places. So I think I'm really tempted to try and maybe as a side project or if I can convince some people I'm working with at the moment to do some cool animation stuff. The request animation frame of like adding some smooth transitions, doing those kind of things. Would be a nice place to apply that knowledge in ui, but , it's usually , the kind of, um,, domain of library makers or plugin makers who are far cleverer people than I am. , I'm just some guy who makes stuff, , to do those smooth bits and stuff. And it was a nice way of, Really digging into the depth of those things that I rarely do as a product engineer, where I'm just smashing together liga bricks that connect with each other really most of my time. So it was nice to dig deeper into that kind of stuff and go, how does this actually work? What are the edges of it? How can I make it do what I want it to do? sean: Yeah, absolutely. I think, , it sounds like such a great opportunity to dive into the parts of React that [00:17:00] we don't use in our day-to-day. , you know, going back to that first tic-tac toe tutorial, I feel inspired to do more games, joe: Do it. This is, , putting my philosophical hat of like, , it's really interesting that people's journeys with computing and, , and tech and software engineering of like, usually you get into it cuz it's kind of fun. It's kind of cool. You do a little tic-tac soe tutorial or you're making little game or you're making a website, , about some hobby you love or something like that. And then at some point a few years past and you are doing web pack config changes and it's not as fun as it was when you first got started. And I think it's nice to do little things like on the site to just remind you kind of like where you got into it in the first place. Especially given that the focus these days is so heavily on you should have a side project, or you should have this SAS business that's gonna make you money in your sleep or something like that. Maybe there's more value before doing that or as well as doing that of go make a silly thing, go make a game for your friends. Go and. You know, tic-tac toe, but put your partner's face in it or something. , something just a little bit kind of fun. And you might be surprised about what you figure out while you're [00:18:00] in there building the fun thing. sean: Yeah, I totally agree. Especially cuz , many of us got drawn into this field for the creative aspects of it. And like you said, coming from video games, maybe someone was making a mod, , , or a game and. , yeah, , I think , it's important to like, keep stoking those flames. there was a library or there is a library, P five js. I dunno if you've seen that one before, but it's all around just like creative coding and making art with JavaScript, and that's such a fun one. joe: Yeah, I love, uh,, P five after I did my computer science degree, I had an artistic crisis and I did an interaction design degree instead. And their one rule was, , you are not allowed to make any apps or websites, which was kind of why I went there to go and do it. , but back then it was called p3. It was like two versions behind. , but lots of really cool machine learning stuff, creating images from people's faces, manipulating things. And if you wanna really do like creative stuff, go and do a bunch of P five stuff and then go buy a projector. And then you can do wild stuff with like, putting stuff on walls, doing installations. Like with webcams you can do so much stuff with \, , image manipulation, things like that. , cuz when you start [00:19:00] doing coding at a real job, like , you're on a dev team of like five or more people, you're getting wire frames and a product manager and deadlines and you're in an estimation meeting. Being able to code, I think is fundamentally creative and it's like sometimes it gets typecast as this left brain, right brain, scientific. It can only be these things, but it is incredibly creative and being able to have a bit of an outlook for that kind of thing I think is, is really good fun. Plus, I love seeing the weird stuff people build. So if anyone's listening to this and does build some weird stuff, please send it to me. sean: Yeah, I totally agree . With you. Yeah, but sorry, we got distracted from your talk back to , the age of Empires. I guess like if you had to pick a video game to do this with next, what would you choose? You mentioned final fantasy. joe: yes, fun. Because I think fundamentally it has to be, A video game I really love. , fun. Fancy is definitely one up there. , I'm really tempted to try Pokemon One mainly cuz I'm having somewhat of a Pokemon Renaissance at the moment. I've been replaying all the games on the Ds cause I never had a Ds and I've been replaying all of those and they're absolutely fantastic. , but the thing I really want to try, mainly because I think it'll be really, really difficult, but I think [00:20:00] it could be really cool, is doing a game with multiplayer, , and trying to build in using some sort of \ web socket, \ api, and even trying to, maybe if I could do it as a talk. In a live place, get the audience playing along, something like that. Whether it's just taking edge of empires and making a multiplayer version, or trying to take some like early M M O, can we do Roone scape but in Js and make everyone in the room play it? Those kind of things I'm excited to play with, mainly because I've never done any kind of multiplayer coding or anything like that before and I have no idea how difficult it's, but I'd love to find out. sean: Yeah, that sounds super cool. The multiplayer aspect kind of reminds me of , the, the Twitch screen that was like, everyone plays Pokemon together and , can control the inputs. , I don't know if that was like that path you were going to of having everyone control like the same character. but just reminded me of that. joe: It's , all of those things have, well, cause like I've done some of this kind of stuff in my standup shows before , one I would often do is, , the video game, flappy Bird, , , where really it's just one button that you tap and you go up, you have to dodge through these spikes and stuff. I would do a version of that live with people where it was controlled by the [00:21:00] audience's cheers. Where if they cheered really loudly, the bird would go up and then if they were quiet, the bird would fall back down again. And it was just really good fun. Making a room entirely full of people cheer at me, , was very enjoyable, although it would create a weird, , experience to my producer who was stood just outside the room while the gig was going on. But they thought I would be doing really well. And then they went completely silent again, and then really well, and then completely silent again. sean: Yeah, that, that does sound, , super entertaining. And then although then when you, you die in the game, you disappoint everyone at joe: Yes. And it was like, thank you for coming. sean: Yeah. So you had to deal with like character movement and controls a lot when you made age of umpires in Iraq. So I was kind of curious about like the internals of how that worked. Cause you mentioned the vector maps, , and yeah. . Do you mind just jumping into that piece of it? joe: Yeah, definitely. , cause that thing is, I remember doing vectors in school when I was 14 or 15 and being like, this is useless. I'm never gonna use this ever. Why would I ever need to know this? And then I've used it all the time for any kind of game development stuff. This is one of [00:22:00] those things where we were talking about earlier around things that game engines give you for free. , they often have nice class objects that are like, give me a two-dimensional vector. Here it is, and here are all your methods on it. And you can get the distance of it, you can get the magnitude of. You can add two of them together. You can multiply them, you can rotate them, whatever you want. Go crazy. , that, , I didn't have, , I don't think there are any s for that in JavaScript. You could possibly use a library for doing vector stuff, but I was like, I wanna do this with just normal maths. , and it was just interesting of going. Because obviously, so how you figure out where units is going, you have where it currently is and then where you right click on the map where it should go. But that only gives you this like total distance, right? , , I need to go from here to there. And what we were talking about earlier with having a request animation f where I need to move it a little bit at a time. Suddenly you then have to go, well, okay, if I'm currently here and I need to move fully over there, how do I split that up in a smooth way? At a certain , speed for a certain, , unit, we can get there in a particular amount of time and given the, you know, different units, they'll move at different speeds. If I have a night, they'll get super fast. If I have a catapult, they'll go [00:23:00] super slowly. , And that it was just a case of like I say cracking out old, old textbooks as if I still have a math textbook on my shelf. But I, I googled how Vector Maths works, , and Wilton , Wolf from Alpha , and figured all of this stuff out again. And your square rooting though I can't remember the equations off the top of my head. , I'm sure these days you could also just ask chat, g p t, those kind of things. but interesting, , there was a failed bit of trying to make this work, which , I didn't put it in the talk cause I didn't have time to talk about it, but. I originally started off trying to do this entirely with c s s transitions where instead of me like manually updating the current position of the, , unit, I would instead just set the position it should be , and have it translated using a c s s, , translate x translate y, , transform on it, and then just do it with c s s animations. And it sort of worked, but like, not really , it would always take the exact same amount of time no matter how far you clicked. So if you clicked just next to it, it would take a second to move. And if you clicked halfway across the map, it would zoom across there super quickly. , which was quite visually entertaining, but it wasn't, exactly what I needed from the [00:24:00] game. It adds a different layer to the game. Right. If you can just like jump off of whoever can cook, the furthest is going to win. It'll be totally fine. sean: yeah. Totally would change the strategy and you know, maybe it would be really fun. Who joe: Yeah. sean: So you have the vector math, like figure out where units need to go, and then how do you go about mapping that back to the dom? joe: With the individual, , kind of elements in the dom, they were all placed. Absolutely. So they all had an absolute an X and a Y. , this mainly came from when I was trying to generate the grid that the, , maps you generate on , for those who who played edge vampires, , you'll know what it looks like, but if you haven't, it's a isometric grid, so like diamonds drawing these particular things. And I had to do some maths to make sure they were all. In the correct place on the map. , and then doing that for units as well, you can reuse the same logic. , so it becomes a lot easier for those kind of things. , but the usefulness of doing all of the vector maths, so being able to go now, okay, this is the overall direction we're going, this is the unit, this is the magnitude, all that stuff. , it was super easy to figure out what direction everything was going in. , And thankfully all the main assets in Age of Empires,[00:25:00] , are all like aligned with, you know, if you have a Spearman and a Spearman walking up, there's an up one, there's a top, , up to the left, a left, a bottom left, and a bottom one. Interestingly, they don't duplicate left and right, they're just mirrored. , when I first extracted the assets, I was like, I'm missing half of the things. How do I make it move to the top and the right and then. Of course, Joe, you fool, you can just flip them round and it'll totally work. , because it was from that kind of era of every megabyte on that CD rom, or I wanna say 700 megs, I think it's 700 megs on a cd. , I can't really remember. It's been a long time. , , but like every megabyte on the CD needed to be, , accounted for. So why would you duplicate those kind of things. , and thankfully there are loads of like modding tools, , at for implants, which let me extract all of those as. And then you just couldn't just load them in and just. And this is where the dom comes in super useful as well of like switching out The image that is in the background of a dom development is super quick and you can just do that with a class or you can do that with a state, , , or like a CSS variable that's passed in. And the browser is really good at reacting to those kind of [00:26:00] changes. The interesting bit is , I've only ever tested with 10 units or something. Like what happens if you have \ 200 units in there and they're all going in places and doing things, and would the browser totally screw that up? sean: Yeah, like in the end game with a massive army. How does the game perform? Is it still playable? That would be, that'd be really interesting to see. joe: Yeah, totally. Because also that's a problem like we do all the time with UI stuff as well. I've done it countless times where I've built a nice piece of UI and this works for the three examples I have in it. And then in production someone has like 20 in a list of these things or a thousand to listing things and you suddenly go, oh no, that doesn't quite work properly. So it's like that kind of stress testing at one particular end , is a good skill to have in any kind of development. sean: Yeah, absolutely. So now I have to ask if , someone comes to you and is interested in making a game, what would you recommend to them to get started with, , a engine or react? joe: I think it depends on what your objective is. If your objective is to learn more about React, I say go and build something, react. Cause I think it's really fun. , if your objective is to just kind of have fun and make a [00:27:00] game, then I would say absolutely go and use a game engine. Now that doesn't necessarily mean that you are not gonna make something in the browser, like, , Gado and Unity definitely have, , things that will export their programs to web assembly. You can run 'em on the web. There are also, , , JavaScript response. I think there's one called Pixel js, which does a lot of stuff. , and also if you want to be mega, mega hipster, there's a whole thing called virtual consoles or fake consoles, or fantasy consoles. There's a thing called the PICO eight, which is like a fake, , console that has a certain limit of RAM and stuff, so you can only create very small games for it, and you have to use like a custom basic coding language. They're really cool. I highly recommend checking them out. But equally , even if you're , listening to this, I know you're not a coder, you don't wanna learn anything about programming. You can go and use stuff like, there's a thing called GB Studio, which, , creates game boy games. Just with like click and drag and everything. You can go and make an amazing Pokemon game, but about whatever wonderful local wildlife you have, wherever you live or any of those things. , I realize I haven't given an answer there in that I just gave like seven different options for people to try. sean: [00:28:00] No, but I think that totally makes sense. It just depends on where you're coming from and what your goals. joe: Yeah, totally. I, my only solid piece of advice is I think everyone should go and try and make a game, whether you can code or not. There's loads of tools out there to do it. I think it's really fun. And also, you don't have to make the best game ever. You can just make a game for your friend or just yourself , and you can , put it online, or you can just email it to someone or whatever you want. Or you can go fool the whole hogan. I know. Go make the next star du valley, or the next patch quests, or something like that. sean: , sweet. Yeah, thank you for coming on. , and before we wrap, is there anything else you wanna plug? Obviously to our listeners, go watch the talk, but, , any, anything else that you have online that. You wanna direct folks too? joe: , I have a poorly updated blog at Jo Hart uk. , \, I have made a few silly video games that are on Jo hart.fun. You can play kaari node modules on there, which is where you play a node modules folder, and you have to try and grow as large as possible. , and then, , in the very serious business sense, , , yep, I'm a front end consultant. If you. Living in a place where you're like, we need a front end Mary Poppins. , I'm not available now, [00:29:00] but who knows when you're listening to this episode, maybe front in the future, find me on LinkedIn, , on Twitter, I'm at Joha on Master On, I'm at joha at Social dot lull. Come and say hi. And also, most specifically, if you go make a cool little game, send it to me. I would love to play it. sean: Awesome. Thank you.