@ancademy/bespoke-server NPM

About

@ancademy/elf-xxx is a set of kit for multiplayer web game development based on NodeJS and TypeScript. It allows you to focus on your scene rendering and gameplay instead of bothering about networking or database.

Features

Multiplayer: Game state is kept synchronized in realtime
TypeSafe: Declare player actions and states with strict generics
Logs: Game logs with the ability to time travel
Non-intrusive: Use React, PixiJS or anything other for view-layer rendering
Availability: Resume the game state after restarting
Extendable: Build regular http service with express

Prepare

This project runs on NodeJS v10 and uses Mongodb and Redis as the persistence layer, so we need to install them first.

Tutorial

This tutorial walks through the demo Tic-Tac-Toe, we use React as the renderer in this demo.

Init

Init project according to the guide of bespoke-cli

Concepts

namespace : The game will be mounted at the route : /namespace
ICreateParams : We can configure some parameters when creating a game, but in this demo it could be ignored.
State: The state of the world is divided into two parts, GameState is visible to everyone, while each player has his own PlayerState, they are passed around everywhere and maintained on both client and server seamlessly.
Move : MoveType and IMoveParams declare what actions will the players make and what parameters would be sent to the server.
Push : PushType and IPushParams declare what messages would be sent to players, which is independent of the state, and they won't be persisted.

Define State

Players are divided into groups of 2, we record number of players and who is the turn in IGameGroupState, the piece player held in IPlayerState

export enum Piece {
    null,
    x,
    o,
}

export enum GameStatus {
    matching,
    play,
    result,
}

export interface IGameGroupState {
    playerNum: number
    status: GameStatus
    pieces: Array<Piece>
    pieceTurn: Piece
}

export interface IGameState {
    groups: Array<IGameGroupState>
}

export interface IPlayerState {
    groupIndex: number
    piece: Piece
}

Define Move

export enum MoveType {
    getGroup,
    move
}
export interface IMoveParams {
    index: number // piece index
}

Client

In Play.tsx, as a player we can read gameState and playerState, and emit moves by frameEmitter, what you're doing next is to render your chessboard with React.

Server

In Logic.ts, we can init gameState and playerState, and then handle the player moves, just modify the state objects, they would be sync to client automatically.