aeon0 / multiplayer-babylon-js-game Goto Github PK

View Code? Open in Web Editor NEW

103.0 7.0 19.0 215 KB

Multiplayer BabylonJS game with Server and Client-Side physics engine synchronization

Home Page: http://185.82.21.82:8700

License: MIT License

JavaScript 1.90% CSS 1.85% HTML 3.88% TypeScript 92.37%

multiplayer-game physics-engine multiplayer-babylon-js babylon

multiplayer-babylon-js-game's Introduction

Multiplayer Babylon JS "Game" with Client & Server-Side Physics Engine

You can open the Demo in two different browser tabs, that way you spawn two different players into the world
Demo here: http://185.82.21.82:8700

Run Localy

>> cd client
>> npm install
>> tsc
>> npm start

In a new console:

>> cd server
>> npm install
>> tsc
>> npm start

Then visit http://localhost:8700.

Development

If you want to play around with the code you can run >> npm run dev. (nodemon must be installed globaly). This will watch any chances for the typescript files, recompiles and on the server side, also restarts the server to serve the changes.

What is this?

Testing the server side "NullEngine()" from Babylon.js. This enables you to run Babylon.js on a node server without having to render anything to the screen. That means you can simulate the world on your Clients as well as on the Server.

This implementation uses Websockets for Client <-> Server communication. The physics engine is simulating on Client as well on the Server. The Server then sends each render loop updates to all clients about the current "State of the World". The Clients then adjust the World according to the Server updates. That means, the higher the delay, the more visible "jumps" can occur. Interpolation could smooth out this jumps, but is currently not implemented.

The "game"

Granted, it is not really a game. It is just an "arena" where each player controls a ball. By pressing W or D you can give the ball a spin forward or backward into the camera direction.
With A and D you can rotate the camera around the ball to apply the spin from different directions. With SPACE you can jump (only working on the ground as it is hacked in...)
The plan was (or is) that you would have to try to push your opponents of the arena, but this is not implemented yet. Right now you just fall forever and have to reload the page (That is why there are walls around the arena for now : ).

multiplayer-babylon-js-game's People

Contributors

Stargazers

Watchers

Forkers

cabeccar rafafor24 apieceofgood echosystemmark bayon andreas-schoch predrag56 jixiangcn deniszatsepin chrisk8er xinyimin rameshgandhim chainpioneer1 hold3dcode highjohnconquer zkmanager david0718 asifbg-systems linecode

multiplayer-babylon-js-game's Issues

Typescript error when running project

