DEV Community: teamhitori

Lets Build an Online 4 Player Chess Game Using Only Free APIs. Part 2 - Single player mode🏃

teamhitori — Sun, 13 Nov 2022 01:23:07 +0000

What is this article all about 🔎

In this article, I'd like to walk you through the steps I took to create a multiplayer browser game using Babylonjs. My initial plan was to lay out each step in tutorial form, but as I've been writing this thing out, and in the interest of time, I'm realizing it's much quicker to just dump the code there and highlight the important parts in this article. Would be great to get your feedback, if anyone finds this at all interesting or useful, would help me decide what to talk about in my next article 😅

I'll be building on the work that I covered in my previous tutorial on laying out a basic game scene using Babylonjs.

Today I'd like to build on this by adding a basic single player mode.

If you'd like to play the game first, check it out here:

Play the Final game Here

1. House keeping

Lets start with a bit of tidy up, we'll move stuff around to give our selfs more space.

Delete the contents of shared.ts, and backend.ts, we don't need this code.

Move the following enum and interface declarations from frontend.ts into shared.ts: PlayerSide, PieceType, AliveState, PlayerPiece, Player. Update these declaration to include the 'export' keyword so that these declarations can be referrenced externally.

Next lets move code from frontend.ts into to a new file called babylonGameScene.ts, the simplest way to do this is to rename frontend.ts to babylonGameScene.ts, and create a new frontend.ts file.

2. Adding Movement

