Posted July 08, 2022 by stales
This is part of a series on how this game was implemented technically, as part of the Game Jam it was developed for. It is recommended to read them roughly in-order as later blog entries may refer to earlier ones.
Technical:
Other:
----
API layer
To ensure the code doesn't devolve into too much spaghetti, the game is split logically into 4 main components:
* the animation class is unique in that it works asynchronously. It uses promises with async/await.
Layout
The below diagram shows roughly how these components all work together
The user only interacts with a UI component, directed by the main update/draw loop
These then filter down through the API before eventually getting to the actual game state.
By moving up/down UI layers, the player can see menus or do different in-game actions, without needing to worry about how the game state is managed. Additionally, animations and cutscenes can be triggered anywhere, and will intercept the update() loop, and we can be sure the game state is never accidentally affected downstream.
------
diagram Update loop switch (current component) draw() update() ui_splash.draw() │ │ ui_splash.update(mouse input) │ │ ┌─────────────┐ ┌────────────────────┐ ├─────┼─────── unless Animation running, then: │ │ │ │ │ │ │ │ ◄────┤ │ │ │ play anim │ │ GAME │ │ API │ │ │ play script │ │ │ │ │ │ │ │ └─────────────┘ └────────────────────┘ │ │ │ ▲ │ │ │ │ ┌──────────────┐ ┌─────────────────────┐ │ │ │ │ │ │ │ ├───────────────┤ ui splash │ │ Renderer │ │ │ │ │ │ │ │ │ └────────┬─────┘ │ Audio │ │ │ │ │ │ │ │ ┌────────▼─────┐ │ Network │ │ │ │ │ │ │ │ ├───────────────┤ ui character │ │ Isometric │ │ │ │ │ │ │ │ │ └────────┬─────┘ │ Animations─────────┼───┘ │ │ │ │ │ │ ... │ │ Script ────────────┼───┘ │ ┌────────▼─────┐ │ │ │ │ │ │ Text │ └───────────────┤ ui target │ │ │ │ │ │ │ └──────────────┘ └─────────────────────┘