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!
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.
Holds the html document code where the canvas is rendered.
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).
The entry point to our game, comprising all the game logic, loop and drawing.
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
npm run serve: Starts a local file server pointed to the
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).
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!