Jump to content

Create multiplayer games rapidly using MoBubby


Recommended Posts

Hello, I am the creator of MoBubby. MoBubby is a new, free, multiplayer service. I created MoBubby so that indie developers and hobbyists can create online, multiplayer games. All for free, and without needing their own server. Adding multiplayer to a game using MoBubby takes mere minutes. Here's a simple tutorial on how to create a multiplayer, plane game using Phaser.io and MoBubby.

To begin this tutorial, let's link to the Phaser.io and MoBubby files

	<link rel="stylesheet" href="https://mobubby.com/resource/connect.css">
	<script src="https://mobubby.com/resource/connect.js"></script>	
	<script src="https://mobubby.com/demo/js/phaser.min.js"></script>	

Next, we'll create a simple button. When clicked, the user will be prompted to loggin to MoBubby

	<button id = "buttonLogin">Login</button>

Naturally, we'll need a holder for the Phaser.io canvas

	<div id = 'phaser-div'></div>

Now we can get into some Javascript. Let's create some global variables.

		var game = undefined;
		var player = undefined;
		var others = {};
		var loaded = false;

The game variable holds our Phaser.io engine. The player variable will hold the current player's plane. The others variable will hold the planes for all other players. Lastly, the loaded variable will hold true once the game is loaded. Next, we'll create our preload procedure.

		function preload() {
			game.load.image('background', 'images/background.png');
			game.load.image('plane-blue', 'images/plane-blue.png');
			game.load.image('plane-red', 'images/plane-red.png');
			this.scale.scaleMode = Phaser.ScaleManager.RESIZE;
			this.scale.pageAlignVertically = true;

This is a standard Phaser.io procedure. It simply loads our graphical assets and sets-up some scaling options. Now we can code our create procedure.

		function create() {

			tileSprite = game.add.tileSprite(0, 0, 1600, 1200, 'background');

			player = game.add.sprite(128, 128, 'plane-red');
			player.anchor.setTo(0.5, 0.5);

			//  Enable Arcade Physics for the sprite
			game.physics.enable(player, Phaser.Physics.ARCADE);

			//  Tell it we don't want physics to manage the rotation
			player.body.allowRotation = false;

				moBubbySend({ "name": moBubbyUserName(), "action": "move", "x": player.x, "y": player.y, "angle": player.angle });
			}, 100);
			loaded = true;

This procedure creates our background, player, and a timer that relays the current player's coordinates to all other players. This data is sent via JSON. Note the action field. Its value is set to "move". As you'll see in a bit, if the user is ever disconnected, we'll send a value of "exit". Now we'll create our update procedure.

		function update() {
			player.rotation = game.physics.arcade.moveToPointer(player, 60, game.input.activePointer, 500);


This procedure simply moves the plane toward the mouse (or finger on mobile devices). Simply because Phaser.io requires one, we'll create an empty render procedure.

		function render() {


The final segment of our code will handle the multiplayer. This includes calling moBubbyConnect and passing it 4 arguments:

  • the maximum number of players
  • the procedure to be executed once the current player is connected
  • the procedure to be executed whenever the current player is disconnected
  • the procedure to be executed whenever the current player receives data
		window.onload = function(){
			document.getElementById("buttonLogin").onclick = function(){
						document.getElementById("buttonLogin").style.display = "none";
						game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-div', { preload: preload, create: create, update: update, render: render });
						moBubbySend({ "name": moBubbyUserName(), "action": "exit" });
						var data = JSON.parse(event.data);
						if(loaded == false) return;
						if(data.action == "move"){
							if (!others.hasOwnProperty(data.name)) others[data.name] = game.add.sprite(128, 128, 'plane-blue');

							others[data.name].x = data.x;
							others[data.name].y = data.y;
							others[data.name].angle = data.angle;
						}else if(data.action == "exit"){
							if (others.hasOwnProperty(data.name)){
								delete others[data.name];

As the first argument sent indicates, this demo allows up to 5 players. The next argument is the procedure that is executed once the current player connects. During which procedure we create our Phaser.io game using the previously coded preload, create, update, and render procedures. The third argument is the procedure that is executed once the current player is disconnected. In our case, a simple "exited", JSON message is sent to the other players. The fourth and final argument is the procedure executed whenever the current player receives data. In this procedure we do one of two things:

  • in the instance the action value is "move", we update the specified player's plane
  • in the instance the action value is "exit", we remove the specified player's plane

Just like that, we have a simple, multiplayer demo. You can download a copy of this demo here. Please let me know (via this thread) if you have any questions, or encounter any issues.

Link to comment
Share on other sites

Just a small suggestion if I may.

From an API point of view, this alone

moBubbySend("{\"name\": \"" + moBubbyUserName() + "\", \"action\": \"exit\"}");

would put me off using it. Can you consider, instead:

moBubbySend({name: moBubbyUserName(), action: 'exit'})

and then, internally, JSON.stringify that.

Link to comment
Share on other sites

@Gio I've updated moBubbySend to support objects. If moBubbySend is passed a string, the string will simply be sent. However, if moBubbySend is passed an object, the object is stringified and then sent. The above tutorial has been updated. The following 2 examples are now valid.

moBubbySend({ "name": moBubbyUserName(), "action": "move", "x": player.x, "y": player.y, "angle": player.angle });
moBubbySend({ "name": moBubbyUserName(), "action": "exit" });


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.

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.


  • Recently Browsing   0 members

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