TypeScript Game Engine: Canvas Renderer & Game Loop Implementation

[00:00:02]All right.

[00:00:03]I'm wanting to kind of start a series where I create a game. We're going to use TypeScript.

[00:00:15]Um and we're just going to kind of go one step at a time and see where it takes us. I know I want it to be a 2D game.

[00:00:24]Maybe isometric.

[00:00:27]But um yeah.

[00:00:30]Let's uh Let's just get going and see what where it takes us. So, first thing I like to and I like to use Bun.

[00:00:42]And I found that if we just create a blank React project it's a good place to start and we can kind of just clean it up.

[00:00:55]Um so, as you can see if we run Bun dev and we can navigate to localhost 3000 in here.

[00:01:20]That is like the initial setup for a React project. But we're not going to use React. We're just going to use it as a kick start or uh a kick start for our project. So, we can do a few things.

[00:01:38]We can come into some of our uh files and start modifying them and getting rid of the TypeScript stuff or the uh uh React stuff.

[00:01:54]So, we're just going to come in. I'm just going to get rid of that.

[00:01:59]We'll rename this to All right.

[00:02:05]game Let's just We'll call it game series.

[00:02:16]And we'll restructure a little bit of this as well.

[00:02:22]Um I'm going to get rid of all of this.

[00:02:29]Our CSS we can get rid of.

[00:02:35]And we'll move a lot of this into the HTML here.

[00:02:52]And we will swap out this for a canvas element.

[00:02:58]Uh canvas ID equals game canvas like that.

[00:03:08]We'll keep this.

[00:03:13]We'll move these two outside.

[00:03:19]And we'll move We'll create a new folder outside of here called server. And this is where we'll throw the um the like dev server from Bun.

[00:03:37]And that can get modified as well.

[00:03:51]We only need this one uh route.

[00:03:57]And then we can get rid of our logos here.

[00:04:10]We'll throw a new file called main.ts in there.

[00:04:18]And here this isn't going to be TSX anymore.

[00:04:22]It'll be just TS.

[00:04:28]We'll give it the correct title as well.

[00:04:41]And we can get rid of a lot of stuff from the project. So, we don't need that.

[00:04:49]We don't need a bun.toml for this project here.

[00:04:54]And then this is going to change drastically.

[00:04:59]We're just going to import main like so.

[00:05:17]And I think what we do is uh We'll say import.meta.hot.

[00:05:42]accept. I think that's really all we'll need in here.

[00:05:52]And then we can Let's just put something in the body at the top.

[00:06:07]Um Actually we'll say canvas and let's just draw a circle or a square in it.

[00:06:30]And we'll We're going to be using TypeScript, so let's just set it to uh green and we'll fill a rectangle. Let's put it at uh We'll set these things, I guess.

[00:07:03]canvas.width canvas.height And then canvas.width / 2 and canvas.height / 2. We'll put it right in the middle. It'll Actually, it's going to end up being It'll be bottom.

[00:07:37]Should be. We're just going to be checking make sure that this all works.

[00:07:40]So, then we'll get rid of this here.

[00:07:45]So, our source should be Our source directory will be nice and clean.

[00:07:49]Um I think that's really good.

[00:07:58]Let's see.

[00:08:00]We need to have And we need to change one more thing.

[00:08:07]This is going to be server/ Actually, index.ts.

[00:08:22]Rename that. So, we're just getting this set up.

[00:08:32]And front end That looks right.

[00:08:42]We just need to rename this to TS.

[00:08:58]All right.

[00:09:02]And we we should just put this at 50/50 for now. That's a little square there. So, we've got We've got it set set up.

[00:09:16]So this is kind of just a way to kind of structure and get things started for the project. Let's also delete this.

[00:09:31]What we'll do is we'll go one step further.

[00:09:35]Delete the node modules and run a bun install.

[00:09:42]That's just going to get us only really bun uh and have access to its types and such.

[00:09:50]So, we should have a much cleaner project and a good starting point.

