Phaser meets Vue

Originally published at Medium on Jul 6, 2019

As you may or may not know, before I started working on Radio Liberty I made a couple of videogames using Vue, a JavaScript framework (and talked about that at WTM Barcelona — talk is in spanish). Obviously it has some limitations when it comes to the complex interaction you usually need for a videogame, but, being a framework for web applications, it also makes UI things much more simpler. If you have some CSS knowledge, you will see the pain that it represents aligning something with Phaser, compared to using flexbox, absolute positioning, or even floats.

I started working on an inventory UI for Radio Liberty, sort of a grid to list all the items, possibly with the need to scroll or paginate if you have too many items to fit in the screen.

Obviously I couldn’t stop thinking how much easier would it be for me to do it in CSS. And then I thought… wait, Phaser is JavaScript, it’s running on a website, what’s stopping me from using Vue?

I created a new project with Vue CLI, moved my phaser files into src, copied the old webpack config into vue.config.js (that’s my favourite part about the Vue CLI: no need to eject to provide full webpack configuration!), added an extra div to the index.html file, and that’s it. It was that easy.

Now I can display the inventory easily and I can reuse the water, food and health stats component that I had done for a previous Vue game.

Obviously, the Vue app and the Phaser game need to communicate between them. The player picks up an object on the Phaser game (handled with a collision), the Vue inventory needs to update. If any of the stats reach 0, player must die and Phaser game must respond accordingly. But hey, it’s all JavaScript! They can communicate easily via Events.

Right now there are a bunch of events sent and received through many files, but in the future I’ll probably create a service to manage those, and all (or most) of the game state will be centralized in the Vue store, managed with Vuex.

Here you can check the current status of the game, with stats and inventory: https://www.youtube.com/watch?v=mbqEcUb4k0Y

With the inventoy and the stats solved, I have all the basic pieces to build the game. Now, it’s time to focus on doing a lot of pixel art (oh no), sound, and build the remaining scene to finish Chapter 1!