Jump to content

Simplest HTML5 multiplayer


Aristides
 Share

Recommended Posts

Hi! Currently I'm trying to build a very simple online 2 player card game on HTML5 using Game Maker Studio. From what I've read there's no practical solution for GMS HTML5, however I just want to try out the simplest of simple operations. I'm talking quite literally about  sending a variable from one game to another and then sending another variable back. That's it, no screen sync, no high speed data transfer, no complex account system, just simple turn based data transfer. Is there a practical solution to achieving this?

 

I'm by no means experienced in multiplayer games but I do understand the principles of TCP/IP, Server- Client data transfer. Any help would be much appreciated :)

Link to comment
Share on other sites

You'll want to write some javascript for this. Client-side it's pretty easy, using websockets you can easily connect to a server by setting up a listen handle for a specific port and server url. Websockets gives you various events to work with such as on connect (when you connect succesfully to a server) or on message (when a server broadcasts a message to you).

 

Server side it's a bit trickier as you'll need to handle all players and transfer incoming data to other players depending on your game design. But here you also have a lot of functions to work with. You can write a server in any language you want really, but Javascript servers have become very easy using NodeJS. Either ws or socket.io are great to use with NodeJS, and it's not too difficult to write your own server that way. You'll then need hosting, which isn't as simple as regular webhosting, but it's available and you can of course run your own NodeJS server.

 

You'll then need to build a few JS extensions to call (and callback) the multiplayer js-functionality from GM and you'll need to do some callbacks as well. This is probably the easiest part, though. The big part is writing the javascript, in particular server-side. 

 

I got it to work myself in the past, but usually it's not really worth the effort. Most sponsors aren't really that interested in online multiplayer because they don't like the hassle of setting up servers etc. Imagine that many sponsors come from the Flash era of single-file .swf distribution. Hosting yourself is tricky because say you release the game with Boostermedia, you then have to build something extremely scalable that runs on 80 different portals and connect all these players with eachother. So unless you really really know what you're doing, it's usually not very commercially viable.

 

Good luck :)

Link to comment
Share on other sites

You'll want to write some javascript for this. Client-side it's pretty easy, using websockets you can easily connect to a server by setting up a listen handle for a specific port and server url. Websockets gives you various events to work with such as on connect (when you connect succesfully to a server) or on message (when a server broadcasts a message to you).

 

Server side it's a bit trickier as you'll need to handle all players and transfer incoming data to other players depending on your game design. But here you also have a lot of functions to work with. You can write a server in any language you want really, but Javascript servers have become very easy using NodeJS. Either ws or socket.io are great to use with NodeJS, and it's not too difficult to write your own server that way. You'll then need hosting, which isn't as simple as regular webhosting, but it's available and you can of course run your own NodeJS server.

 

You'll then need to build a few JS extensions to call (and callback) the multiplayer js-functionality from GM and you'll need to do some callbacks as well. This is probably the easiest part, though. The big part is writing the javascript, in particular server-side. 

 

I got it to work myself in the past, but usually it's not really worth the effort. Most sponsors aren't really that interested in online multiplayer because they don't like the hassle of setting up servers etc. Imagine that many sponsors come from the Flash era of single-file .swf distribution. Hosting yourself is tricky because say you release the game with Boostermedia, you then have to build something extremely scalable that runs on 80 different portals and connect all these players with eachother. So unless you really really know what you're doing, it's usually not very commercially viable.

 

Good luck :)

 

Sounds pretty tricky to get this done, I'll look into the tools you mentioned to see if I can actually produce something workable on GM. Luckily this game isn't for sponsors, it's just a little pet project of mine I wanted to get rolling on HTML5. Thanks for your advice. :)

Link to comment
Share on other sites

Being also a GM :STUDIO user , i can suggest you to test the firebase solution. Firebase  is a great scalable back-end that works as a database, you can use it for store informations from Player A to Player B and viceversa, with the javascript power of the whole system, and gm javascript extensions you will be ready to play your game in a very short time.

Link to comment
Share on other sites

HTTP Streaming and WebSockets over TCP/IP is the best way to go.

 

You could consider Lightstreamer, which leverages HTTP and WebSockets but tries to overcome some of its limits with some smart algorithms for latency reduction and bandwidth optimization. Thus, it can be used with great benefits for any multiplayer games of any complexity (from a simple card game like the one you described to MMORGPs).

As IMHO one of the benefits about writing a game in HTML5 consist in its 'write once, run everywhere' capability, just note that some mobile operators (and older browsers, too) simply don't talk Websockets.

LS can automatically choose the best available data transport for each client - by default, it would use WebSocket, but it can fall back on HTTP streaming or even long polling if necessary.

 

Have a look at this recent article (Optimizing Multiplayer 3D Game Synchronization Over the Web). You can walk through an online demo of a simple multiplayer 3D world in which Lightstreamer has been integrated for real-time synchronization. The demo allows you to tweak each parameter of the scenario and simulate any flavor of data delivery, while checking the actual bandwidth consumption. Of course, full source code is available for free on GitHub B) .

 

[full disclosure: I work for Lightstreamer]

 

Cheers,

Valerio

 

Link to comment
Share on other sites

Hi there,

 

I have currently finished exactly such a structure for my RL project (virtual control panel for an exteriour projector - you connect to the internal mediaserver, it launches html page through which you send commands to the projector).

 

Its written in javascript (phaser) and served as a static page by a standard webserver but uses websockets to communicate with the tornado (facebook backend) websocket server handling all the command logic. Its pretty simple and straightforward technology-wise (Id say one can manage all the communication in under 100 lines of code), the only problem is that you need to know a bit of python and tornado as well

 

Send me a PM if you are interested in further details, collab or example code ;]

 

 

p.s. the simplest method would be just sending html requests as quetzacotl suggests, it just AFAIK has this stupid visual property of reloading the page after each move and/or timeout.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...