Ok, so now we need a way to keep track of which chess piece or grid block the player has selected and where they want to move. A player move consists of an action and a chess piece. An action consists of a grid number, an action type and optionally details about the opponents piece (we'll use this later). Add the following declarations to shared.ts

export enum ActionType {
  move,
  attack,
  defend,
}

export interface PlayerAction {
  gridPosition: number;
  actionType: ActionType;
  opponentPiece: { playerSide: PlayerSide; playerPiece: PlayerPiece } | undefined;
}

export interface RequestMove {
  playerPiece: PlayerPiece;
  playerAction: PlayerAction | undefined;
}

Next update the Player interface declaration to include a new property requestMove: RequestMove | undefined, is should now look as follows:

export interface Player {
  aliveState: AliveState;
  playerSide: PlayerSide;
  playerName: string;
  pieces: { [name: string]: PlayerPiece };
  requestMove: RequestMove | undefined,
}

Next we'll add the following interfaces, the first that extends Player and will house our chess mesh objects, and the second that will encapsulate a collection of players.

export interface FrontendPlayer extends Player {
    meshes: { [name: string]: AbstractMesh },
}

export interface FrontendGame {
  players: { [playerSide: number]: FrontendPlayer }
}

Back inside babylonGameScene.ts, somewhere towards the top of the file where we create variables, add the following:

export const frontendGame: FrontendGame = { players: {} };

Find where we create the scene and camera objects and add the export keyword

// This creates a basic Babylon Scene object (non-mesh)
export const scene = new Scene(engine);

// ....
export const camera = new ArcRotateCamera( ... );

Find the createNewPlayerMesh function, and just after the foreach, add the following

  return <FrontendPlayer>{
    meshes: meshes,
    requestMove: undefined,
    pieces: player.pieces,
    playerSide: player.playerSide,
    aliveState: AliveState.alive,
  };

Find the foreach loop where we call createNewPlayerMesh and replace with the following:

  frontendGame.players[+playerSide] = createNewPlayerMesh(player, chessPieces);

So much code and still no movement, I hear you cry. Well hold one, we've done a lot, we've defined our main game objects and now we're ready to add behavior.

Turn to frontend.ts, this file should be empty at this point, lets add the following:

import './babylonGameScene';

Your code should look as follows:

Stackblitz

Lets capture a pointer event in order to move our chess pieces

scene.onPointerUp = function castRay() {

    var ray = scene.createPickingRay(scene.pointerX, scene.pointerY, Matrix.Identity(), camera);
    var hit = scene.pickWithRay(ray, mesh => { return mesh && mesh.name == "block" });

    console.log(hit?.pickedMesh?.id);

    if (hit?.pickedMesh != undefined && hit?.pickedPoint != undefined) {

        onSelection(myPlayer, +hit.pickedMesh.id);

    }
}

We use a ray to indicate where on the chess board the player has touched or clicked, and we call onSelection with this information

function onSelection(myPlayer: FrontendPlayer, gridPosition: number) {

    if (myPlayer.requestMove != undefined &&
        myPlayer.requestMove.playerPiece.gridPosition != gridPosition) {

        var playerAction = <PlayerAction>{
            actionType: ActionType.move,
            gridPosition: gridPosition,
            opponentPiece: undefined
        }

        if (playerAction != undefined) {

            var requestMove = <RequestMove>{
                playerAction: playerAction,
                playerPiece: myPlayer.requestMove.playerPiece
            };

            playerMove(myPlayer.playerSide, requestMove);
        }

        myPlayer.requestMove = undefined;

    } else {
        selectPiece(myPlayer, gridPosition);
    }
}

In our on selection function, we use the requestMove property of our FrontendPlayer object to identify if we've already selected a chess piece, in which case the action is to move this piece. Or else we're just selecting the piece. Our selectPiece looks like this:

function selectPiece(myPlayer: FrontendPlayer, gridPosition: number) {

    for (const pieceName in myPlayer.pieces) {
        const piece = myPlayer.pieces[pieceName]!!;

        if (piece.gridPosition == gridPosition && piece.aliveState == AliveState.alive) {

            if (!myPlayer.requestMove) {
                myPlayer.requestMove = {
                    playerPiece: piece,
                    playerAction: undefined
                };

                return;
            }
            if (myPlayer.requestMove.playerPiece.gridPosition == gridPosition) {
                myPlayer.requestMove = undefined;

                return;
            }
        }
    }
}

We loop though our chess pieces to see if the gird positions match, if so, we select this piece. Our player move looks like this:

function playerMove(playerSide: PlayerSide, confirmedMove: RequestMove) {

    const player = frontendGame.players[playerSide]!!;
    const piece = player.pieces[confirmedMove.playerPiece.pieceName]!!
    const pieceMesh = player.meshes[confirmedMove.playerPiece.pieceName]!!
    const newWorldPosition = gridToWorld(confirmedMove.playerAction!!.gridPosition);

    pieceMesh.position = newWorldPosition;
    piece.gridPosition = confirmedMove.playerAction!!.gridPosition;
    piece.isFirstMove = false;
}

We pass in our player object ad details of the confirmed move, and use this to update our mesh position. At this point we should have movement, a bit jumpy and hard to follow at this point but a good start.

Stackblitz

Lets add some animation to make things clearer to see.

2. Adding Animation

Lets improve our chess piece movement by adding in some animation so that we can more easily track grid transitions.

We'll put all of our animation code into a file called animations.ts

Add the following helper functions getRotateAnim, getRotateAlphaAnim, getRotateBetaAnim, getDiffuseColorAnim, getPositionAnim, getVisibilityAnim:

import { Animation, Color3, Vector3 } from "babylonjs"

var frameRate = 25;


export function getRotateAnim(name: string, rotationFrom: Vector3, rotationTo: Vector3, repeatType: number): Animation {
    var movein = new Animation(
        name,
        "rotation",
        frameRate,
        BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
        repeatType
    );
    var movein_keys = [];
    movein_keys.push({
        frame: 0,
        value: rotationFrom
    });
    movein_keys.push({
        frame: frameRate / 2,
        value: rotationTo
    });
    movein_keys.push({
        frame: frameRate,
        value: rotationFrom
    });
    movein.setKeys(movein_keys);
    return movein;
}

export function getRotateAlphaAnim(rotationFrom: number, rotationTo: number): Animation {
    var movein = new Animation(
        "movein",
        "alpha",
        frameRate,
        BABYLON.Animation.ANIMATIONTYPE_FLOAT,
        BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
    );
    var movein_keys = [];
    movein_keys.push({
        frame: 0,
        value: BABYLON.Tools.ToRadians(rotationFrom)
    });
    movein_keys.push({
        frame: frameRate,
        value: BABYLON.Tools.ToRadians(rotationTo)
    });
    movein.setKeys(movein_keys);
    return movein;
}

export function getRotateBetaAnim(rotationFrom: number, rotationTo: number): Animation {
    var movein = new Animation(
        "movein",
        "beta",
        frameRate,
        BABYLON.Animation.ANIMATIONTYPE_FLOAT,
        BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
    );
    var movein_keys = [];
    movein_keys.push({
        frame: 0,
        value: BABYLON.Tools.ToRadians(rotationFrom)
    });
    movein_keys.push({
        frame: frameRate,
        value: BABYLON.Tools.ToRadians(rotationTo)
    });
    movein.setKeys(movein_keys);
    return movein;
}

export function getDiffuseColorAnim(colorFrom: Color3, colorTo: Color3): Animation {
    var movein = new Animation(
        "color",
        "material.diffuseColor",
        frameRate,
        BABYLON.Animation.ANIMATIONTYPE_COLOR3,
        BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
    );
    var movein_keys = [];
    movein_keys.push({
        frame: 0,
        value: colorFrom
    });
    movein_keys.push({
        frame: frameRate,
        value: colorTo
    });
    movein.setKeys(movein_keys);

    return movein;
}

export function getPositionAnim(positionFrom: Vector3, positionTo: Vector3): Animation {
    var movein = new Animation(
        "position",
        "position",
        frameRate,
        BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
        BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
    );
    var movein_keys = [];
    movein_keys.push({
        frame: 0,
        value: positionFrom
    });
    movein_keys.push({
        frame: frameRate,
        value: positionTo
    });
    movein.setKeys(movein_keys);
    return movein;
}

export function getVisibilityAnim(visibilityFrom: number, visibilityTo: number): Animation {
    var movein = new Animation(
        "visibility",
        "visibility",
        frameRate,
        BABYLON.Animation.ANIMATIONTYPE_FLOAT,
        BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
    );
    var movein_keys = [];
    movein_keys.push({
        frame: 0,
        value: visibilityFrom
    });
    movein_keys.push({
        frame: frameRate,
        value: visibilityTo
    });
    movein.setKeys(movein_keys);
    return movein;
}

For each of these helper functions, we build an animation that we can apply to a gamescene object based on some parameters.

Open up shared.ts and add the following

export const rotations: { [playerSide in PlayerSide]: number } = {
    0: 180,
    1: 90,
    2: 0,
    3: 270
}

We'll find our playerMove function inside frontend.ts and replace:

// replace this line
pieceMesh.position = newWorldPosition;

with:

scene.beginDirectAnimation(
    player.meshes[piece.pieceName],
    [
      getPositionAnim(
        player.meshes[piece.pieceName].position,
        newWorldPosition
      ),
    ],
    0,
    25,
    false,
    10
  );

At the bottom of our file, we'll add the following animation to transition to our start position

scene.beginDirectAnimation(
  camera,
  [getRotateAlphaAnim(0, rotations[PlayerSide.bottom]), getRotateBetaAnim(10, 40)],
  0, 25, false, 0.5);

We should how have the following:

Stackblitz

3. Adding movement rules

Now that we have movement and animation, lets add in our chess movement rules, for instance our pawns will be able to move one grid at a time, except for the first move in which they can move 3 (it's chess royale so we're allowed to bend the rules a bit :).

Lets open up shared.ts and add the following definitions that we'll use to define how our chess pieces will move

export enum MovementType {
  fixed,
  continuous
}

export enum GridBlockStatus {
  unselected,
  primary,
  secondary,
  path,
  blocked,
  hit
}

export interface Movement {
  movementType: MovementType,
  moveDirection: { x: number, y: number }[],
  attackDirection: { x: number, y: number }[]
}

export interface GridBlock {
  mesh: Mesh,
  material: StandardMaterial,
  defaultPosition: Vector3,
  status: GridBlockStatus
}

Now we'll use these definitions to construct a list of valid moves for each chess piece type

export const validMoves: { [pieceTypeName: string]: Movement } = {
  "pawn-first-move": {
      movementType: MovementType.fixed,
      moveDirection: [{ x: 0, y: 1 }, { x: 0, y: 2 }, { x: 0, y: 3 }, { x: 1, y: 0 }, { x: -1, y: 0 }],
      attackDirection: [{ x: 1, y: 1 }, { x: -1, y: 1 }]
  },
  "pawn": {
      movementType: MovementType.fixed,
      moveDirection: [{ x: 0, y: 1 }, { x: 1, y: 0 }, { x: -1, y: 0 }],
      attackDirection: [{ x: 1, y: 1 }, { x: -1, y: 1 }]
  },
  "tower": <Movement>{
      movementType: MovementType.continuous,
      moveDirection: [{ x: 0, y: 1 }, { x: 1, y: 0 }, { x: 0, y: -1 }, { x: -1, y: 0 }],
      attackDirection: [{ x: 0, y: 1 }, { x: 1, y: 0 }, { x: 0, y: -1 }, { x: -1, y: 0 }]
  },
  "knight": <Movement>{
      movementType: MovementType.fixed,
      moveDirection: [{ x: 1, y: 2 }, { x: -1, y: 2 }, { x: 2, y: -1 }, { x: 2, y: 1 }, { x: -1, y: -2 }, { x: 1, y: -2 }, { x: -2, y: 1 }, { x: -2, y: -1 }],
      attackDirection: [{ x: 1, y: 2 }, { x: 2, y: -1 }, { x: -1, y: -2 }, { x: -2, y: 1 }]
  },
  "bishop": <Movement>{
      movementType: MovementType.continuous,
      moveDirection: [{ x: 1, y: 1 }, { x: -1, y: 1 }, { x: -1, y: -1 }, { x: 1, y: -1 }],
      attackDirection: [{ x: 1, y: 1 }, { x: -1, y: 1 }, { x: -1, y: -1 }, { x: 1, y: -1 }]
  },
  "queen": <Movement>{
      movementType: MovementType.continuous,
      moveDirection: [{ x: 0, y: 1 }, { x: 1, y: 0 }, { x: 0, y: -1 }, { x: -1, y: 0 }, { x: 1, y: 1 }, { x: -1, y: 1 }, { x: -1, y: -1 }, { x: 1, y: -1 }],
      attackDirection: [{ x: 0, y: 1 }, { x: 1, y: 0 }, { x: 0, y: -1 }, { x: -1, y: 0 }, { x: 1, y: 1 }, { x: -1, y: 1 }, { x: -1, y: -1 }, { x: 1, y: -1 }]
  },
  "king": <Movement>{
      movementType: MovementType.fixed,
      moveDirection: [{ x: 0, y: 1 }, { x: 1, y: 0 }, { x: 0, y: -1 }, { x: -1, y: 0 }, { x: 1, y: 1 }, { x: -1, y: 1 }, { x: -1, y: -1 }, { x: 1, y: -1 }],
      attackDirection: [{ x: 0, y: 1 }, { x: 1, y: 0 }, { x: 0, y: -1 }, { x: -1, y: 0 }, { x: 1, y: 1 }, { x: -1, y: 1 }, { x: -1, y: -1 }, { x: 1, y: -1 }]
  }
}

We'll now turn to frontend.ts and add a few functions that will allow us to visualize these movements. The first is a large function (which can definitely be simplified), the purpose of this function is to return a list of allowed moves for a selected chess piece

function getValidMoves(playerPiece: PlayerPiece, playerSide: PlayerSide, players: { [playerSide: number]: Player | FrontendPlayer }): PlayerAction[] {

    var actualMoveList: PlayerAction[] = [];

    var myplayer = players[playerSide]

    if (myplayer.aliveState == AliveState.alive && playerPiece.aliveState == AliveState.alive) {

        var pieceTypeName: string = PieceType[playerPiece.pieceType]

        var moves = playerPiece.pieceType == PieceType.pawn &&
            playerPiece.isFirstMove == true ? validMoves["pawn-first-move"] : validMoves[pieceTypeName];

        moves.moveDirection.forEach(m => {
            var myRelativeGridPos = roatate(playerPiece.gridPosition, playerSide, false);

            var nextPosition = myRelativeGridPos + m.x + m.y * gridWidth;
            var rawMoveList: number[] = [];

            // first work out player moves without cosidering collisions
            if (moves.movementType == MovementType.continuous) {

                while (
                    nextPosition >= 0 &&
                    nextPosition < gridWidth * gridWidth &&
                    Math.floor((myRelativeGridPos + m.y * gridWidth) / gridWidth) == Math.floor((nextPosition) / gridWidth)) {

                    rawMoveList.push(nextPosition);

                    myRelativeGridPos = nextPosition;
                    nextPosition += m.x + m.y * gridWidth;
                }
            } else {
                if (nextPosition >= 0 &&
                    nextPosition < gridWidth * gridWidth &&
                    Math.floor((myRelativeGridPos + m.y * gridWidth) / gridWidth) == Math.floor((nextPosition) / gridWidth)) {

                    rawMoveList.push(nextPosition)
                }
            }

            // now itterate throgh moves and exclude collisions, for valid moves, work out if the movement will
            // hit an apponents piece
            for (const move of rawMoveList) {
                for (const pieceName in myplayer.pieces) {
                    const piece = myplayer.pieces[pieceName];

                    var playerGridPos = roatate(piece.gridPosition, playerSide, false);

                    if (playerGridPos == move && piece.aliveState == AliveState.alive) {
                        return;
                    }
                }

                for (const opponentSide in players) {
                    const opponent = players[+opponentSide];

                    if (+opponentSide == playerSide) continue;
                    if (opponent.aliveState == AliveState.dead) continue;

                    for (const opponentPieceName in opponent.pieces) {
                        var opponentPiece = opponent.pieces[opponentPieceName];
                        var relativePosition = roatate(opponentPiece.gridPosition, playerSide, false);

                        if (relativePosition == +move && opponentPiece.aliveState == AliveState.alive) {
                            actualMoveList.push({
                                actionType: ActionType.attack,
                                gridPosition: roatate(move, playerSide, true),
                                opponentPiece: { playerSide: +opponentSide, playerPiece: opponentPiece }
                            });
                            return;
                        }
                    }
                }

                actualMoveList.push({ actionType: ActionType.move, gridPosition: roatate(move, myplayer.playerSide, true), opponentPiece: undefined });
            }
        });
    }

    console.log(`${playerPiece.pieceName}: ${AliveState[playerPiece.aliveState]}, player: ${AliveState[myplayer.aliveState]} moves`, actualMoveList)

    return actualMoveList;
}

We first build a list of potential moves based on the correct piece position, and the list of allowed movements. We then exclude from this list any collisions with our own chess pieces. We then return this list along with whether this move will result in an attack on our opponents piece.

Next we'll add the following helper function

function roatate(gridPosition: number, count: number, isClockwise: boolean): number {

    var gridSize = gridWidth * gridWidth;

    for (let index = 0; index < count; index++) {
        var y = Math.floor(gridPosition / gridWidth);
        var x = (gridPosition % gridWidth);

        if (isClockwise) {
            gridPosition = (x * gridWidth) + ((gridWidth - 1) - y);
        } else {
            gridPosition = (((gridWidth - 1) - x) * gridWidth) + y;
        }

    }

    return ((gridPosition % gridSize) + gridSize) % gridSize;
}

We'll now add functions to update our grid colors based on this information

function updateGridColor(myPlayer: FrontendPlayer) {

    var validMoveList:PlayerAction[] = []

    if (myPlayer.requestMove != undefined) {
        validMoveList = getValidMoves(myPlayer.requestMove.playerPiece, myPlayer.playerSide, frontendGame.players);
    }

    setGridColor(validMoveList);

}

function setGridColor(validMoveList: PlayerAction[]) {

    if (myPlayer?.requestMove == undefined) {
        for (const gridPos in grid) {
            const gridEl = grid[gridPos];
            scene.beginDirectAnimation(gridEl, [getDiffuseColorAnim(gridEl.material.diffuseColor, Color3.FromInts(255, 255, 255))], 0, 25, false, 3);
        }
    } else {
        for (const gridPos in grid) {
            if (myPlayer.requestMove.playerPiece.gridPosition == +gridPos) continue;
            const gridEl = grid[gridPos];
            var blocked = false;

            for (const pieceName in myPlayer.pieces) {
                var piece = myPlayer.pieces[pieceName];
                if (piece.gridPosition == +gridPos && piece.aliveState == AliveState.alive) blocked = true;
            }

            var color = Color3.FromInts(90, 90, 90);
            if (blocked) {
                color = Color3.FromInts(255, 50, 50);
            } else if (validMoveList.some(m => m.gridPosition == +gridPos && m.actionType == ActionType.attack)) {
                color = Color3.FromInts(0, 100, 255);
            } else if (validMoveList.some(m => m.gridPosition == +gridPos && m.actionType == ActionType.move)) {
                color = Color3.FromInts(255, 255, 255);
            }
            scene.beginDirectAnimation(gridEl, [getDiffuseColorAnim(gridEl.material.diffuseColor, color)], 0, 25, false, 3);
        }
    }
}

Stackblitz

4. Adding Game Logic

For the game logic, please refer to the stackblitz link below

Stackblitz

5. Adding AI

For an example of implementing some crude player AI, please refer to the stackblitz link below

Stackblitz

Thanks again for stopping by, really hope you enjoyed the read.

Have a nice day 🌞

Lets Build an Online 4 Player Chess Game Using Only Free APIs. Part 1 - Setting things up 💣

teamhitori — Mon, 24 Oct 2022 10:33:31 +0000

What is this article all about 🔎

Writing games is both a uniquely challenging and rewarding endeavour, a great way to improve you're analytical skills, and the fruits of a well written game are well..

This article is part of a series in which I'd like to showcase steps to create a browser based online mulitplayer game using free and opensource api's. I'll assume that the reader is somewhat familiar with Typescript and Babylonjs the realtime 3d game engine. But I will try to explain what the code does as necessary. Also, all of the code will be available in Stackblitz where you can follow along or just run the code without the need to install any tools.

Ok, enough jibber jabber. We're here to make games. 👊 Today we'll work on a remake of the well known game of chess. We'll make it multiplayer such that anyone with a link can join, and we'll spice things up by making it into a 2 - 4 player game, we'll also get rid of the turn based system because, why not?

For those who need to see the game in action first, I don't blame you, you can see the live version of the final game here:

1. Getting started 🚀

In order to follow along the only thing you'll need is a web browser. We'll be doing using stackblitz, an incredible browser based IDE based on VS Code, that will allow us to write, compile and debug our game, and I'll also provide links to key steps as we progress.

Navigate to stackblitz and start a New Project based on the Blank Nodejs template.

Once the template load, open up the Terminal Window, and execute the following commands:

npm i @frakas/cli
npx frakas init
npx frakas serve

These should take a moment to run, and once complete you should see the following:

Stackblitz

2. Add game resources 🪨🪵🪓

For the chess board, we'll use some royalty free images courtesy of pexels

https://images.pexels.com/photos/172276/pexels-photo-172276.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

https://images.pexels.com/photos/2824173/pexels-photo-2824173.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

Next we'll need some 3d chess pieces. This royalty free collection from Turbosquid looks great:

https://www.turbosquid.com/3d-models/chess-pieces-3d-model-1502330.

The file format of this file is .fbx, in order to make this play nicely with Babylonjs we'll need to convert the format to .glb. This can be done using Blender. However since blender is out of scope for this tutorial, you can obtain a copy of this resource from my github repo here:

https://raw.githubusercontent.com/teamhitori/chess-royale/main/raw/chess.glb

Let's add these to our game.

Open up src/frontend.ts, delete the contents and add the following imports:

import {
  Engine,
  Scene,
  Vector3,
  HemisphericLight,
  ShadowGenerator,
  PointLight,
  MeshBuilder,
  StandardMaterial,
  ArcRotateCamera,
  Matrix,
  Color3,
  AssetContainer,
  SceneLoader,
  Texture,
  AbstractMesh,
  InstantiatedEntries,
  TransformNode,
} from 'babylonjs';
import { createFrontend, FrontendTopic } from '@frakas/api/public';
import { PlayerEvent } from './shared';
import { LogLevel } from '@frakas/api/utils/LogLevel';
import { filter, tap } from 'rxjs';
import 'babylonjs-loaders';

Next add the following variables, enums, and interfaces that will help us structure our game.

const squareSize = 1;
const gridWidth = 12;
const halfGridWidth = gridWidth / 2;

enum PlayerSide {
  top = 0,
  left = 1,
  bottom = 2,
  right = 3
}

enum PieceType {
  pawn,
  knight,
  bishop,
  tower,
  queen,
  king
}

enum AliveState {
  alive,
  dead
}

interface PlayerPiece {
  pieceName: string
  pieceType: PieceType;
  gridPosition: number,
  aliveState: AliveState,
  isFirstMove: boolean
}

interface Player {
  aliveState: AliveState,
  playerSide: PlayerSide,
  playerName: string,
  pieces: { [name: string]: PlayerPiece },
}

First we're defining some constants to do with the chess grid, each block will be unit 1 size, and the grid will have a width of 12 units. We the define some useful enumerations for the player side, type of chess piece and whether the piece is alive or dead.
We then define the properties of a Player piece which are hopefully self explanatory. We then define the properties of a player who basically has a side, a name, a collection of chess pieces, and is either alive or dead. Next lets add the Babylonjs game engine code.


// HTML Canvas used by Babylonjs to project game scene
var canvas = document.getElementById('renderCanvas') as HTMLCanvasElement;

// Load the 3D engine
var engine = new Engine(canvas, true, {
  preserveDrawingBuffer: true,
  stencil: true,
});

// This creates a basic Babylon Scene object (non-mesh)
var scene = new Scene(engine);

// This creates an arcRotate camera
var camera = new ArcRotateCamera(
  'camera',
  BABYLON.Tools.ToRadians(0),
  BABYLON.Tools.ToRadians(10),
  16,
  new Vector3(halfGridWidth, 0, halfGridWidth - 0.5),
  scene
);
camera.minZ = 0.1;
camera.wheelPrecision = 80;
camera.pinchPrecision = 30;
camera.angularSensibilityX = 6000;
camera.angularSensibilityY = 6000;
camera.upperBetaLimit = BABYLON.Tools.ToRadians(80);
camera.lowerRadiusLimit = 5;
camera.upperRadiusLimit = 30;

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var lightH = new HemisphericLight('light1', new Vector3(0, 1, 0), scene);

// Default intensity is 1. Let's dim the light a small amount
lightH.intensity = 0.7;

var light = new PointLight('point-light', new Vector3(3, 3, -3), scene);
light.position = new Vector3(3, 10, 3);
light.intensity = 0.5;

// Babylonjs render loop
engine.runRenderLoop(() => {
  scene?.render();
});

Here we've added some boilerplate babylonjs setup along with useful variables for our game. We've added the Babylon Engine, Scene, a Camera a Hemispheric Light and a Point Light. Finally we've called the engine render loop and added a call to scene?.render();

Refresh the preview screen at this stage and our code should compile, but we will be presented with a dark scene as we have not added any physical objects yet. Lets do that now.

// Babylonjs built-in 'ground' shape. Params: name, options, scene
var ground = MeshBuilder.CreateBox('table', {
  width: gridWidth + 1,
  depth: gridWidth + 1,
  height: 1,
}); //MeshBuilder.CreateGround("ground", { width: gridWidth, height: gridWidth }, scene);
var groundMaterial = new StandardMaterial('groundMaterial', scene);
groundMaterial.diffuseTexture = new Texture(
  `https://images.pexels.com/photos/172276/pexels-photo-172276.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1`
);
ground.material = groundMaterial;
ground.receiveShadows = true;
ground.position = new Vector3(
  halfGridWidth - squareSize / 2,
  0,
  halfGridWidth - squareSize / 2
);

var shadowGenerator = new ShadowGenerator(1024, light);
shadowGenerator.useExponentialShadowMap = true;

You should now see the following wooden table top rendered, and you should be able to rotate and zoom the camera using your mouse or touch screen.

Next we'll add our chess grid. Since this is an upto 4 player game, we'll need a grid bigger than 8x8, lets go for 12x12.

for (let index = 0; index < gridWidth * gridWidth; index++) {
  var block = MeshBuilder.CreateBox(`block`, {
    width: 0.85,
    height: 0.1,
    depth: 0.85,
  });
  block.id = `${index}`;

  var blockMaterial = new StandardMaterial('groundMaterial', scene);
  var blockTexture = new Texture(
    `https://images.pexels.com/photos/2824173/pexels-photo-2824173.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1`
  );
  blockTexture.vScale = 1 / 10;
  blockTexture.uScale = 1 / 10;
  blockTexture.uOffset = Math.random();
  blockTexture.vOffset = Math.random();
  var defaultPosition = new Vector3(
    Math.floor(index / gridWidth),
    0.55,
    index % gridWidth
  );
  blockMaterial.diffuseTexture = blockTexture;
  block.material = blockMaterial;
  block.receiveShadows = true;
  block.position = defaultPosition;
}

Here we're looping through the 12x12 grid and creating blocks using a random part of our stone texture. We should now see the following:

![Chess Grid](https://github.com/teamhitori/chess-royale/blob/main/raw/1.3-image.jpg?raw=true

Finally lets add the chess pieces.

var assetContainer = await new Promise<AssetContainer>((resolve) => {
  SceneLoader.LoadAssetContainer(
    'https://chess-royale.frakas.net/assets/',
    'chess.glb',
    scene,
    (container) => {
      container.addAllToScene();
      for (const g of container.geometries) {
        g.meshes[0].isVisible = false;
      }
      resolve(container);
    }
  );
});

var chessPieces = assetContainer.instantiateModelsToScene(
  (name) => `chess-pieces`,
  true,
  { doNotInstantiate: true }
);

We create a babylon asset container to manage loading the chess.glb files, note that these file are being pulled from https://chess-royale.frakas.net. I've made this resource available here as github does not allow CORS for *.glb files, and you will see an error when trying to run from Stackblitz. Alternatively if you're working in VSCode, you can reference the files directly. Next add the following functions:

function roatate(
  gridPosition: number,
  count: number,
  isClockwise: boolean
): number {
  var gridSize = gridWidth * gridWidth;

  for (let index = 0; index < count; index++) {
    var y = Math.floor(gridPosition / gridWidth);
    var x = gridPosition % gridWidth;

    if (isClockwise) {
      gridPosition = x * gridWidth + (gridWidth - 1 - y);
    } else {
      gridPosition = (gridWidth - 1 - x) * gridWidth + y;
    }
  }

  return ((gridPosition % gridSize) + gridSize) % gridSize;
}

function getStartPosition(side: PlayerSide): Player {
  var pieces: { [piece: string]: { type: PieceType; pos: number } } = {
    pawn1: { type: PieceType.pawn, pos: 29 },
    pawn2: { type: PieceType.pawn, pos: 15 },
    pawn3: { type: PieceType.pawn, pos: 16 },
    pawn4: { type: PieceType.pawn, pos: 2 },
    pawn5: { type: PieceType.pawn, pos: 9 },
    pawn6: { type: PieceType.pawn, pos: 19 },
    pawn7: { type: PieceType.pawn, pos: 20 },
    pawn8: { type: PieceType.pawn, pos: 30 },
    tower1: { type: PieceType.tower, pos: 3 },
    tower2: { type: PieceType.tower, pos: 8 },
    knight1: { type: PieceType.knight, pos: 17 },
    knight2: { type: PieceType.knight, pos: 18 },
    bishop1: { type: PieceType.bishop, pos: 4 },
    bishop2: { type: PieceType.bishop, pos: 7 },
    queen: { type: PieceType.queen, pos: 5 },
    king: { type: PieceType.king, pos: 6 },
  };

  var player = <Player>{
    pieces: {},
    playerSide: side,
  };

  for (const pieceName in pieces) {
    var config = pieces[pieceName];

    switch (side) {
      case PlayerSide.top:
        break;
      case PlayerSide.left:
        config.pos = roatate(pieces[pieceName].pos, 1, true);
        break;
      case PlayerSide.bottom:
        config.pos = roatate(pieces[pieceName].pos, 2, true);
        break;
      case PlayerSide.right:
        config.pos = roatate(pieces[pieceName].pos, 3, true);
        break;
    }

    var playerPiece = <PlayerPiece>{
      aliveState: AliveState.alive,
      pieceType: config.type,
      gridPosition: config.pos,
      pieceName: pieceName,
      isFirstMove: true,
    };

    player.pieces[pieceName] = playerPiece;
  }

  return player;
}

function gridToWorld(gridPosition: number): Vector3 {
  return new Vector3(
    -Math.floor(gridPosition / gridWidth),
    0.6,
    gridPosition % gridWidth
  );
}

The first function roatate rotates a grid coordinate vector by 90 degrees, it contains algorithmic logic that I wont devlve too deeply into here other than to point to this stackoverflow on 2d Vector Rotations. We then define a function getStartPosition that based on a playerside enume as input will rotate pieces to find correct start location. We then add a helper function gridToWorld that will map grid positions back to the game world vector location. Next we add 2 more game constants:

const colorMapping: { [playerSide in PlayerSide]: string } = {
  0: '#590696',
  1: '#FBCB0A',
  2: '#37E2D5',
  3: '#C70A80',
};

const pieceTypeMapping: { [piece: string]: PieceType } = {
  pawn1: PieceType.pawn,
  pawn2: PieceType.pawn,
  pawn3: PieceType.pawn,
  pawn4: PieceType.pawn,
  pawn5: PieceType.pawn,
  pawn6: PieceType.pawn,
  pawn7: PieceType.pawn,
  pawn8: PieceType.pawn,
  tower1: PieceType.tower,
  tower2: PieceType.tower,
  knight1: PieceType.knight,
  knight2: PieceType.knight,
  bishop1: PieceType.bishop,
  bishop2: PieceType.bishop,
  queen: PieceType.queen,
  king: PieceType.king,
};

These 2 constants allow us to map a player side to a color, and an player piece to the PieceType as each player will start the game with a fixed set of pieces. Lets get everything on screen finally.

for (var playerSide = 0; playerSide < 4; playerSide++) {
  var player = getStartPosition(+playerSide);
  createNewPlayerMesh(player, chessPieces);
}

function createNewPlayerMesh (player: Player, assets: InstantiatedEntries) {
  var meshes: { [name: string]: TransformNode } = {};
  for (const pieceName in player.pieces) {
    var piece = player.pieces[pieceName];
    const worldPosition = gridToWorld(piece.gridPosition);
    meshes[pieceName] = configureMesh(
      assets.rootNodes[0]
        .getChildMeshes()
        [pieceTypeMapping[pieceName]].clone('', null, false)!!,
      Color3.FromHexString(colorMapping[player.playerSide]),
      worldPosition
    );
  }
};

function configureMesh(mesh: AbstractMesh, color: Color3, position: Vector3){
  var meshMaterial = new StandardMaterial('groundMaterial', scene);
  meshMaterial.diffuseTexture = new Texture(
    `https://images.pexels.com/photos/172276/pexels-photo-172276.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1`
  );
  meshMaterial.diffuseColor = color;
  mesh.material = meshMaterial;
  mesh.position = position;
  mesh.isVisible = true;
  mesh.isPickable = false;
  shadowGenerator.addShadowCaster(mesh);
  return mesh;
};

For each player side we'll call createNewPlayerMesh passing in player configuration. the function calculates the game world location for each player piece and call the function configureMesh which is responsible for adding the mesh to the Bablylonjs Scene so that it is visible to us.

You should now see something similar to the following;

Stackblitz

This completes the initial game setup, and everything I wanted to get to in this tutorial. I really hope you enjoyed, and thank for reading to the end 👏 Please stay tunes for the next article where I will run through adding movement and setting up the backend so that multiple players can complete. Any feedback, would be great to hear from you in the comments!

Have a nice day 🌞

Multiplayer concept using Babylonjs, Azure and Frakas

teamhitori — Thu, 29 Sep 2022 12:35:30 +0000

Some shameless self promotion here.. if you haven't click away in disgust already, thanks! hopefully I'll make this read worth your while and if you're a midnight game developer or interested in budget games in general, would be great to know if you find this post interesting.

The Pan

Create a multi-player browser game that can be played across multiple devices using free opensource tools and libraries and share findings.

TLDR

For those who want to see the final game, here it is running on Azure.

RUNNING MAN - DEMO

Source code available in Github:

teamhitori / running-man

Game Demo using Frakas

Running Man multiplayer demo game using Frakas

RUNNING MAN DEMO

Run locally

Prerequisites

Install [Node.js] which includes [Node Package Manager][npm]
Install Typescript

Usage

To build and run:

frakas serve

This with compile typescript files, start a backend run time and basic web server to host game.

For questions or how to contribute, reach me at reubenh@frakas.net

View on GitHub

Back to the plan

For the rendering engine I am using Babylonjs. It's a free and opensource, JavaScript rendering engine that runs in the browser on top of WebGL, it's really easy to use, has great documentation and a vibrant user community.

to get started you can can try out the engine without any tools, and directly from your browser using the playground:

Babylon Playground

The challenge is that I also want some game logic to run centrally that can deal with events from all connected players such as new players entering / exiting the game and passing around general game events.

For this I'll use a nodejs framework called Frakas. This is a nodejs framework that I have been working on, that helps with wiring up backend logic to connected players, and simplifies this interaction, along with local development.

teamhitori / frakas

Frakas the multiplayer framework

@frakas/cli is a command line tool a nodejs library and a cloud backend for making games multiplayer.

What can I do?

Get started making a browser based multiplayer in one command. The frakas api is opinionated and simplifies common challenges in making an online distributed multiplayer game.

Getting Started

Prerequisites

Install [Node.js] which includes [Node Package Manager][npm]
Install Typescript

Installation

To use FRAKAS in your project, run:

npm i @frakas/cli

Usage

To get setup run:

frakas init

This will create files required for basic application in you current directory

To build and run:

frakas serve

This with compile typescript files, start a backend run time and basic web server to host game.

Below is an example of the Hello World game that is created.

For questions or how to contribute, reach me at reubenh@frakas.net

View on GitHub

Finally I need a cheap way to host my game, Microsoft Azure have a great Service called Webapps, with a cool free tier which provides us with 1 hour per day up-time for development.

The Game

To keep things really simple, the basic idea will be for a group of up to 6 players to enter some kind of Area, each player will have a color assigned and the goal will be to collect the ball that matches your color and get back to base. The first one back wins, the last one looses. To add some variability, you can pick up other balls and throw at other players, if hit by a ball, you will drop your ball and "go flying".

Setting things up

Details of setting up Frakas are available on the github page, but in short you'll need to have nodejs installed.

Run the following command

npm i -g @frakas/cli

The following Frakas command will install Babylonjs and setup a basic game.

frakas init

Run the following command to compile and serve your game locally.

frakas serve

Open up your browser at http://localhost:8080 and you should see the following:

Running game in Azure

In order to push the game to Azure, I'll use the azure CLI, a great way to automate changes to Azure service.

Assuming that you are able to run your game locally, pushing to Azure can be done in the following commands:

az login

Push changes

az webapp up --sku F1 --name $appname -g $appname

To conclude

I've left out many details about how I put the game together, challenges and design decisions, but I'd be happy to create a 2nd post if any interest!

I think that there's huge potential in making multiplayer game creation more accessible to developers.

cheers.