Awesome
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. Demo on Heroku.
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?
Local
- Clone
- Update node_modules:
npm install - Run:
node server.js - Open the app using http://localhost:8000/
Online
See the demo on Heroku.
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
- Github: Learn to create your own FPS in WebGl (en)
- Github: An implementation of Express and BabylonJS to make it easier to code BabylonJS apps in NodeJS (en)
- Le modèle objet JavaScript en détails (fr)
- Constructeur Object, prototype et héritage en JavaScript (fr)
- Chrome mousedown and mouseup events no longer working, other browsers are fine
- Deploy Simple Node JS App on Heroku in Minutes
- Causes of Heroku H10-App Crashed Error And How To Solve Them