[00:09:56]So, where do we want to begin and what do we want to focus on?

[00:10:02]I think that the first thing I want to do, because I want to make an ECS and I think that I want to have a clear way to communicate or to interact and render things.

[00:10:21]So, let's work on that first. So, we'll create new folder.

[00:10:30]Call it renderer.

[00:10:35]And in here, we'll create renderer.ts.

[00:10:45]And so, basically, before we draw anything the right way, we're going to create a the renderer.

[00:10:56]Uh it's kind of like an adapter that hides the drawing back end.

[00:11:00]So, the ECS game code will say what to draw uh and the renderer decides how to draw it.

[00:11:11]It doesn't really care um about what the underlying tech is. Uh the game won't care. It'll just know how to interact with the renderer.

[00:11:25]So, I guess that's the first thing. So, let's separate create the uh create the renderer to handle like the the camera transforms, clearing, being able to write text, um draw sprites, draw like a rectangle.

[00:11:50]Um and then we'll have the rendering system once we get to that, get all of the information that it needs to then talk to our renderer.

[00:12:06]So, the first thing that we'll probably want is to set some types. So, this will be what we do at the top. So, we'll uh create a camera 2D.

[00:12:20]And right now, it's only going to have an X and a Y.

[00:12:29]And then we'll have color, which is a string, and that will be anything. We'll say uh RGB, RGBA, X, HSL.

[00:12:49]HSLA. Oh.

[00:12:51]HSLA. Yeah.

[00:12:53]Um So, we also should probably put a zoom.

[00:13:06]Zoom, which is number.

[00:13:16]One is 100%.

[00:13:25]So, the camera uh is the world space position plus a zoom, and the color is just a CSS string that uh keeping things tidy makes them easy to swap out in the future. So, um so, now we need uh the rendering interface. This is uh just a description, something that the game engine itself will be able to utilize. So, uh it'll be an interface here, interface renderer.

[00:14:08]And so, we can describe what a renderer has and does.

[00:14:12]So, I'll have a read-only width and read-only height.

[00:14:25]And then we'll have some methods, set camera.

[00:14:30]We'll take a camera.

[00:14:38]And actually, it won't require all every parameter. So, it'll say partial.

[00:14:46]Oops.

[00:14:48]And that way, we don't have to set every part of the camera with uh when we call this function. We can just update specific parts.

[00:15:01]And we can get the camera, which obviously is pretty self-explanatory.

[00:15:08]We want to be able to resize with a width and a height.

[00:15:18]And we want to be able to clear, passing in an optional color if we want.

[00:15:28]We want to be able to draw a rectangle with X as a number, Y as a number, width, height, color, and we'll have some options.

[00:15:57]Our options will be rotation, anchor, which will be the anchor point it from zero to one, kind of like UV coordinates, uh where we're going to uh assume its center is.

[00:16:16]Um we could put an alpha, maybe.

[00:16:21]And smoothing.

[00:16:26]I don't think we need smoothing. That's I think alpha's fine there.

[00:16:35]And this will be a So, we'll also allow us to draw sprite, which is a tech.

[00:16:49]Uh it's actually going to be an HTML image element. I wonder if we can just say image.

[00:17:01]I think that it needs to be HTML.

[00:17:13]Or or canvas element.

[00:17:23]We'll have Let's uh Let's this for now.

[00:17:37]We'll have the X, which is number, Y, number, width and height. And this is going to have the same, but here we can do the smoothness.

[00:17:59]Or whether we have smoothing or not.

[00:18:09]And then we'll do the same thing. We'll be able to draw uh text to the screen with a string, X, number, Y, number, options.

[00:18:31]We'll have color, size, font, well, alignment, and it'll be actually canvas text aligned.

[00:19:09]Baseline, alpha.

[00:19:21]We could put a rotation on there, and we could probably you do the same thing with the anchor.

[00:19:32]And we'll have a get native, which will return the uh the actual context.

