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
assetsInlineLimitto zero, I was on my way. - GitHub pages are hosted in a subfolder, so I had to add
base: './',to thevite.config.jsas 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.
Top comments (1)
I used this combination too for a game jam I took part in. So great!