Beginner’s Guide to Boardgame.io
Boardgame.io is an open source game engine for board games written in Javascript. The idea is to distill a lot of the rules and moves of a board game into functions that manipulate state, and then have the game engine handle multiplayer or storage aspects of the game.
Installation
First, boardgame.io is installed and used in react via the following commands
$ npx create-react-app name_of_game
$ cd name_of_game
$ npm install --save boardgame.ioThis will create a react named ‘name_of_game’ with boardgame.io dependencies.
Beginning Concepts
Then, to continue creating a board game using boardgame.io, you must first understand the state management system of boardgame.io. Game state in boardgame.io is shown using two objects, G and ctx.
These objects are passed everywhere and are accessible from functions to manipulate and change state. Those functions are called ‘moves’ and ‘events’.
Moves are defined when setting up the game object.
Here is an example index.js for a basic TicTacToe boardgame.io implementation, as provided by the boardgame.io tutorial:
The boardgame.io Client takes in a ‘game’ object, which includes the definition of the game itself, setting up the G and ctx objects, and the moves of the board game that manipulate those objects.
The client also takes a ‘board’ object, which present the board components which are shown on the webpage. The G and ctx objects are then used by the board component to present stateful components.
Game Object
Above is an example of a game object for boardgame.io. There, you can see that moves such as clickCell() are defined here. The moves can be passed the current G or ctx states, as well as any other parameters, and then will perform some action. Moves as defined in boardgame.io are always immutable and will not depend on any external state or cause side effects.
The setup of the initial G state and victory conditions and other game behaviors (endIf and turn: moveLimit) are also defined here. Other features, such as game AI, are also managed here.
Board Object
An example Board object is laid out above. The Board object for boardgame.io is to set up the webpage components that are viewed and manipulated by the user. In Board.js, you can present certain components dynamically based on the game state. You can also have buttons and other elements that can be interacted with in order to change the game state. In addition to the moves that were defined earlier (in Game.js) to manipulate the G state, ‘events’ are also provided in props (props.events) in order to manipulate the ctx state.
Conclusion
The three files above, (index.js, board.js, and game.js) are used to build the barebones of the TicTacToe implementation in boardgame.io in the tutorial. This tutorial demonstrates the minimum that can be achieved in boardgame.io. Using boardgame.io’s G and ctx state paradigm, board games can be distilled down to a series of moves and events that are then translated into webpages.
Sources
Most of the code is from the boardgame.io documentation tutorial:
