I’m a web developer working on a side game project, just realize that using Html tags and Vue is very handy for building game UI as well, not just websites. It’s working great with Phaser 3 so far.
There was a point that I was trying to find a good Phaser based UI plugin, but it give me a feeling that there still are lot work involve even with a nice plugin.
Any one has similar experience? Or suggestions about the downside of this approach?
I have not tested it with Vue but with React.
I guess there is not really a downside, expect that you have to scale the Vue container along the phaser canvas manually.
The benefit of course is that the UI generated with Vue or React stays always sharp and it is easy to implement.
Here is the example I wrote with React. Maybe it helps you 
Hi Yannick,
I’ll have a look at your react repo, it could be helpful.
I have another question, not sure whether you could answer it, but please let me know if you do.
Do you know how good is HTML UI when it comes to integrating UI images provided by artists? I’m guessing I could use CSS and use background image for buttons and panels. However, I don’t usually see images used for UI on websites, but they are definitely common in games, so I’m not sure how well it would actually work for games in practice. Any thoughts would be good.
Many Thanks
If you open my phaser react example, you will find a button in the left below corner. You can change its style to test it.
I have added the code below in chrome dev tools and it looked nice and worked well.
button {
left: 130px !important;
background-image: url(https://examples.phaser.io/assets/misc/starfield.jpg);
border: none;
padding: 50px;
cursor: pointer;
color: white;
border-radius: 50px;
}
button:focus {
outline: none;
}
Here is how it looked
It looks great!
I had the same idea a while ago and made Breakout using Phaser 3 and Vue. Phaser handles the game screen, while the sidebar containing the current level, score etc. is built in Vue.
Also, check out my Webpack template that gets you going with Vue + Phaser 3.
The only possible downside I could really think of is that you are adding the extra weight of a JS framework on top of your game. Considering the quite mind-boggling speed of most JS engines these days, I don’t think that is really much of a concern for the vast majority of games. But if you are pushing the limits of the browser with your game then you may want to consider a more light-weight option, such as basic vanilla JS and HTML.
That said, from what I have used of Vue it seems extremely lightweight, particularly if you are just using the view engine of it and not using router, Vuex and other libraries. So I wouldn’t worry about it. I plan to use Vue with my game as well to make a robust UI system.
I was continuing on the project. I soon realized that it was not that easy to managing the datatransfer between vue and phaser. Currently the best solution i found was to pass a global game data object for vue to display. Then on any actual data changing ui events, broadcast the changes with an eventsystem, where game data update functions were registed as listeners. Still kinda struggling about code organizations, whether i should initialize multiple vue instances or how to separate html into multiple files. But on the whole its working really well so far. Much much less pain than in game ui.
The project is on https://github.com/xjxxjx1017/spacewarrealism.
There’s a EventManager class, which all events derive from, is handling events in the game.
In the GameData class, where all the game object is exposed, I initialize Vue instance for each UI section ( so multiple vue instances in a game ), I pass the GameData to each Vue instance, so Vue have full access to the GameData class.
These may not be the optimal structure, it’s just one of the working ones. Please let me know if any better alternatives. Thanks.
there’s a running instance on https://xjxxjx1017.github.io/spacewarrealism/, where you can directly see the code in browser. the code is under browser DevTool ://webpack/./src