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!