https://github.com/Raigyo/fps-babylon-js

WebGL: Babylon.JS & SocketIO- Videogame: Online Multiplayer First Personnal Shooter (Demo on Heroku) - WIP
https://github.com/Raigyo/fps-babylon-js

Last synced: about 2 months ago
JSON representation

WebGL: Babylon.JS & SocketIO- Videogame: Online Multiplayer First Personnal Shooter (Demo on Heroku) - WIP

• Host: GitHub
• URL: https://github.com/Raigyo/fps-babylon-js
• Owner: Raigyo
• Created: 2020-02-24T17:48:09.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T09:06:52.000Z (about 2 years ago)
• Last Synced: 2024-08-02T15:08:27.133Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 2.92 MB
• Stars: 12
• Watchers: 2
• Forks: 8
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-babylonjs - fps-babylon-js - Online Multiplayer First Person Shooter with Babylon.js & SocketIO. ([demo](https://babylon-fps-online.herokuapp.com/)) (Projects)

README

        
# WebGL: Babylon.JS & SocketIO- Videogame: Online Multiplayer First Personnal Shooter

*April 2020*

> 🔨 Multiplayer videogame using WebGL with **Babylon.js v4**. Babylon.js is a real time 3D engine using a **JavaScript library** for displaying 3D graphics in a web browser via **HTML5**. Multiplayer is managed with **WebSockets (SocketIO)**. You could find the OpenClassRooms lesson followed [here](https://openclassrooms.com/fr/courses/3979376-creez-votre-propre-fps-en-webgl). Demo on [Heroku](https://babylon-fps-online.herokuapp.com/).

![Babylon logo](readme-img/intro-logo.png)

![Game capture](readme-img/capture1.jpg)

## About

Several components are used in this game.

**Arena.js**:

**Game.js**:

**Ghostplayer.js**:

**NetworkManager.js**:

**Player.js**:

**Weapon.js**:

## How to use

**Warning**: WebGL / material acceleration has to be enabled in your browser. The use of Babylon / WebGL needs a strong GPU (quite decent NVidia or AMD Graphic card) to work fluidly. It won't work without it, even with a powerfull CPU. 

How to enable WebGL in your browser?

- [Chrome](https://www.quora.com/How-do-I-enable-WebGL-2-0-in-Chrome)

- [Firefox](https://www.interplaylearning.com/help/how-to-enable-webgl-in-firefox)

- [Explorer 11 / Edge](https://support.microsoft.com/en-us/help/2528233/how-to-enable-or-disable-software-rendering-in-internet-explorer)

- [Safari](https://www.wikihow.com/Enable-Webgl#Using-Safari)

### Local

- Clone

- Update node_modules: `npm install`

- Run: `node server.js`

- Open the app using [http://localhost:8000/](http://localhost:8000/)

### Online

See the demo on [Heroku](https://babylon-fps-online.herokuapp.com/).

Of course you will have to find one or several partners to play the game. Each player has to open the URL to reach the game room.

## Ressources

- [Tutorial (fr): Créez votre propre FPS en WebGL](https://openclassrooms.com/fr/courses/3979376-creez-votre-propre-fps-en-webgl)

- [Github: Learn to create your own FPS in WebGl (en)](https://github.com/oc-courses/initiation-babylon)

- [Github: An implementation of Express and BabylonJS to make it easier to code BabylonJS apps in NodeJS (en)](https://github.com/yazheirx/babylon_express_server)

- [Le modèle objet JavaScript en détails (fr)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Le_mod%C3%A8le_objet_JavaScript_en_d%C3%A9tails)

- [Constructeur Object, prototype et héritage en JavaScript (fr)](https://www.pierre-giraud.com/javascript-apprendre-coder-cours/constructeur-object-prototype-heritage/)

- [Chrome mousedown and mouseup events no longer working, other browsers are fine](https://stackoverflow.com/questions/41181372/chrome-mousedown-and-mouseup-events-no-longer-working-other-browsers-are-fine/41238807#41238807)

- [Deploy Simple Node JS App on Heroku in Minutes](https://www.positronx.io/deploy-simple-node-js-app-on-heroku-in-minutes/)

- [Causes of Heroku H10-App Crashed Error And How To Solve Them](https://dev.to/lawrenceagles/causes-of-heroku-h10-app-crashed-error-and-how-to-solve-them-3jnl)