What's up? In this post I'll write how I use some TypeScript hints for writing the Phaser client for my online web persistent-universe single/co-op player game. Also, I'll mention some substantial architecture changes I had to make to the backend when I realized I was doing things that are too complicated and brittle and should KISS.
Migrating from Excalibur js, which proved to not be stable enough for me currently, both documentation-wise and API-wise, I decided to switch to Phaser. The switch was planned rather early in the project timeline and only took a few Pomodoros to make the whole change. I was up and running again rather quickly. I must say that I am very impressed with Excalibur, they are doing a great job. Will definitely follow that project in the future.
One thing that I did with Excalibur which I wanted to keep with my Phaser adventures was typed scene name changes. From past project I learned that it's always good to have a BaseScene of your own extending the Phaser scene, so with that I could add some TypeScript magic to help me. First, I declared my scenes in a type and a variable, which looks like this:
export type sceneDataDefs = {
loader: undefined;
galaxy: undefined;
solarSystem: { starId: string };
};
export const sceneDefs: Record<keyof sceneDataDefs, typeof Phaser.Scene> = {
loader: LoaderScene,
galaxy: GalaxyScene,
solarSystem: SolarSystemScene,
};
Here I defined both my available scenes as well as any parameters (data definitions) they might be getting on their init, like the SolarSystemScene which needs to know which star it shows. A nice bonus I get from declaring my scenes this way is in my Phaser gameConfig:
scene: Object.values(sceneDefs),
And now, in my base scene, I did something like this. I should've however overridden the existing Phaser methods, I think I'll try that soon and let you know how that worked for me.
goToScene<T extends keyof sceneDataDefs>(
scene: T,
data?: sceneDataDefs[T]
): void {
this.scene.start(scene, data ?? undefined);
}
We get type-safe scene changes:
As I mentioned, it would probably be wiser to override existing Phaser scene-change methods. Let's try this together.
class TypeSafeSceneManager extends Phaser.Scenes.ScenePlugin {
start<T extends keyof sceneDataDefs>(
scene: T,
data?: sceneDataDefs[T]
): this {
return super.start(scene, data);
}
switch<T extends keyof sceneDataDefs>(scene: T): this {
return super.switch(scene);
}
}
Re-type the scene object in the BaseScene:
export class BaseScene extends Scene {
scene!: TypeSafeSceneManager;
...
Oh my, that works! How nice is it writing a dev-blog and discovering new stuff. We get scene name completion and data type-safety.
🙂
Some updates to how things work in the backend
Previously, for building ships in the backend, I wanted to create a delayed Redis or some other queue task. As I approached implementing that, I realized that from a gameplay perspective the player might cancel a build, or research or improve their production capabilities, making the colony ship building faster. I would have had to cancel the delayed task and create a new one. That doesn't sound fun, right? It's not. It would have been a hell to test and debug and it would be a host of many, many bugs that I could foresee. Plans cancelled.
KISS. Eventually I decided that I should go the game.tick() way and just implement a method that updates the whole world. Meh. It's ugly and I wanted to avoid that, but it seems to be the simplest solution and maybe even the right solution at the moment. I hacked up a game tick manager which on startup creates a promise-queue as well as add new games to the queue when these are created. It was not thought of very thoroughly but I didn't want to have all my games updated at the same time for premature optimization reasons. I actually don't feel like writing about that at the moment, but in general I create a promise that calls game.tick, waits a bit, and then re-inserts itself to the back of the queue.
I'm excited, I feel the first POC version of the game is getting in shape slowly. I got my ClickUp Gantt set up and I follow that successfully at the moment. That version will probably not be public yet at the beginning, but drop me a line if you're interested to check it up.
