TUTORIAL – Create realtime multiplayer games using Player.IO (PART 4 – Lobby)

[ part 1 ] – [ part 2 ] – [ part 3 ] – [ part 4 ]

STEP 1 – List rooms

So far, we’ve hardcoded the name of the room “Paris”, but in case your game becomes wildly popular, you wouldn’t want everyone in just one room. In fact, Player.io has a limit of 45 people per room. This might seem limiting, but 45 people is very crowded. If you want to create some kind of massive multiplayer “World of Warcraft” kind of game, you would have to divide you world into separate rooms. Note that room is just a concept, it doesn’t have to be a place with 4 walls, so you can just say “every 10 meters is a new room”.

So remember in the previous examples, the handleConnect function had a line like this:

client.multiplayer.createJoinRoom(roomName,roomType,true,{},{},onJoin,handleError);

The roomName was always hardcoded as Paris, but let’s say now you can have more than one room for your game. You would want a way to list them all. For that, use the following code:

private function listRooms(roomType:String):void {
client.multiplayer.listRooms(roomType,{},100,0,onListRooms);
}

private function onListRooms(array:Array):void {
   for each(var room:RoomInfo in array) {
      // code to display room
}
}


The name of the room is room.id, which can be used as a parameter for roomName when calling createJoinRoom. Also note that you can call joinRoom instead of createJoinRoom since the room already exists.

 

STEP 2 – Filter list

One thing that could be useful is to filter the list of rooms by some parameters. Perhaps the lobby includes different games or different types of games, where the play can choose which one to join. For that, you need to make sure the room has enough information when it gets created. Change the createJoinRoom call as follow:

client.multiplayer.createJoinRoom(roomName,roomType,true,{game:"MyGameType"},{},onJoin,handleError);

Now, when you list the room in the onListRooms function, the room object will have the game type saved as room.data.game.

private function onListRooms(array:Array):void {
   for each(var room:RoomInfo in array) {
      trace(room.id,"type is:",room.data.game);
}
}

Adding a parameter to the room also allows you to filter by game types on the server side when listing the room. For that, you will need to change a setting by going on the Player.IO (aka yahoo game network) web page.

First, navigate to your game inside the [My Game] section, and click on [Multiplayer] in the sidebar on the left. Then click settings, and enter “game” as one of the Search Columns. Now when you call listRooms, you can filter by game type:

private function listRooms(roomType:String):void {
client.multiplayer.listRooms(roomType,{game:"MyGameType"},100,0,onListRooms);
}

To see a demo of a lobby with the Tutorial, DrawingBoard and Shoot-Em-Up example, click here.

As a reminder, the source code for all the examples in this tutorial is on GitHub.

This is it for now. I hope you enjoyed this tutorial. Eventually, to produce better multiplayer games, you will need to work on the server side, so I might produce another tutorial at a later time.

Meanwhile, check out this flash game that uses Player.IO, released online and on both Apple App Store and Google Play store:

Blink Pong (Android, IPhone/iPad, Source code on GitHub)

 

---

[ part 1 ] – [ part 2 ] – [ part 3 ] – [ part 4 ]