Celebrating 2.5 - Babylon.js challenge is back!

[RaananW]

Hey guys,

I think it has been almost a year since the last challenge. The Babylon challenge is back!

For the new guys - I used to post a monthly challenge focused on a specific topic every time. The winner would get amazing prizes such as respect from the community, free access to the documentation website, or the secret cheat codes for the sponza demo. And also beer, if you are ever in Berlin!

There is a single change to the rules - the challenge will span 2 months and a half instead of one.

Other than that, the regular rules apply:

• Code must be original! Don't copy and paste someone else's code.
• You can use external resources.
• The game must be playable. No static animations when pressing a mouse key.
• As we are celebrating 2.5, Babylon.js 2.5 must be used.
• Extra points for open-sourcing your code!

The 2.5 challenge:

Very influenced from the (amazing!!) new demos that were created in the ISART School (http://cdn.babylonjs.com/wwwbabylonjs/Scenes/prosecution/index.html for example, @Temechon can explain everything much better than me), we will create games!

Multiplayer games.

Simple multiplayer games!

The game's theme doesn't matter. It also doesn't matter if it is roles-based or real-time. Also, no one expects you to be master of websockets. 

You can work alone, or in teams. You can take an existing game and make it multi-player. Do whatever you want!

If you need deployment tips, help with development, financial aid, french lessons, dev-env suggestions, please don't hesitate to contact me! (I don't speak french, but I know a few others that do ) 

You guys have time until the 28th of February! Which is a long time. 

Prizes:

The winner(s) will get a Babylon.js t-shirt! And honor and glory. 

For the rest of the participants - I will need to see what's possible.  Oh, and since this is self-financed, please be considerate to the amount of people in a team  

 

I hope to see a lot of activity! I will do my best to actually participate in this challenge (I have participated in all challenges until now), but it will be great if we will have at least 4 submissions!

Party on!

 

 

Examples of previous challenges:

 

 

 

 

[endel]

 

That's great news. Would be a great opportunity to test out Colyseus for multi-player communication, if you haven't already. The project has been completely rewritten in TypeScript recently. Feel free to post questions on GitHub and Gitter if you struggle with something.

[RaananW]

Awesome!

Seems like a great server implementation for a multiplayer game. Will you be able to "support" the community a bit? if someone has a general question? That would be really helpful.

[endel]

Sure, I'll do my best. I'll create a boilerplate integrating both libraries and hopefully post it here tonight  

[Temechon]

I can add a wonderful set of 5 Babylon.js stickers to the prize pool! I don't know if i'll participate this time, multiplayer is not my cup of tea... But it could be a great opportunity to learn

 

[RaananW]

Stickers!!

Oh, and I was counting on you! now I have to force you somehow. Let me think and get back to you...

[getzel]

Great challenge !

[jerome]

@RaananW As it may be quite difficult for people to have their own server on the Internet, are the standalone (not on-line) multi-player games allowed ?

I mean : a game where all the players play in the same browser/computer

 

[RaananW]

@jerome, this is an interesting point. 

Any multiplayer game, even a classic dual screen with two players on the same keyboard will be accepted.

Having said that , @endel has a wonderful solution for the multiplayer server, and it can all be deployed to heroku for free (the basic level is free) which will be more than enough for the demo. I think he'll write about it soon.

[endel]

Hey guys, I've created a template project using BabylonJS + Colyseus, and made it available here: https://github.com/endel/babylonjs-multiplayer-boilerplate

There's a button to deploy your own in the README. Here's the live demo: https://babylonjs-multiplayer.herokuapp.com/

It's basically a simple BabylonJS example from the website, connecting to a Room on Colyseus. If you open the developer tools you'll see a new log appearing for each user visiting the page. 

Feel free to ask if you have any question and good luck with your games 

 

[RaananW]

You sir have won a few internets just now.

[inteja]

@endel great work! Gives me more confidence to jump in and submit an entry 

[inteja]

