API

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:

1. State Machine
2. Pathfinding/Movement
3. Isometric Rendering
4. API
5. Control Sources
6. AI
7. Networking
8. Fog of War
9. Bit Packing
10. Palette Shifting

Other:

• Portraits
• Scrapped Ideas

----

API layer

To ensure the code doesn't devolve into too much spaghetti, the game is split logically into 4 main components:

• [GAME] = holds the actual characters, movement grid, attack grid, etc
• [API]  = mutates the GAME state, has functions for select Idle (x,y), select Move (destination x,y, path), select Target (target x,y)
• [UI] = given a sate, handles user input (by calling the api function) and draws to the screen
  • splash screen
  • select characters
  • select map
  • state idle
  • state movement
  • state targeting
• [components] = generic game components that are used by the  UI states
  • Renderer = draws & loads sprites/images
  • Network = sends packs
  • Isometric = does transforms on grid coordinates
  • Audio = plays sound
  • Text = renders text
  • Script = shows a cutscene
  • Animator* = draws an animation

* 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    │      │                     │
                                                │              │      │                     │
                                                └──────────────┘      └─────────────────────┘