Getting the right set up for TypeScript games is unnecessarily hard. After countless hours fiddling with build systems and configuration files, I’ve found something that works. Here’s the template project, which you can freely fork as a base for your own webgames. Here’s why it’s better than rolling your own config:
It uses Vite to avoid most of the headaches. You can write TypeScript, install npm packages, import them using modern syntax, and everything just works. In addition, there is hot reloading, plugin support, and good documentation.
It simulates itch.io’s
iframe, as explained in this post. Your game’sindex.htmlis the one in./src/, which IMO should have been Vite’s default.It’s integrated with github pages. On every push, it makes a build and deploys it to your own page. In this case, https://knexator.github.io/vite-canvas/
It’s also integrated with itch.io. If you configure butler and have published the game, you can instantly update it by running
npm run updateThe example game has basic input handling, sprite loading and rendering, a game loop using
requestAnimationFrame(), a loading screen, and in-game variable tweaking, all in just 150 lines of fully commented and reusable TypeScript.
If I could send past-me a single post from this blog, it would be this one.