Check out my game TOSIOS: The Open-Source IO Shooter.

Hi everyone,

I've been working for a few months on a browser multiplayer shooter game: TOSIOS GitHub page.

DEMO: https://tosios.online

Goals
I had 3 goals in mind when I developed this game:

1. Code my first multiplayer browser game.
2. Make it open-source.
3. Provide an easy way for anyone to deploy and modify it.

Game's rules
The game principles are fairly easy to grasp:

• Every player is positionned randomly on the map during the lobby.
• When the game starts, each player must take down others.
• There are some potions on the map that restore health.
• The last one alive wins 🎉.

Movements

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

Tech stack
The whole project is a monorepo using yarn workspaces and coded in TypeScript. It is composed of:

• client: A react application using PIXI.js
• server: A colyseus (why would I post it here otherwise) and express.
• common: A set of utils and constants used in both project.

You can either use the docker-compose file which uses an automatically published image from Docker Hub.

You can also build the docker image yourself using the Dockerfile.

Future
I play this game with friends regularly and we all have much fun (this is how the project started in my mind), and there are a lot of features that I'm developing or that I will develop:

• Mobile-mode (~50% complete)
• Other potions/buffs
• A 4th map
• Better compatibility with Windows (the mv command doesn't work, I should use the move instead)

Please tell me what you guys think, and please don't hesitate to share this with friends or colleagues at work!

This is awesome! The game feels very responsive. Also took a quick look at the code and it's very well documented and organized. Are you in the Colyseus discord? I'd love to learn more about how you made the game and what your plans for it in the future are.

As a quick aside, have you thought about using something like https://github.com/michalochman/react-pixi-fiber to unify your UI/game rendering into a single declarative React tree?

@3mcd Hey, thank you very much for your support and for testing!

I try to keep code as organised as possible in general, especially when I share it. I still have to improve the README though and add a few more details on modding. I also try to simplify as much as I can the different layers of the application (HUD, players, collisions, textures...), so people who are not used to application or game development can still understand what is going on.

I am not in the Colyseus discord yet, but will join soon! What questions would you have regarding the making of the game? I could maybe answer you with some basics answer first.

Thank you again, and please don't hesitate if you have any suggestions regarding the game.

Well done @halftheopposite! 👏👏👏 Thanks a lot for sharing!

@endel Thank you very much, and thank you again for your libraries which are a delight to work with!

I registered just to say thanks for providing the source code, it's beautifully written! Not to mention the game felt very responsive!!

@marwan38 hey thank you very much! That is really nice to hear as I did not know what to expect when publishing this game the first time. I have released a beta version of the mobile mode (which is 95% complete) that you can test. It cleans the HUD a lot and makes it much easier to mod from one entry point. I'll be adjusting the mobile viewport and controls over the weekend and migrate to the latest Colyseus version!

Thank you again for your support :)

In the future, once the game basics are set, I'll go on optimizing the game with quadtrees.

@halftheopposite I had forgotten about this but stumbled upon it once again after trying clean up a project i started. I've spent, literally, all day cleaning up and refactoring the project to look like yours. It's working good now! Thank you once again :)! I have a question.. i will pm you.

Btw, Tosios worked really well on my samsung s7! So smooth!

@marwan38 Needless to say that I'm flattered! I'm glad that my little project has been able to help you so far, as I am really not a game dev at first. Lately I've improved the whole architecture by removing a lot of code, making a cleaner and more flexible hud, using r-trees for collisions on the client and server side, and making actions more responsive. Though there are still a few minor bugs, but nothing really critical.

And nice to hear the game was working great on mobile! I'm really working hard to have a similar experience on both desktop and phones.

PS: I'll check your pm

Hi everyone!

It's been a long time since my first post on this forum, and I have made a lot of changes since to TOSIOS (https://github.com/halftheopposite/tosios).

These changes include:

• A simplified code structure (I will try to simplify the code even more).
• A fully working mobile mode (still a few bugs with the orientation of the device sometimes).
• A revamped HUD written purely with React (this should have been a no-brainer from the beginning, as composing interfaces in React with the power of CSS makes things 10x faster. This HUD includes:
  • Better messages from the game's events.
  • More contextual information.
  • A leaderboard.
  • A menu to explain keymaps and to share a game's link.
• Simple AI for flying bats that patrol, chase and attack players.
• A Team Death Match mode.

The new HUD:

The leaderboard:

The menu:

The mobile version of the game:

In the incoming months I have a few plans regarding the game:

• A better and more generic client-side prediction and lag-compensation.
• Power ups (other weapons, buffs, etc.)
• Bouncy bullets (for a more challenging gameplay)

As always the game's licenses does not changes and you a free to explore and modify the source code as you wish (regarding the MIT license).

I am in need of any feedback that could improve the gameplay and the developer experience too, so please do not hesitate to share what's on your mind!

Thank you all