The Open-Source IO Shooter is an open-source multiplayer game in the browser
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
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:
lobby.
gamestarts, each player must take down others (either in death match, or team death match).
potionson the map that restore health.
You can see a very small amount of gameplay below (the framerate of this GIF is low):
Movements
You can build this game yourself easily if you are experienced with modern javascript development or Docker.
The easiest way to run the game is to use the
docker-compose.ymlfile with the following command
docker-compose up -d.
The
upoption will download the image if you don't have it yet and run the container.
The
-doption will run the container in the background.
You can also build the Docker image yourself:
docker build -t tosios .
docker run -d -p 3001:3001 [IMAGE_ID]
The
-doption will run the container in the background (recommended if you want to have access to your current terminal session).
The
-poption will let you choose on which port the container will listen (e.g. the first
3001will make it accessible to http://localhost:3001), and on which internal port must the server listen (e.g. the second
3001).
The
[IMAGE_ID]is easily discoverable by running
docker imagesin the terminal.
You can also build the game directly using
yarn(you cannot use
npm installas this repo is using the
workspacefeature of Yarn):
yarn.
yarn build.
yarn serve.
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. You can then share the obtained IP and port(ex: http://192.168.1.10:3001).
To run the project in development:
yarn.
yarn build
yarn start.
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
frontapplication is NOT served by the
server, thus requiring you to access it through port
3000instead of
3001as seen before.
In development changes made to
clientand
serverare live, except for the
commonmodule.
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.jsand
Colyseus.js.
server- The authoritarive server running on
NodeJS,
Expressand
Colyseus.
common- A collection of constants and methods shared amongst
clientand
server.
Anyone can create their own map to use in TOSIOS.
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
layersand
tilesets(I invite you to open one of the existing map in TME to familiarize yourself with how maps are structured. It will make things 10x easier if you have a living example under your eyes).
Layers
A
layeris where your tiles are placed to form a map. You can combine multiple
layerson top of each other so that you can get a crate over a ground tile, or a spider web over a wall for example.
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
layersas you want and they will be rendered by
PIXI.jsin a WYSIWYG manner (order is maintained).
Although in the
dungeon.pngspritesheet I use colored tiles to represent
collisions(red and blue) and spawners (green), you can use any tile you want as it won't be rendered anyway.
Tilesets
The
tilesetsis where lie the splitted spritesheet and its collision, animated and spawner tiles.
When defining which tile will be used for collisions it is very important to set its
typefield to either:
half: a
playerCAN'T go through, but a
bulletCAN go through.
full: a
playerCAN'T go through, and a
bulletCAN'T go through.
This can be done by selecting a tile in the tilesets editor, and entering its
typeon the left pane.
If you want to add your map to the game:
/packages/client/src/images/maps/custom.png
/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:
docker-composefile.
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.
This project is under the MIT license.
The major libraries and assets used in this project and their licenses: