I've done two major things, both using a 2d engine because I don't have the resources for 3d modelling:
first one was bootstrap with a custom theme on the user layer, phaser.js on the rendering layer. The interesting part is I was able to use the phaser render to texture function to have dynamic maps integrated in the html layer, and ship preview in the ship theme selector. I can send you source and everything, the game is basically completed in regards of the original idea I had. you can see it here https://parkedbits.com/Increstellar/ - it's not obfuscated or anything, but the prestige/bonus thing at start is not really implemented in this version
second one is using vue.js for the html frontend with a theme inspired from the NES.css style (but reimplemented as I didn't like their input widgets), with a phaser.js backend because I don't have time to learn two things at a time (vue being the first one). this just has the unit editor and there's no gameplay in sight, but the code is likewise available for inspection (it's just html, no node backend or anithyng, just static files)
Nice! I've built a little game in Vue.js (IP wasn't mine and it never launched), but I found that the CPU usage was heavier than I'd like it to be when functionality became non-trivial (many things moving at once). Maybe I modelled it badly though.
Can you give more detail on how you hooked vue into phaser? I'm really interested in whether that would have fixed the issues I saw.
> Can you give more detail on how you hooked vue into phaser?
there's many details that might not work for every game, starting from how the game structure is organized (it's the same for both games, except for the library bindings) - for the Vue Game:
- Vuex.Store contains the game world state
- The game has a management phase and a combat phase
- During the management phase you manipulate from Vue components the world state (economy, units, groups, movement orders etc)
- During the combat phase, the UI doesn't provide feedback for the whole world state in real time; the unit groups within a playfield get removed from the global store, moved into a local 'combat' structure, a new phaser scene with a different Vue component root gets drawn, the combat plays out, the effects on units are moved from the combat structure into the VuexStore world
- The combat effect at phaser level are simulated, targets, shooting, damage is all calculated ion the game frame update
- The combat updates are sent with an action to the vue combat component data structure in packets - unit health changes, units killed, unit without ammo etc are collected and the state sent about every second
- The Vue components that represent global unit health and ammo have transitions whose start and end point depends on the relevant stat, so that the damage or supply usage doesn't just change every second, but gets interpolated
> many things moving at once
to answer at this specifically:
- On the phaser combat render side, there's a fixed pool of tweenable effects (i.e. shoot trails); rendering every single shoot animated was too much, especially for not accelerated mobile browser (like chrome/ios - idk if it's still not accelerated today, but back then was a issue) - so even if there's a thousand shoots flying around, only a hundred or so are rendered, picked at random (and nobody ever noticed)
(not your parent poster)
I used P5.js for an Asteroids clone and an add on (P5.game) for a Galaga clone. Both had good primitives and it wasn't too hard to write a game-tick for-loop that ran the game logic.
