The Open-Source IO Shooter is an open-source multiplayer game in the browser (desktop or browser). It is meant to be hostable and playable by anyone. This is not an attempt at creating an outstanding gaming experience, but to create an easily understandable and modifiable multiplayer browser game.

Desktop version

Mobile version

🕹️ Playing

Want to play right away? You can play the game by following (and sharing) this link https://tosios.online/ (or https://tosios-demo.herokuapp.com/).

Rules

The game principles are fairly easy to grasp:

1. Every player is positionned randomly on the map during the

   lobby

   .
2. When the

   game

   starts, each player must take down others (either in death match, or team death match).
3. There are some

   potions

   on the map that restore health.
4. The last player (or team) alive wins 🎉.

You can see a very small amount of gameplay below (the framerate of this GIF is low):

Movements

• Move: W A S D or ↑ ← ↓ →.
• Aim: Mouse
• Shoot: Left click or Space

🚀 Running

You can build this game yourself easily if you are experienced with modern javascript development or Docker.

Docker Compose 🐋

The easiest way to run the game is to use the

docker-compose.yml

docker-compose up -d

The

up

The

-d

Docker 🐋

You can also build the Docker image yourself:

1. Build it with

   docker build -t tosios .

2. Run it with

   docker run -d -p 3001:3001 [IMAGE_ID]

The

-d

The

-p

3001

3001

The

[IMAGE_ID]

docker images

Local

You can also build the game directly using

yarn

npm install

workspace

1. Install dependencies with

   yarn

   .
2. Build game with

   yarn build

   .
3. Run

   yarn serve

   .
4. The game is available at http://localhost:3001.

Tips

If you want to play with friends at work or home, you can run the following command to get your local network IP:

ipconfig getifaddr en0

🔧 Development

To run the project in development:

1. Install dependencies with

   yarn

   .
2. Make a first build with

   yarn build

3. Start game with

   yarn start

   .
4. The game is available at http://localhost:3001.

If you encounter a white screen the first time you try to load the game in the browser, that's normal, just refresh the page. This is due to the order in which things are built the first time at launch.

In development, the

front

server

3000

3001

In development changes made to

client

server

common

Project architecture

This project is a monorepo (with the help of Yarn workspaces). It contains the following packages:

• client

  - The frontend application using

  Create React App

  ,

  PIXI.js

  and

  Colyseus.js

  .

• server

  - The authoritarive server running on

  NodeJS

  ,

  Express

  and

  Colyseus

  .

• common

  - A collection of constants and methods shared amongst

  client

  and

  server

  .

Modding

Maps

Anyone can create their own map to use in TOSIOS.

How to create my map?

The maps available in TOSIOS have all been created thanks to Tiled Map Editor (TME). You must first download this software in order to start creating your own map. I also invite you to read some tutorial for an easier beginning.

The most important concepts to create a functional map are

layers

tilesets

Layers

A

layer

layers

There are two reserved layers that should be present at all time (although not rendered):

• collisions

  : for the client and server to know where the player can move or not (ex: walls or pits), or shoot through (ex: pits or small rocks).

• spawners

  : for the server to determine the starting position of a player.

Other than that, you can add as many

layers

PIXI.js

Although in the

dungeon.png

collisions

Tilesets

The

tilesets

When defining which tile will be used for collisions it is very important to set its

type

• half

  : a

  player

  CAN'T go through, but a

  bullet

  CAN go through.

• full

  : a

  player

  CAN'T go through, and a

  bullet

  CAN'T go through.

This can be done by selecting a tile in the tilesets editor, and entering its

type

How to add my map to the game?

If you want to add your map to the game:

1. If you have a custom spritesheet image, add it in

   /packages/client/src/images/maps/custom.png

2. Open

   /packages/client/src/images/maps/index.ts

   , and add the following statements:

import gigantic from "./gigantic.png";
import custom from "./custom.png"; // 

Add your map file (TMX as JSON) in 
/packages/common/maps/custom.json
.
Open 
/packages/common/maps/index.ts
:

// ...
import gigantic from "./gigantic.json";
import custom from "./custom.json"; // 

Open 
/packages/common/constants.ts
:

// ...
export const MAPS_NAMES = ["gigantic", "custom"]; // 
Roadmap for v1.0.0

This is not an exhaustive, nor final, features list but it will give you a good indication on what I am working on:

• [x] Let users select the number of players in a room.
• [x] Publish the docker image onto a registry and add a

  docker-compose

  file.
• [x] Add a playable demo website for anyone to test and play the game.
• [x] Add mobile mode (updated GUI and virtual joysticks).
• [x] Add visual feedback when a player gets hit.
• [x] Add smoother bullets.
• [x] Implement a R-Tree for performances.
• [x] Add players spawner object instead of randomized points.
• [x] Add support for JSON TMX format (Tiled).
• [x] Add a Team Death Match mode.
• [x] Add some monsters. (Q1 2020)
• [x] Improve the UI of the game menu. (Q2 2020)
• [x] Improve particle effects. (Q3 2020)
• [x] Add analytics
• [x] Add sound effects. (Q3 2020)
• [ ] Add powers up and pickable items. (Q4 2020)
• [ ] Add ground monster. (Q4 2020)
• [ ] Add random dungeon generation. (Q4 2020)

Special thanks

Thanks to @endel for his fabulous work on Colyseus that made this game possible.

Thanks to the PIXI.js team for their incredible library and up-to-date documentation.

Thanks to @pixel_poem for the art package he published on Itch.io which made this game looks cool instantly.

Thanks to @thorbjorn81 for the many years of work on the Tiled map editor.

Licenses

This project is under the MIT license.

The major libraries and assets used in this project and their licenses:

• Colyseus: MIT
• PIXI.js: MIT
• Font "Press Start 2P": Creative Common Zero