I did a quick test run of the project and immediately ran into a roadblock with these errors (I'm on TS version 3.1.6, MacOS). I'm new to Typescript so appreciate any and all help 😀

Error dump below:

../../../.npm-packages/lib/node_modules/typescript/lib/lib.dom.d.ts:4030:14 - error TS2687: All declarations of 'fullscreen' must have identical modifiers.

4030 readonly fullscreen: boolean;
~~~~~~~~~~

../../../.npm-packages/lib/node_modules/typescript/lib/lib.dom.d.ts:5152:14 - error TS2687: All declarations of 'angularAcceleration' must have identical modifiers.

5152 readonly angularAcceleration: Float32Array | null;
~~~~~~~~~~~~~~~~~~~

../../../.npm-packages/lib/node_modules/typescript/lib/lib.dom.d.ts:5153:14 - error TS2687: All declarations of 'angularVelocity' must have identical modifiers.

5153 readonly angularVelocity: Float32Array | null;
~~~~~~~~~~~~~~~

../../../.npm-packages/lib/node_modules/typescript/lib/lib.dom.d.ts:5154:14 - error TS2687: All declarations of 'hasOrientation' must have identical modifiers.

5154 readonly hasOrientation: boolean;
~~~~~~~~~~~~~~

../../../.npm-packages/lib/node_modules/typescript/lib/lib.dom.d.ts:5155:14 - error TS2687: All declarations of 'hasPosition' must have identical modifiers.

5155 readonly hasPosition: boolean;
~~~~~~~~~~~

../../../.npm-packages/lib/node_modules/typescript/lib/lib.dom.d.ts:5156:14 - error TS2687: All declarations of 'linearAcceleration' must have identical modifiers.

5156 readonly linearAcceleration: Float32Array | null;
~~~~~~~~~~~~~~~~~~

../../../.npm-packages/lib/node_modules/typescript/lib/lib.dom.d.ts:5157:14 - error TS2687: All declarations of 'linearVelocity' must have identical modifiers.

5157 readonly linearVelocity: Float32Array | null;
~~~~~~~~~~~~~~

../../../.npm-packages/lib/node_modules/typescript/lib/lib.dom.d.ts:5158:14 - error TS2687: All declarations of 'orientation' must have identical modifiers.

5158 readonly orientation: Float32Array | null;
~~~~~~~~~~~

../../../.npm-packages/lib/node_modules/typescript/lib/lib.dom.d.ts:5159:14 - error TS2687: All declarations of 'position' must have identical modifiers.

5159 readonly position: Float32Array | null;
~~~~~~~~

../../../.npm-packages/lib/node_modules/typescript/lib/lib.dom.d.ts:13881:14 - error TS2687: All declarations of 'orientation' must have identical modifiers.

13881 readonly orientation: ScreenOrientation;
~~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:82:5 - error TS2687: All declarations of 'fullscreen' must have identical modifiers.

82 fullscreen: boolean;
~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:122:5 - error TS2717: Subsequent property declarations must have the same type. Property 'getVRDisplays' must be of type '() => Promise<VRDisplay[]>', but here has type '() => any'.

122 getVRDisplays: () => any;
~~~~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:137:5 - error TS2687: All declarations of 'orientation' must have identical modifiers.

137 orientation: string;
~~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:137:5 - error TS2717: Subsequent property declarations must have the same type. Property 'orientation' must be of type 'ScreenOrientation', but here has type 'string'.

137 orientation: string;
~~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:166:5 - error TS2687: All declarations of 'hasOrientation' must have identical modifiers.

166 hasOrientation: boolean;
~~~~~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:167:5 - error TS2687: All declarations of 'hasPosition' must have identical modifiers.

167 hasPosition: boolean;
~~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:168:5 - error TS2687: All declarations of 'position' must have identical modifiers.

168 position?: Float32Array;
~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:169:5 - error TS2687: All declarations of 'linearVelocity' must have identical modifiers.

169 linearVelocity?: Float32Array;
~~~~~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:170:5 - error TS2687: All declarations of 'linearAcceleration' must have identical modifiers.

170 linearAcceleration?: Float32Array;
~~~~~~~~~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:171:5 - error TS2687: All declarations of 'orientation' must have identical modifiers.

171 orientation?: Float32Array;
~~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:172:5 - error TS2687: All declarations of 'angularVelocity' must have identical modifiers.

172 angularVelocity?: Float32Array;
~~~~~~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:173:5 - error TS2687: All declarations of 'angularAcceleration' must have identical modifiers.

173 angularAcceleration?: Float32Array;
~~~~~~~~~~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:17013:108 - error TS2304: Cannot find name 'MSBaseReader'.

17013 static ReadFileAsDataURL(fileToLoad: Blob, callback: (data: any) => void, progressCallback: (this: MSBaseReader, ev: ProgressEvent) => any): void;
~~~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:17014:100 - error TS2304: Cannot find name 'MSBaseReader'.

17014 static ReadFile(fileToLoad: File, callback: (data: any) => void, progressCallBack?: (this: MSBaseReader, ev: ProgressEvent) => any, useArrayBuffer?: boolean): void;
~~~~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:18024:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'VRDisplay' must be of type '{ new (): VRDisplay; prototype: VRDisplay; }', but here has type 'any'.

18024 declare var VRDisplay: any;
~~~~~~~~~

node_modules/babylonjs/dist/preview release/babylon.d.ts:18025:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'VRFrameData' must be of type '{ new (): VRFrameData; prototype: VRFrameData; }', but here has type 'any'.

18025 declare var VRFrameData: any;`

dist/src/index.js

I do not find the "server/dist/src/index.js" file

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.