Creating a Mulitplayer game using HTML 5, Javascript, and Websockets

[Redux]

Hi forum, 

 

I am trying to get into developing online web multiplayer games. At first I had no idea where to start but after a lot of searching, I found I can achieve what I want using HTML, Javascript and websockets. I have programming experience in html, php, python, java, and mysql and Im just looking to learn something new!

 

 

What I want to achieve is to build a game similar to the already existing game Habbo hotel (www.habbo.com). What I want to be able to do is create something where a user can go on, load the client in their web browser, and then be shown a navigation guide that shows them different rooms. They can then enter the rooms with their character and move around, etc. (If you have played the game you know what I am after.)

 

I want this to be real time which is why I want to bring in node.js and socket.io (both I have to still learn how to use.)

 

Since I have just gotten into this, I have no idea where to start.. I have read many forums that suggested Impact is a good canvas to build off of but all the tutorials I have seen haven't shown what I want to do. Can anyone confirm Impact would be a good choice for me to continue with this project?

 

What I am asking for is some direction on where to start, and what tools I need to get this project started. Any help is greatly appreciated!

 

[StrykerKKD]

First of all read this article http://buildnewgames.com/real-time-multiplayer/ . I made a Multiplayer HTML5 board game and that article really helped me to get started. You should start learning node.js . 

[Deathray]

I've looked into this a bit... So far if you want a game with real time multiplayer, then node.js is the way to go (with socket.io or one of the other libraries). The problem is that there are not many hosts that support node and websockets shared hosting, so hosting may be expensive. ..... if your game is turn based or can handle a delay then you could use php or something more common for the server side. I've done this with two games (really just proofs of concepts) so far.

[feiss]

For node.js hosting you have the Amazon alternative, by starting an EC2 instance with nodejs included in it. You will only pay the time and bandwidth you use, if you pause the server, you don't pay anything. I don't know the costs (they have a cost simulator) in full production with hundreds/thousands of players, but I'd bet is one of the cheapest options. Not a straightforward setup, though.

 

http://aws.amazon.com/ec2/

[Paul Brzeski]

For node.js hosting you have the Amazon alternative, by starting an EC2 instance with nodejs included in it. You will only pay the time and bandwidth you use, if you pause the server, you don't pay anything. I don't know the costs (they have a cost simulator) in full production with hundreds/thousands of players, but I'd bet is one of the cheapest options. Not a straightforward setup, though.

 

http://aws.amazon.com/ec2/

 

Amazon is such an enigma! I've been a very happy user for over a year now, using a free/budget instance as a DEV VPS. 

 

The first year is free if you just want a basic 'micro' VPS with 50% CPU priority. That said, with a realtime multiplayer game you probably don't want to have CPU throttled when you're trying to make sure everything's working properly

 

I'd strongly suggest forking out an initial $50~70 reservation and going for the smallest paid instance for 100% CPU priority. It's only a 1 core Xeon, but on the micro you only get 'burst' style priority (which gave me a lot of weird issues during playtesting).

[Gio]

Nodejitsu is an alternative that is much easier to set up and maintain, however there is a (small) initial cost.

[dev]

I'd recommend just learning how nodeJS works by building a simple server and a client that communicate with eachother. I definitely recommend nitrous.io 

 

It's a great webservice with an awesome free package to start off with. Extremely easy to set-up, you basically get a virtual machine. You can create different boxes for e.g. python or ruby, but mainly they have a box that comes pre-installed with nodeJS. So you can get a simple NodeJS server running in mere minutes.

 

Once you grasp the basics of networking with node then you can introduce the game aspect. I'd really keep these things separate in the beginning. You really don't want to be worrying about multi-user logins, compression, parsing, security etc straight away. For a lot of users, installing NodeJS on a windows machine is an adventure in itself (with nitrous you won't have to). So start small. Build a simple echo-service, a server that sends back any message it receives and go from there. Once you're comfortably sending messages to the server with certain IDs and have the server send back specific messages back to specific connections, you can translate that into anything, a players' movement, player-chat etc. 

 

Good luck!

[Paul Brzeski]

Getting too stuck into the nitty gritty and laying out long term architecture before he even knows what parts of the game to build has it's own share of issues... especially if this is a hobby project where maintaining your own interest is key.

 

I'd suggest setting milestones that can be achieved:

• Create a basic HTTP server for serving HTML/css/etc. - Can you serve your own client?
• Create a client-only representation of your game's viewport or client or even just a dev console for yourself - Do you have a prototype of your game client sufficient for your tests?
• Create the socket.io bindings in the server stack and test messaging between client and server - Can you message between visitors to your client and the server?
• Develop concurrency between multiple active clients - Can the visitors communicate with/see each other?

The most important thing is to have fun and make sure you balance the creative process with your own ability to deliver the work... to yourself or whoever. Don't over-think things that don't seem too clear. Especially when trying to implement creative stuff and you don't have enough experience or thought on the method to get it done. Games design is hardly a science... it's kind of like the 'artiest' form of programming. There aren't really any rules, just some cool techniques and ways of doing things. What rules apply all depend on the project itself.

 

In my own project, I've started creating a sub-structure of files for prototypes that can be called up manually. They're isolated from the rest of the server and client stack, but they allow me to utilize running code and existing variables to play around with completely experimental ideas and features.

[Deathray]

All very good advice!

+1 for the idea of starting off with nitrous.io. that's my current plan. No use messing around with hosting until you have the game mostly built anyway.

[ivan.popelyshev]

Random thoughts about how i coded bombermine.com :

 

1) JAVA! Its difficult to write MMO, Java+good IDE (eclipse of IDEA) + unit tests are far better than any JS tools.

