Basic javascript typescript game dev input starter
This is the final tutorial in the course but it doesn't require any code changes but rather it is a celebratory milestone. With the completion of our input library we have created the next default starter project that future tutorials will use as a base.
It will contain instructions for how to download the typescript-game-dev-input-starter zip file so that you can follow along with future tutorials.
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-game-dev-input-starter is the end result of the Command pattern player input javascript typescript framework course, it includes the simple typescript canvas game loop skeleton project as well as the input library code created during the course. In fact if you have followed my previous tutorials up until now we would have basically created the whole project together.
It sets up a typescript html5 canvas project with cold reloading, a basic game loop and input handling for keyboard and gamepad for up to 4 players.
Tap the typescript-game-dev-input-starter link to download the base zip file. Unzip the content of the zip file and navigate to that directory.
Typescript game dev input starter walkthrough
The project contains all the changes we made during the Command pattern player input javascript typescript framework course but it has removed anything specific to the game we were creating. Ie there are no longer any black squares moving around the screen. Instead it simply logs the current player 1 and player 2 input which will be a great starting point for future tutorials.
Running the project
To run a the typescript-game-dev-input-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 player 1 and player 2's input logs. Player 1 is controlled with the keyboard and player 2 is controlled with the gamepad.
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 input project. Congrats again on finishing the course and I'll see you in the next tutorial!
