Bootstrapping Phaser 3 Games with Svelte

Intro

My software development interests in the past couple months have been focused almost entirely on game development.

During my journey, I started thinking about how I can bootstrap Phaser games with all the fancy developer tools that make frontend development productive and efficient like TypeScript, code bundling, hot reloading, etc.

I've seen Svelte 3 start to rise in popularity, so I was very eager to try it.

So far, I've found that Svelte offers a bunch of things out of the box that makes for a pleasant developer experience. Creating a Phaser game on top of it felt like a piece of cake.

Here are some notes that I have.

What is Phaser?

Phaser is a popular JavaScript and HTML5 game framework. Building games for the web imposes constraints implied by the browser, so you probably won't see any AAA games out there built with it, but for smaller games and aspiring indie game developers, who are also web developers (like me), I think this is a good fit.

What is Svelte?

Svelte is a component framework like React and Angular, but rather than be a browser runtime, Svelte is a compiler that compiles Svelte files into performant vanilla JavaScript code.

How does Svelte help with developing a game with Phaser?

Phaser has a huge API surface that probably covers everything that you need to build your game. Why would you need to add Svelte to the mix?

As a Phaser developer, you're probably developing UI within the game itself. In this sense, admittedly Svelte doesn't provide much value there. All JS component frameworks are the same in that regard.

But outside of component development, Svelte has a couple of neat tricks up its sleeve to really work with the developer.

A modern JS build stack

Phaser covers a large breadth of everything that could involve game development, but I don't think the Phaser project has been able to "keep up" with the latest trends in the JavaScript development ecosytem.

Phaser 4 seems to focus on modernizing its development stack. It's still in active development and not yet production-ready, but it's exciting nonetheless. I'll definitely be following this one!

Bootstrapping a Phaser project with Svelte will provide a modern JS development toolchain with minimal boilerplate.

This results in an ehanced developer experience, and opens the door for single-command deployments to popular hosting services like Vercel and surge!

State management, for free!

When studying game development in college, I learned it was important to properly manage game state.

Unity provides a native way to manage state and state machines. But the JS world is the Wild West - there are a number of state management libraries for JS.

One of the most popular libraries is Redux, though it's notoriously known for the amount of boilerplate required just to get started.

Out of the box, Svelte provides reactive stores that are accessible from any part of your code, which you can use to manage state.

How can I bootstrap my Phaser project with Svelte?

I've created a svelte-phaser-starter template to help get developers get started quickly. To set up the template:

npx degit jstncno/svelte-phaser-starter my-phaser-game
cd my-phaser-game
npm install
npm run dev

Conclusion

Svelte creator Rich Harris put an emphasis on "developer experience" when he developed the framework, and it does indeed deliver.

With its smooth developer "ergonomics" and toolkits useful for game development, Svelte provides to be a great addition to your stack.