DEV Community

loading...

I built a game with Vite

Yuval Greenfield
I build webapps, tools and apps.
・2 min read

Where is Bob is a game made in 48 hours

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 the vite.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.

Discussion (0)