@endel   l'm not sure if I should post here or the Github issues queue, but I'm having a little trouble getting started with your babylonjs-multiplayer-boilerplate, probably because of my unfamiliarity with some of these technologies (haven't worked much with node before).

I'm running the latest node (6.9.2) and npm (4.0.3) on my local Windows 7 machine. After running npm install and start in both client and server folders, then visiting http://localhost:8080/ I get the following js console error:

Uncaught DOMException: Failed to construct 'WebSocket': The URL 'ws:://localhost:2657' is invalid.

Yet the server reports it's "Listening on 2657".

What am I doing wrong? Thanks in advance.

EDIT

On killing the cmd windows I noticed npm-debug.log file in each of server and client folders.

For the server the relevant error lines are:

23 error     onchange 'src/**.ts' -i -d 1000 -- ts-node src/index.ts

And for the client it's:

23 error     webpack-dev-server --host 0.0.0.0

 

[endel]

Hi @inteja. Oops, that was my mistake. The fix is quite simple, though. I've updated the project already. You can pull with git or update your local version manually.

I couldn't test it on Windows, but it should work fine. Please feel free to open issues on GitHub if something goes wrong, I'd be happy to support you.

Cheers!

[inteja]

Awesome, thanks @endel that did the trick.

For anything else, I'll post to Github.

Thanks again for the prompt and helpful reply.

[inteja]

@endel your boilerplate is pretty cool 

I don't have much experience with node and related, so at the moment it all seems like magic. I don't yet understand where the ts is getting compiled to and code changes are reflected in the browser automatically. I'm more familiar with using Webstorm watchers for ts and scss compilation into the same project folder. I guess I have a lot to learn about the node ecosystem.

[Nabroski]

work in progress

[jpdev]

I just found a really cool feature in babylon.2.5 I really want to test out.

.. I also like the idea of websockets an multiplayer..

.. so "challenge accepted".

[Nabroski]

[ozRocker]

realtime multiplayer is hard.  You have to implement some kind of prediction to compensate for lag.  Even then, its not a perfect solution.  The more lag there is, the more inaccurate it will be.  You are either shooting at a location that the opponent is no longer in (lag) or shooting at a location that the server is guessing the opponent will be in (prediction) 

[V!nc3r]

I'm on it, in team with @Nabroski !

[Nabroski]

[Raggar]

On 17/12/2016 at 0:32 AM, ozRocker said:

realtime multiplayer is hard.  You have to implement some kind of prediction to compensate for lag.  Even then, its not a perfect solution.  The more lag there is, the more inaccurate it will be.  You are either shooting at a location that the opponent is no longer in (lag) or shooting at a location that the server is guessing the opponent will be in (prediction) 

Or shooting at the position, that the opponent Was in when the server sent the state (+/- interpolation time).

https://github.com/gamestdio/timeframe

 

I'm just not sure of how to implement this. When you read various articles, they mention the fact that you 'rewind' the time, and then apply your projectiles, rays etc.

But wouldn't that possibly cause issues, like, if 10 or maybe 20 people are shooting all at once, the states are rewinded, and then, even if this is a fast process, you'll likely, at some point, send a rewinded state back to all the players. Maybe you could have a boolean like mode.isRewinded, and if this is true, then don't send the state just yet, but wait a few miliseconds. Another way might be to create new instances of the physics objects every time a shot is fired, but won't this be draining ressources, even if you destroy the objects after use.

Hmm. Maybe just create One physics body for each player, and queue these for the intersection function?

[RaananW]

On 12/21/2016 at 10:04 AM, V!nc3r said:

I'm on it, in team with @Nabroski !

Yeah! teams! just what I like to hear.

@Raggar - you are not the first one facing this issue. There are a lot of resources about it (http://www.gamedonia.com/blog/lag-compensation-techniques-for-multiplayer-games-in-realtime for example). Timeframe, the project you linked to, is integrated in @endel's server implementation, so I would recommend giving it a try.

My 2 cents - don't overcrowd the network channel. Send only what's needed, do whatever you can on the server. Limit the number of players in a single game, or have very strong servers  one of the two.

I remember reading an article about slither.io , which have around 600 players in each world. This do nothing new - compensate for lag using calculations on the server and estimations to your next point. If you play the game with network throttling you can actually see how they correct your position

[ozRocker]

I also got stuck on the messaging system.  If there are 30 people running around far away from eachother, I don't want all movement messages from all 30 people going to everyone.  This would clog up the network.  I tried to create a grid-like system where only players within 2 grid cells away would be notified of movement.  It got really complicated and I couldn't find any info on this so I gave up.  But I'm sure in large multiplayer worlds there is some kind of streamlining going on with message broadcasts.  I doubt World of Warcraft would broadcast the actions of every single item and player to everyone connected.