[00:19:50]So, it's access to the underlying context rendering context.

[00:19:57]Okay.

[00:20:00]So, uh we need to create a factory to create this uh got this uh renderer.

[00:20:19]So, export function but make canvas renderer.

[00:20:29]And that's going to take a canvas.

[00:20:33]We'll say context ctx.

[00:20:36]Canvas rendering context, it'll take a canvas.

[00:20:40]An HTML canvas element.

[00:20:48]Let's actually rethink that. We don't need this.

[00:20:58]If we can just derive it from that.

[00:21:02]Options.

[00:21:07]This will be width.

[00:21:10]Number.

[00:21:12]Height.

[00:21:16]Default font.

[00:21:19]String.

[00:21:22]Uh we can set our image smoothing.

[00:21:27]Image smoothing.

[00:21:32]And our camera mode.

[00:21:37]And that is going to be top left or centered.

[00:21:49]You'll see how this comes together.

[00:21:58]And this is going to return our actual uh configured renderer.

[00:22:04]Um So, let's see.

[00:22:16]Let's start building the actual internal state. So, we'll put width equal to options uh width or canvas.width.

[00:22:34]And we can set context right away. const ctx.

[00:22:41]Yeah, there we go.

[00:22:44]And then height camera mode And then state camera 2D And we'll set its initial state.

[00:23:13]To wand.

[00:23:16]And then ctx.imageSmoothing, we'll set that enabled by default.

[00:23:29]We can set the default font.

[00:23:34]And let's do mono.

[00:23:40]I think mono space.

[00:23:52]So, we're basically setting all this stuff up so that it is set only one time.

[00:24:03]We don't have to uh we don't have to like set these values every every render or anything.

[00:24:12]So, we can create a function called apply camera.

[00:24:20]And this is internally used. So, we're not going to worry too much about the type safety.

[00:24:32]So, s- we're going to set the transform to reset everything when this is called.

[00:24:47]And we'll check what the camera mode is.

[00:24:51]And if it's top left set the transform state.zoom [Music] And these are just some settings for the uh context set transform. It's really not necessary to fully grasp it.

[00:25:27]We're just setting all of the transform information based on the camera.

[00:25:45]And then we can say else bullets is width times 0.5.

[00:26:03]Or y is the height. So, this is the origin.

[00:26:15]And that should be good there.

[00:26:32]We need to create a function called clear all.

[00:26:38]And that will take an optional color.

[00:26:45]We'll save the current uh state of the canvas or the context.

[00:26:57]And we'll set reset the transform back so that we can clear the full screen.

[00:27:07]So, if there's a color ctx.clearRect else we will first set the fill style then clear.

[00:27:30]And then we'll restore and reapply our camera.

[00:27:44]And then we can actually start off by applying the camera here.

[00:28:20]Let's see. We can return now our actual API.

[00:28:25]So, we'll get we'll get some method the methods that are required.

[00:28:37]Yep, we're just filling out these the uh initial rendering type. We're filling out all those methods.

[00:28:49]So, we'll have set camera.

[00:28:54]And we don't even need to pass these types in because we've already set those.

[00:29:02]If And we'll actually take all this from here.

[00:29:10]So, if partial.x We're just set- setting that and reapplying the camera.

[00:29:27]Get camera will return the state.

[00:29:42]And we'll be implementing resize here with height and then we can set those global values or uh scoped values.

[00:30:07]And we'll set the canvas. We'll do all that and apply the camera again.

[00:30:17]Here take the color and that will just run the clear all.

[00:30:35]And then we will create our method for drawing the rectangle here.

[00:30:42]So, we'll first save the state is it context?

[00:30:47]We'll check if uh options.alpha alpha is not equal to one and Let's say Yeah.

[00:31:27]Let's say undefined or one then Let's see CTX.fillStyle is equal to color.

[00:32:15]CTX dot Uh let's say if options.rotation Let's actually we'll start with the options.

