DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Multiplayer concept using Babylonjs, Azure and Frakas
teamhitori
teamhitori

Posted on

Multiplayer concept using Babylonjs, Azure and Frakas

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:

GitHub logo 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
Enter fullscreen mode Exit fullscreen mode

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




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.

GitHub logo 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
Enter fullscreen mode Exit fullscreen mode

Usage

To get setup run:

frakas init
Enter fullscreen mode Exit fullscreen mode

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

To build and run:

frakas serve
Enter fullscreen mode Exit fullscreen mode

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




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
Enter fullscreen mode Exit fullscreen mode

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

frakas init
Enter fullscreen mode Exit fullscreen mode

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

frakas serve
Enter fullscreen mode Exit fullscreen mode

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

Image description

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
Enter fullscreen mode Exit fullscreen mode

Push changes

az webapp up --sku F1 --name $appname -g $appname
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›