Search the Community

Showing results for tags 'mobubby'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 1 result

  1. 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 and MoBubby. To begin this tutorial, let's link to the and MoBubby files <link rel="stylesheet" href=""> <script src=""></script> <script src=""></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 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 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 procedure. It simply loads our graphical assets and sets-up some scaling options. Now we can code our create procedure. function create() { game.physics.startSystem(Phaser.Physics.ARCADE); 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; window.setInterval(function(){ 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 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(){ moBubbyConnect( 5 ,function(event){ document.getElementById("buttonLogin").style.display = "none"; game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-div', { preload: preload, create: create, update: update, render: render }); } ,function(event){ moBubbySend({ "name": moBubbyUserName(), "action": "exit" }); } ,function(event){ var data = JSON.parse(; if(loaded == false) return; if(data.action == "move"){ if (!others.hasOwnProperty( others[] = game.add.sprite(128, 128, 'plane-blue'); others[].x = data.x; others[].y = data.y; others[].angle = data.angle; }else if(data.action == "exit"){ if (others.hasOwnProperty({ others[].destroy(); delete others[]; } } } ); }; }; 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 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.