> 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)
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)