Skip to content

How projects and the framework work

BGA provides a framework to help you build your game and integrate it into BGA. It also provides utility components and libraries to make coding easier and cover common game needs.

The back end

The back end uses PHP and MySQL.

Each project has a namespaced modules/php/Game.php as its back-end entry point, and a dbmodel.sql file to create custom database tables if needed. The framework and libraries should handle most of the database work for you.

The back end will:

  • set up the initial game situation based on the players joining the table and the selected options
  • handle player actions
  • store and update the game state
  • notify the front end of changes
  • send the current game state to the front end

The framework handles real-time and turn-based games in the same way. Each move is stored in the database, and nothing is kept in memory between moves. This can be a bit surprising at first, but it's needed for turn-based games to work!

The game state machine

The framework provides a built-in game state machine.

This simple example shows the five states of a card game. After setup, each player draws cards, then plays a card or passes. Players take turns until the game ends.

flowchart TD
    gameSetup[gameSetup] -->|start game| DrawCards[draw cards]
    DrawCards -->|draw cards| PlayCard[play card]
    PlayCard -->|play a card| NextPlayer[NextPlayer]
    PlayCard -->|pass| NextPlayer
    NextPlayer -->|next turn| DrawCards
    NextPlayer -->|end game| gameEnd[gameEnd]

The framework handles the gameSetup and gameEnd states. The states in between will be yours!

The framework stores the current state, handles automatic actions when entering a state, and defines the possible actions in that state.

There are three types of states:

  • "active player", with one active player. In our example, these are DrawCards and PlayCard.
  • "multiple active player", where several players can act during the same state.
  • "game", with no active players. These states always redirect to another state. In our example, NextPlayer redirects to the end of the game if the end condition is met, or starts another turn.

The front end

The front end uses JS/CSS.

Each project has a namespaced modules/js/Game.js as its front-end entry point, and a YourGameName.css file for styling.

Your project also has img, fonts and sounds folders for the images, fonts and sounds used in the game. You may only need the img folder.

The documentation and default project skeleton also provide the setup needed to work with TypeScript and SCSS instead of plain JS/CSS, if you want to use either of them. Their source files will be in the src folder.

The front end will:

  • render the game based on its current state
  • send player actions to the back end
  • use notifications from the back end to update the display
Language and library versions currently used by the BGA framework

Create your first (tutorial) project