Originally published at Medium on Jul 6, 2019
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.
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.
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!
Top comments (3)
Just discovered this series and it's been a fun read. I'm working on a Phaser game myself so it's cool to see someone else's experience. I thought it'd been more complicated to pass data from your vue state into your phaser game inside the canvas, but maybe I'm overthinking it!
Thanks for reading! 😄 I want to do another blogpost covering the vue-phaser communication in detail, but yeah, it’s simpler than one would imagine!
Yeah that'd be a cool article idea. But either way, keep jamming on the game!