Multiplayer concept using Babylonjs, Azure and Frakas
Tags: webdev, showdev, gamedev, babylonjs
Published: 2022-09-29 12:35:30

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](https://running-man.azureedge.net)

Source code available in Github:

{% embed https://github.com/teamhitori/running-man %}

## 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](https://www.babylonjs-playground.com/)


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.

{% embed https://github.com/teamhitori/frakas %}

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ef5ucl0ft23y8mxhhvws.gif)

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:

Log in to Azure

```
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.