2) Jetty or netty websocket server. Pick any.

3) nginx to host statics in production

4) haproxy as a reverse-proxy for game servers.

5) game separate into two parts - UI and client.

6) menu is angular.js

7) client is GWT-compiled java.

8) server and client both written on java, share common part, which is your game logic. The server and common part is the most difficult things here, it should be coded very carefully, that's why I use Java.

9) after connect server sends its version and if client version is different, then we memorize version number somewhere (localStorage), and reload page. Then js bootstrap loads corresponding version and send connect to the server again.

10) either use strictmath or only integers.

 

P.S. Search for "Tale of desyncs" and "Tale of desyncs part 2". Desyncs are evil. Use java and lots of tests to avoid them.

 

UPD. look at "libgdx" and "playn" engines too. Libgdx is opengl-only but have good community.

[jcarlos17]

@ivan.popelyshev What is your stack nowadays?

Sorry if my questions are silly:

1. Is it pure java? or using some framework? Do you prefer more java than node.js? (I always see node.js as the recommended technology for multiplayer games).

8. It is related with the POO and the strict rules of the language?

9. That sounds great.

Thank you.

[vamos]

I am using a much simpler stack for my "MMO". I say "MMO" in quotes because while it's going to be a multiplayer online game, it's hardly going to be a Massively multiplayer one. I mean realistically, if I'm lucky I can hope for 1000 concurrent players. It's not going to be World of Warcraft.

Therefore I am just using node.js (with socket/io) on a single virtual machine on AWS. I do some nice things such as splitting the world into "rooms" to reduce bandwidth, but other than that I keep it pretty simple.

I know I may run into problems if I have millions of players, but that will be a very nice problem to have, especially because it's going to be a game that people would pay to play after some time. I figure that if I make millions out of it, I will hire a small team of engineers to restructure the server architecture. Until then I will not worry too much about it.

I wonder what other "small MMO"-makers are doing. Is Java a more common option than node.js?

[jcarlos17]

@vamos Did you hear about firebase? They offer a realtime databases, and solve the scalability problems.

But I don't see games using it, do you know why?

 

For the game that you are creating, you add exhaustive validations to prevent "hacks" in the game?

The players can see the listeners if they press F12?

[vamos]

My server is authoritative, whenever a player wants to do something, the server must first say it's OK.

Well, it's not entirely true... when a player wants to do something, there is code on the client that checks if it is a valid action. But there is also the exact same code on the server that checks the exact same thing. The player doesn't have to wait for a response from the server, if their local client code says that it's a valid action, they do it. But before it happens on the server, it's checked again, if that makes sense.

So I am not worried about hacks, I think it would very difficult to cheat. The fact that it is not an action game, but more of a slow-paced one, probably helps too.

I have not tried firebase, I will check it out. Like I said I'm not thinking about scalability yet. I have mongodb running on the same machine as my node.js server, and I know I can easily move that to a separate machine if I need to. I have read about people supporting hundreds of thousands of players with 1 single node.js VM, I think that is going to be good enough for me.

[webdeveloper_issy]

I made an io game, duals dot io

Check it out!

It's made in js with node.js backend

AMA! 

[Luminous Wizard]

Sorry to revive an old thread.

 

Using NodeJS, how do you cater for multiple regions in a real time game to prevent too much latency? Does AWS support this by default? I see limited options when it comes to multi region support.

[Sentinel]

On 11/29/2017 at 1:38 PM, Luminous Wizard said:

Sorry to revive an old thread.

 

Using NodeJS, how do you cater for multiple regions in a real time game to prevent too much latency? Does AWS support this by default? I see limited options when it comes to multi region support.

I hope you're not doing HTTP requests.

I definitely recommend coding a TCP server or simply use something like socket.io

[Luminous Wizard]

7 hours ago, Sentinel said:

I hope you're not doing HTTP requests.

I definitely recommend coding a TCP server or simply use something like socket.io

I'm using NodeJS and Socket.io, but there is still latency issues, hence my question. I've seen some services that offer real-time, multi region support if you use their API, would this be a viable option? Or should I just stick with NodeJS and Socket.io?

 

I'm worried about, for instance, americans playing against africans, the latency is usually 400ms+ on AAA game servers, but they are not suppose to cater for multi regions,this is just from my experience.

 

How does, as an example, Clash Royale pull off real time when I'm paying against someone in America?

[Sentinel]

4 hours ago, Luminous Wizard said:

I'm using NodeJS and Socket.io, but there is still latency issues, hence my question. I've seen some services that offer real-time, multi region support if you use their API, would this be a viable option? Or should I just stick with NodeJS and Socket.io?

 

I'm worried about, for instance, americans playing against africans, the latency is usually 400ms+ on AAA game servers, but they are not suppose to cater for multi regions,this is just from my experience.

 

How does, as an example, Clash Royale pull off real time when I'm paying against someone in America?

I don't know if https://deepstream.io is usuable for you, but that does support multi region with correspondingly real time database management.

There's something like https://www.pubnub.com           or https://webrtc.org

I mean usually big multiplayer games like League of Legends, CSGO, COD etc. has different servers for different regions.

[Luminous Wizard]

2 hours ago, Sentinel said:

I don't know if https://deepstream.io is usuable for you, but that does support multi region with correspondingly real time database management.

There's something like https://www.pubnub.com           or https://webrtc.org

I mean usually big multiplayer games like League of Legends, CSGO, COD etc. has different servers for different regions.

Thank you! I will consider this. I am also considering Photon or Lance. I will do even more extensive research on this to see if it is a viable solution.

 

I think having different servers in different regions is probably the hassle free and most efficient way to go.