[00:32:41]anchor And let's fix this error.

[00:33:09]And if rotation We're just going to basically rotate.

[00:33:38]And then we can restore.

[00:33:45]We're going to do something very similar with the sprite.

[00:33:53]X Y width height with options and because we're doing so much the same we'll just kind of get this out there.

[00:34:22]And yeah, you can see it's essentially the same but we're just drawing the image uh after translation and rotation.

[00:34:45]Now, one thing I Yeah, we've got that up here.

[00:34:57]And we'll do our text as well.

[00:35:03]So, again, that's going to be a a lot of the same.

[00:35:10]Did we allow for rotation?

[00:35:15]Yeah.

[00:35:17]So, we should do the same stuff.

[00:35:20]If options do that.

[00:35:30]We'll We'll base it off the font that's set and the text alignment.

[00:35:37]And it will translate it.

[00:35:42]So We're going to let the AI kind of brute force the boring stuff here.

[00:36:01]If we have our rotation then we're going to rotate fill text else we're just going to fill the text and restore.

[00:36:16]And then that native is just going to return CTX.

[00:36:43]And I think that's it.

[00:37:02]Instead of returning here, let's say past API is a renderer.

[00:37:11]And at the end that's where we'll return the API.

[00:37:20]Okay, so this allows us to interface with our uh canvas and we'll be able to build on this. We could even swap out the renderer at some point.

[00:37:34]So what we can do with this now is we can try to test it out.

[00:37:44]So let's get rid of this code here.

[00:37:51]Actually, we'll get rid of some of the code.

[00:37:56]We'll just keep this here.

[00:38:03]We'll import that. So, import make canvas renderer and I'm going to keep this like so.

[00:38:19]So, now we've got our canvas here.

[00:38:26]And we can set a few things. So, let's say we'll set the CSS width equal to 800.

[00:38:39]CSS height 600 uh let's do 450.

[00:38:48]And we'll set the canvas styles to that.

[00:39:05]Yeah, so we're going to give them a fixed size so that uh we have a stable coordinate system.

[00:39:15]And it's going to be centered in the middle of the screen with our CSS or with our styling. So um we'll set the DPR math.max one window.device pixel ratio.

[00:39:43]Or we'll assume it's one.

[00:39:50]And we can then set the uh canvas's width and height there.

[00:40:00]Now we can actually create our renderer.

[00:40:11]And it will take a camera mode.

[00:40:21]Top left is what we'll do.

[00:40:32]And we will run renderer. dot set camera.

[00:40:45]And I think zoom will be DPR.

[00:41:02]All right. So, we built our camera renderer, our canvas renderer.

[00:41:06]We're using top left camera.

[00:41:08]Uh we'll set the camera uh And set it to the DPR. That maps one world unit to one CSS pixel.

[00:41:21]Um uh That's why we're still drawing at full resolution.

[00:41:35]So, now we could actually start doing something with it. So, we could just create some temporary stuff here, too.

[00:41:40]So, we'll create a box.

[00:41:43]X will be 50.

[00:41:46]Y will be 50.

[00:41:51]Width can be 64.

[00:41:55]And height 64.

[00:42:09]And we'll give it a velocity of 120 on the X.

[00:42:17]And now we can just kind of build this loop that will re-render stuff.

[00:42:23]So, do we want to try to draw first? Let's just draw.

[00:42:32]Uh renderer.

[00:42:34]dot clear.

[00:42:38]And then renderer. rect.

[00:42:43]And let's see what this does here.

[00:42:47]Fun dev.

[00:42:57]So, we've created a a square.

[00:43:05]Now, let's do something fun with it.

[00:43:09]Let's create a function called frame.

[00:43:18]And above it, let's get last performance. dot now. So, we'll set a time.

[00:43:27]And the frame will take a number called now.

[00:43:33]And we'll derive our delta time from that.

[00:43:45]And this is the seconds since last frame.

[00:43:53]And then we can reset last to now.

