Basic game loop project
This is not a tutorial however I found myself repeating instructions for downloading my typescript-html5-game-loop-starter and figured it made sense to dedicate a post on how to do this and what the game loop starter includes.
Setting up the basic game loop project
If you are following along with one of my tutorials and then find yourself having to setup a project before you can even get started fret not!
The typescript-html5-game-loop-starter is a simple typescript canvas game loop skeleton project that comprises of code from the previous tutorials. In fact if you have followed my previous tutorials up until now we would have basically creaed the whole project together.
It sets up a typescript html5 canvas project with cold reloading and a basic game loop.
Tap the typescript-html5-game-loop-starter link to download the base zip file. Unzip the content of the zip file and navigate to that directory.
Game loop starter project walk-through
If you have followed the tutorial series up until now you should be familiar with the project structure. The main files and their responsibilities are described below.
index.html
Holds the html document code where the canvas is rendered.
index.ts
The entry point to our typescript code which is loaded by index.html. Here we initialise the aspect ratio of the canvas to be 4:3. Then inside the window.onload we call GameRuntime.setup to allow our GameRuntime to perform any setup required to run our game. Finally we call the setInterval method to run our GameRuntime.loop game loop 60 times per second (creating 60fps).
GameRuntime.ts
The entry point to our game, comprising all the game logic, loop and drawing.
Inside GameRuntime we initialise some empty GameState, define the setup method and a loop method that takes the relevant Canvas properties as arguments.
We also have defined our draw method which takes the GameState and relevant Canvas properties and clears the canvas.
Running the project
To run a the typescript-html5-game-loop-starter locally we can use the below commands.
npm install: Installs the required projects dependencies.
npm run build: Compiles the project to the build directory
npm run serve: Starts a local file server pointed to the build directory.
Open a browser and head to localhost:8080 to see the basic project, to confirm it's working you should see a blank canvas and no errors in the console.
This project has cold reloading which means if you make a change to the code locally, save and refresh the browser you should see your changes reflected in the browser.
Using the project for a tutorial
In most cases I will only require you to change to the project's root directory and open the code in your favourite IDE (code editor).
Finish
Well that's everything for this post, just a quick landing page to reference and help someone setup the starter project. See you in the next tutorial!
