I built a game with Vite
Yuval Greenfield
Posted on April 29, 2021
As part of Ludum Dare, a competition for making a game in 48 hours, I like experimenting with new tech. It's always painful to experiment while under time pressure, but it's also a great opportunity to time constrain a learning experience.
Last year I tried to use Rollup, Phaser, and TypeScript based on an existing template. When I tried to npm install
an audio library (Howler) - it broke in such a way that I needed to debug a convoluted asset build configuration. I couldn't figure out how to fix it. In the end I decided to ditch the build system entirely and go pure JavaScript.
This year I tried out Vite, Phaser, and TypeScript. I was able to throw in different odd libraries and it all just worked. There were just 2 issues which were straightforward to debug:
- The inlining of assets into URL encoding that Vite does was incompatible with Phaser. Luckily the relevant Vite docs popped up when I searched for the issue. After a small config change of
assetsInlineLimit
to zero, I was on my way. - GitHub pages are hosted in a subfolder, so I had to add
base: './',
to thevite.config.js
as well. Perhaps this should be the default setting.
The game is pretty simple, you can play "Where is Bob" if you like. I also made a vite-phaser-typescript template if you'd like to start such a project from scratch. The main goal of this post if to just say thank you to @yyx990803 and the Vite team for such a smooth build system that mostly just worked.
Posted on April 29, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.