TUTORIAL – Create realtime multiplayer games using Player.IO (PART 2 – Client)

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

By the end of this part, you’re already have enough to create a multiplayer game, so try to hold the excitement and pay attention!

STEP 1 – Import the SDK

First, you’ll need to download the SDK. In the Yahoo Games Network home page, click SDK and Download SDK. The latest version at the moment is 3.06.

The SDK has a lot of examples of pre-made applications, but all you need is the library.

Open : Flash > New Game > Flash > PlayerIOClient.swc

I presume you all now how to import a swc file in flash, but as a refresher this is how you do it:

• In Flash Builder: In the Menu > Projects > Properties > ActionScript Library Build Path > Add Swc… > Browse
• In Flash CC: In the Menu > File > Publish Settings… > Click the wrench icon  next to [Script: Actionscript 3.0] at the top. > Click on  then click on 

 

Then select your SWC file and it will get added to the project. For simplicity, I usually add a folder instead (inside the folder containing my project) and copy all the SWC I need in there.

Next, we’ll write some code.

STEP 2 – Connect to Yahoo’s network

To connect to Yahoo Games Network, make the following call. For now, simply put it in your root class’s constructor:

var game_id:String = "dobukiland-ymhkxklve0qg9ksunqrsq";
var username:String = "user"+Math.random();


PlayerIO.connect(stage,game_id,"public",username,"",null,handleConnect,
handleError);

The game_id variable would be the ID you get after you’ve setup your game’s server.
The username is normally an id that helps you identify your user. Since we don’t really care about tracking users, we can just set it to something random.

Next, you will need to define the handleError and handleConnect functions.

private function handleError(error:PlayerIOError):void{
   trace(error);
}

private function handleConnect(client:Client):void {
   trace("Successfully connected to Yahoo Games Network");
   this.client = client;
}
This will do for now, we’ll add more in handleConnect.

STEP 3 – Enter a room

Use one single function to create and enter a room. The room gets created automatically if it doesn’t exists, otherwise you just enter the existing room. The code will be added in handleConnect.

private function handleConnect(client:Client):void {
   trace("Successfully connected to Yahoo Games Network");
   this.client = client;
   var roomName:String = "Paris";
   var roomType:String = "bounce";
   client.multiplayer.createJoinRoom(roomName,roomType,true,{},{},onJoin,handleError);
}

roomName is the name of the room and can be anything you want, but roomType has to be “bounce”. Normally, you would define a room type, but since you didn’t write the server code, the only room type available to you is the built-in “bounce” room type provided by default.

STEP 3 – Handle messages

Moving along, we now have to implement onJoin

private function onJoin(connection:Connection):void {
   trace("Successfully joined room:",connection.roomId);
   this.connection = connection;
connection.addMessageHandler("send",function(m:Message):void {
      // code for handling message
});
   this.connection = connection;
}

By using addMessageHandler, we’re listening for messages coming from the server. It can be any message type. In this case, I’m handling “send” messages because that’s the type we’re going to use to send our messages.

STEP 4 – Send messages

Now we’re going to send and receive a message. We will need a function that sends the message, and we’ll also need to handle the message that we get back. Let’s say for now, we just send a “Hello, World” and trace it on the receiving end.

public function send(message:String):void {
   if(connection) {
connection.send("send",message);
}
}


private function onJoin(connection:Connection):void {
   trace("Successfully joined room:",connection.roomId);
   this.connection = connection;
connection.addMessageHandler("send",
      function(m:Message,message:String):void {
         trace(message);
      });
   this.connection = connection;
}

Note that we also modified added an extra parameter in our message handling function inside onJoin. The parameter is the message that we sent and got back from the server.

You can try to send your “Hello, World”. Let’s say clicking in the app sends the message. Add the following in your constructor:

stage.addEventListener(MouseEvent.CLICK,
   function(e:MouseEvent):void {
send("Hello, World");
});

You can try the demo here. I replaced trace by a log function that displays the message on the screen, but you get the idea. For the source code of this demo, click here.

 Next >> TUTORIAL – Create realtime multiplayer games using Player.IO (Part 3 – Game example)

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