[00:43:58]And we'll run some updates. So, we'll say box.

[00:44:02]x plus equals the box velocity times the delta time.

[00:44:10]And we'll do a check to see if it's off the screen or not.

[00:44:16]So, box. x plus um We'll center it.

[00:44:28]Box.

[00:44:30]dot width.

[00:44:32]Let's check if Actually, we'll do box. width divided by two.

[00:44:44]And you'll see why in a second.

[00:44:51]Um If it's less than zero.

[00:45:10]Or if box. x plus width divided by uh oops. Box.

[00:45:19]width divided by two is greater than CSS width.

[00:45:30]Then box.

[00:45:33]vx times equals -1.

[00:45:38]Oops. Here we want this to be times.

[00:45:41]We're going to revert We're going to uh invert the velocity on the X.

[00:45:50]But we also want to set We're going to reset uh the box's position.

[00:46:40]And then we can render. Renderer.

[00:46:45]dot clear.

[00:46:48]Renderer. rect.

[00:46:53]And we don't have a center just true, so I don't know why it did that. But we do have an anchor.

[00:47:05]Which can be zero.5 and 0.5.

[00:47:24]And then we can request animation frame.

[00:47:40]And then to initiate it, we do the same down here.

[00:47:47]And we've created a bouncing box. And it should bounce left to right.

[00:48:01]Cool thing is we could have rotation.

[00:48:10]And we could set rotation to the box's rotation.

[00:48:22]And rotate box.

[00:48:40]So, now it's rotating. And since we've anchored it to its center So, now we have a bit more uh We have a bit more fun.

[00:48:57]Um we could also Let's see.

[00:49:07]Let's grab an image.

[00:49:39]Let's just create an image instead of a box here. We'll use the box though um for state, I guess, or to continue to rotate it and do all the same work though, but we'll change out to the render function.

[00:49:57]So, say const uh let's call it an icon is equal to a new image.

[00:50:14]And we'll say uh icon.source is equal to this logo here.

[00:50:26]And then we'll set set can render.

[00:50:47]And put this above that.

[00:50:54]And then we'll set can render to true.

[00:51:06]Okay.

[00:51:13]Then we'll just hot swap these.

[00:51:18]We'll say if box.can render and we'll render that sprite.

[00:51:29]Else we just render the box.

[00:51:32]That way this should swap out.

[00:51:47]So let's see.

[00:52:27]This should return an I think that's right.

[00:52:39]Uh let's see.

[00:53:13]And the only thing I could think is that we might have some problems loading that. Let me check in the browser.

[00:53:42]So let me save this instead.

[00:53:52]So I'll Gotcha. I just it's not the right file.

[00:54:12]I just grabbed the wrong link, I believe.

[00:54:24]Let's try this here.

[00:54:33]Okay.

[00:54:38]So, we've got way too big of a width here.

[00:54:45]We don't want to change the width and height.

[00:54:48]There we go.

[00:54:55]There we are. So, now we are drawing an image.

[00:55:00]Seems pretty straightforward.

[00:55:12]We can even set our V.

[00:55:22]And down here I'm going to have to figure out the runtime issue that we have.

[00:55:35]Cuz it doesn't want to render sometimes.

[00:55:39]Um yeah, so then we can actually set this to box.rv.

[00:55:56]And we'll do the same thing here. Box.

[00:55:59]rv.

[00:56:15]Let's set its Y at Yeah, we'll have to figure that out.

[00:56:37]We could always wrap this.

[00:56:50]This might do it here. This might help.

[00:57:01]And then if we go to this I wonder how that would work.

[00:58:09]I think that's main problem.

[00:59:16]Now, I wonder if we edit main >> Let's see. We'll Let's figure out why this happens. We'll see if we can fix this.

[01:00:15]Cuz we want to be able to uh dependably restart.

[01:01:02]I think I'll figure that out, and I will see you next time. I think we're going to work on the uh start of the entity component system.

[01:01:16]And we'll go from there.