How to create a game

This is sad, I’m actually procrastinating right now. There’s a game I really need to work on, but writing a blog post requires less thinking for me. Oh well, I’m just gonna write a post about how to create a game. Like for my previous post, I try to be non-technical.

STEP 1 – Come up with the idea

I know it’s obvious, but you do have to spend a little time on it, and here is why. Throughout the process of making your game, there will come a point where you will decide: is this really worth it? Even if you’re doing a game jam and they gave you a theme, like make a game about “sausage”, don’t just jump in and say “I’ll make a game where you have to eat as many sausage as possible”. Don’t go for the obvious. One recurring issue when making any project is, at some point, you might want to give up. There’s nothing wrong with giving up, sometimes you are much better off spending your time on something worthwhile. However, if you find yourself giving up easily on projects, then something needs to be changed. Giving up a project does feed into depression, or a sense that you can’t do anything right.

Good ideas do come back

Back to our sheep (revenons à nos moutons). The reason I put importance to idea is that a good idea will stick with you, and you will be less likely to drop your project. You will think about it during the day when you take the bus, and you will dream about it in your sleep. Let’s say you had an awesome idea for a game jam. Let’s say you failed to create your game by the deadline, but the idea was really good. Perhaps you’ll start working on your idea regardless of any jam. Perhaps there will be another game jam that perfectly fits your idea. Great ideas do stay for a while. As far as my own personal experience, I can talk about this one idea I had a long time ago that had yet to be achieve. The idea is some kind of virtual world, where people can put their own content. Perhaps ten years ago, I dreamed about that idea. Then three years ago, I tried to implement it in Flash. I failed over and over, but kept working on it. Eventually, I made a prototype which was very hard to use. It was just a 3D maze, nothing more than that, except that walls could be replaced by creating a .swf file (creating a flash), basically that means I could create walls separately from the maze. My original idea started to fall apart, as the project looked more and more too ambitious, the code was getting harder and harder to understand, and… I kinda felt that idea was crap. I kinda gave up on the prototype, because I created something that was too complicated for me to use.

Three years later, a few months ago, I did Ludum Dare 29 (a game jam). Created my game, submitted it, and was done with it. Then I started thinking back about my incredible 3D maze, and thought… wouldn’t it be cool if I could travel inside a maze and just go from game to game, like I’m in a museum looking at paintings on the wall, and with a click of the mouse, be transported into one of those games that was created for Ludum Dare 29. Why not reuse my 3D maze? After all, it was purposely made to accept any kind of content on the wall. I worked on it as an extra Ludum Dare project, relearned my old code, and produced Ludum Maze. I felt great, because I felt I just got 10% closer to my big crazy idea of virtual world. RockLeeSmile also made a video about Ludum Maze. I didn’t really know who RockLeeSmile was before that video, but I found out he has more than 50k subscribers so yeah! He’s popular.

Now, I find myself rethinking about my original idea of virtual world where people can put whatever the hell they want, so I plan to work on it again soon.

In short, make sure you have a solid idea. You can still change your idea later, even do a 180 degree on your idea if necessary, but do get started on a great idea. It will push you forward.

STEP 2 – Pick up the low hanging fruits

The next step might not be the usual one you can think of. Basically, don’t just go ahead and start coding… unless it’s what you love to do. My advise is to pick up the low hanging fruits. By that, I mean you have to work on the game as much as possible, without feeling that it is actual work. For me, coding is work, it’s difficult, it’s painful at time… Drawing is ok, but it’s still work. Quite frankly, there are very few things for me that don’t feel like work, but I do find that writing music is the least effort intensive work. (yeah everyone is different). So a lot of time, before doing any coding, any artwork, I make the music first. I do have to say that music is a great starter. Once you have your music, you leave it on while working on your game and somehow it motivates you.

Yet, there are several things even less effort intensive than music. How about writing a story. Just fill in your intro, write the backstory of your game! Or how ’bout just making the website for it. For me it’s work, but for a lot of people, making a website is an nice and easy task. My point is you gotta have something started, otherwise you’ll never get started, that’s quite obvious when you say it. Now, I’m saying this because I am sometimes lacking motivation when starting a game (I do catch up later), but perhaps a lot of you are full of energy right from the batch. In that case, I’ll advise you to go for the meat, just go ahead and attack the most difficult task! You’re ahead of the game anyway.

STEP 3 – Let someone know

Be aware that this is step 3, not step 1 or 2. Why?

Well… at this point you’re more or less committed. You’ve done a bit of work, you solidified your idea. So you can pretty much say you’re not all talk. (at least for yourself). Then you can talk about your ideas to friends. The reason you shouldn’t be talking about your game at step I… is NOT because someone might steal your idea. (That is a decent point, but by now I’ve come to realize that people are not that evil). No, the real reason is because there will come a time when your friend will ask you. “So, what happened to that … whatever… “Gargamel vs the Smurf tower defense” game you were working on. And you don’t want to be like…. “Well, I kinda gave up on it because… oh shut up.”. Basically you don’t want to be all talk. I don’t mind “people who are all talk”, you guys are entertaining. ;-P

But for yourself, you don’t want to start feeling like you’re all talk. Again, it feeds into this self deprecating / depression pattern. You think you’re just good at talking but you don’t achieve anything. You might sense that people don’t take you seriously, because you’re all talk. Even though, quite frankly, you shouldn’t care what others think about you. But we’re all humans, we all want to be loved… or hated by those who envy you. Anyway, at the end, what you think about yourself is important, and you want to prove to yourself that you can achieve.

Also, let’s say your friend asks you: “So how’s this game coming along”. Then you just take out your phone, and just go: “Hey, listen to the soundtrack I finished for the game.” They’d be like: “Yeah! Rock on dude!” (…. or dudette!)

STEP 4 – Where’s the beef?

Ok, so you’ve done your homework, you came up with the idea, cooked out some starters, and tweeted about your progress… I don’t think there is any step that comes between step 3 and…. The Meat!

What I call the meat is the core of the game. Something in the game that says: “If it’s not in the game, the game doesn’t exist!”. For vegetarians, you can call it the Tofu. I call it the meat.

The meat is the most difficult part to digest. For me it’s usually the most painful work. For me, the meat is the coding. It’s hard to believe, but I hate coding. I hate it and love it at the same time. I’m married to coding, for better or worst. You can’t stand the meat, and you can’t live without the meat. Once you’ve started the meat, it will stick with you until the end, but you know you’re really into it. You’re in attack mode, and you feel the pressure and adrenaline. By attacking the meat, you are really committed at this point. You might think, well if it’s an obligatory step, why mention do I even have to mention about it anyway. Well, do be aware that I am putting steps in a chronological order that I find fitting. So I mention the meat, because the meat happens right now, at step 4.

STEP 5 – Test your shit before throwing it out!

Again, an obligatory step. Who makes a game and throws it out there without even testing it to make sure it works? I’m ashamed to raise my hand. I can explain, I actually don’t have an iPhone, but with Adobe AIR I do sometimes produce iPhone games, simply because it’s possible. A lot of time I couldn’t test the game on an actual device, so the game might be submitted to the App Store, then a pissed of Apple employee will come back to me and say: “Your game doesn’t work. Thanks for wasting my time. Test your shit before throwing it out!” (That’s what goes through their mind, not what they replied to me) Yah, sorry but I have to work with what I have. I do however test the game in a simulator, so in a sense I don’t skip this step.

When testing, it is important yet ironic that you must try to find the enjoyment in your game, yet realize that others will not experience the game the same way you do. Now, let’s say you create a puzzle game. How can you possibly enjoy a puzzle game when you know all the solutions? The idea here is imagination. You really do have to imagine someone playing the game. One of the nice trick is feed on surprises. It’s hard for me to think of a good example… I remember when I produced the intro for my game “The World is in your hand“. Basically, the intro is a series of questions where you just say “Yes” or “No”. Because it was designed for people with motor disability, you only press one button, so Tap=Yes and Double-Tap=No. As you go through the intro, it feels like you just tap to skip to the next scene and it was true for that intro. Regardless of whether or not you said Yes or No, the intro would move on to the next page and the character in the story would respond accordingly to your Yes/No answer. This is true except for the final question. In the last scene in the intro of “The World is in your hand”, your wife asks you: “I’ve been working on something. Do you want to see it? (a flying chair that she’s put all her heart creating just so that you can fly around despite being disabled). You say Yes, and you start the game, where you’re on a flying chair roaming around the world. You say No and your wife leaves. You’re left alone and depressed, a game over screen comes up. This is the only way you can get a game over. When I wrote that intro, I was thinking the whole time… “ok somebody is gonna say No and be like WTF. Even by mistake, somebody is gonna say No. I want that WTF moment, I really look forward to it. Heck, I’m rolling on the floor just imagining that moment. I’ve never heard of anyone getting to the Game Over screen, because you have to be a jerk to your wife. Yet, it made me happy to think about it.

But yeah, do test your game, and you really do have to make an effort of imagination to visualize someone playing your game and discovering it for the first time.

STEP 6 – The cherry on the cake

This is actually one of the most important step. It’s not even obligatory, yet it is the most important. There comes a point where you can safely say, “I’m done!”. You even polished the game… that’s step 5.5 which I forgot. Anyway step 5.5 is boring to talk about so I’m just gonna skip it. So what is the cherry on the cake if it’s not polishing.

The cherry… is what makes your game special. At some point, you need to think about the game and say to yourself: “Why am I doing this? Where is the wow moment? What is the thing about this game that lets me talk about it to everyone? What is the one single one second moment that will bring shivers to your audience? That’s the cherry on the cake. The wow moment. Again, it’s not obligatory because you can release a game without any wow moment. If the purpose was just to practice making a game, perhaps learn a new programming language, then it’s perfectly fine to just throw out your cake without the cherry.

You see, a cake can be delicious, but without he cherry (PS: The cherry doesn’t have to be a cherry, it can be a piece of potato),… without that cherry, the cake is missing that inner beauty, the thing that makes you visualize the cake in your mind. The thing that makes it not just plain, but plain perfect. For your game, it’s the thing that makes people be like: “Wow… LOL…. OMG…. I love this. Even if I really hate the game, I love this.”. The cherry doesn’t have to taste better than the cake. If the cake is delicious, the cherry takes it over the top. If the cake is shit but the cherry is delicious, then the cake might redeem itself.

Let’s be less cryptic. Your game is really fun, but you didn’t have that moment when someone got touched, or surprised. Your game will be forgotten after a week. Now you add the WOW moment. Your game will be remembered. If it’s bad, it’s going to be remembered as a bad game, that had this one moment that people will fondly think of. People will remember that.

My main point, and this is the cherry of my blog, is that you don’t make games just to make games. You do it because you want to show humans, how humans are awesome.

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 ]

TUTORIAL – Create realtime multiplayer games using Player.IO (PART 3 – Game example)

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

At this point, you should already have enough to produce a realtime multiplayer game. You’ve got a client that sends a message to the server and gets broadcasted back to other clients.

I still wanted to add this section, because there are many ways to handle multiplayer once you have the system hooked up. Depending on which method you use, synchronization can be tricky.

Let’s go over a few examples where we use the system to produce a multiplayer app or game.

Example 1 – Collaborative Drawing board

Let’s the program you wrote previously as a baseline. You don’t have to change anything, except just remove the code that sends “Hello, World” when you click on the screen.

First, we’re going to implement our drawing program as single player. Add the following code in the constructor:

var color:uint = uint(uint.MAX_VALUE*Math.random());

stage.addEventListener(MouseEvent.MOUSE_DOWN,
   function(e:MouseEvent):void {
penDown(e.stageX,e.stageY);
});

stage.addEventListener(MouseEvent.MOUSE_MOVE,
   function(e:MouseEvent):void {
      if(e.buttonDown) penMove(e.stageX,e.stageY,color);
});

We also need to implement the penDown and penMove actions:

private function penDown(x:Number,y:Number):void {
graphics.moveTo(x,y);
}

private function penMove(x:Number,y:Number,color:uint):void {
graphics.lineStyle(1,color);
graphics.lineTo(x,y);
}


This code lets you draw when you move the mouse with the left button down. Now we need to make sure the draw commands are broadcasted.

Replace the code that you added in the constructor as follow:

stage.addEventListener(MouseEvent.MOUSE_DOWN,
   function(e:MouseEvent):void {
connection.send("penDown",e.stageX,e.stageY);
});

stage.addEventListener(MouseEvent.MOUSE_MOVE,
   function(e:MouseEvent):void {
      if(e.buttonDown)
connection.send("penMove",e.stageX,e.stageY,color);
});

You will also need to add message handlers inside your onJoin function:

private function onJoin(connection:Connection):void {
log("Successfully joined room:",connection.roomId);
   this.connection = connection;
connection.addMessageHandler("penDown",
      function(m:Message,x:Number,y:Number):void {
penDown(x,y);
});
connection.addMessageHandler("penMove",
      function(m:Message,x:Number,y:Number,color:uint):void {
penMove(x,y,color);
});
}

To test the collaborative whiteboard click here.

 

Example 2 – Multiplayer shoot-em-up

Another way to use the bounce server, rather than broadcast commands, is to broadcast the self state. For our multiplayer shoot-em-up, we will broadcast the x,y coordinates of the space ship, and add a shoot command.

Let’s start by adding our listeners inside the constructor:

stage.addEventListener(MouseEvent.MOUSE_DOWN,
   function(e:MouseEvent):void {
      if(connection)
connection.send("shoot",e.stageX,e.stageY,client.connectUserId);
});
stage.addEventListener(MouseEvent.MOUSE_MOVE,
   function(e:MouseEvent):void {
     if(connection)
connection.send("moveShip",e.stageX,e.stageY,client.connectUserId);
});
addEventListener(Event.ENTER_FRAME,animateScene);


Also add the message handlers inside the onJoin function:

private function onJoin(connection:Connection):void {
log("Successfully joined room:",connection.roomId);
   this.connection = connection;
connection.addMessageHandler("shoot",
function(m:Message,x:Number,y:Number,id:String):void {
shoot(x,y,id);
});
connection.addMessageHandler("moveShip",
      function(m:Message,x:Number,y:Number,id:String):void {
moveShip(x,y,id);
});
}

The animateScene will be called in a loop continuously to animate and display the spaceship and missiles. Next, we’re adding our moveShip and shoot functions:

private function getShip(id:String):Object {
   return ships[id] ? ships[id]:
(ships[id] = {color:uint(uint.MAX_VALUE*Math.random())});
}

private function moveShip(x:Number,y:Number,id:String):void {
   var ship:Object = getShip(id);
ship.x = x;
ship.y = y;
}

private function shoot(x:Number,y:Number,id:String):void {
   var ship:Object = getShip(id);
ship.x = x;
ship.y = y;
createMissile(x,y,-10,0);
createMissile(x,y,10,0);
createMissile(x,y,0,10);
createMissile(x,y,0,-10);
}

private function createMissile(x:Number,y:Number,xmov:Number,ymov:Number):void {
missiles[Math.random()] = {x:x+xmov,y:y+ymov,xmov:xmov,ymov:ymov};
}

Note that you’ll also need to define the ships and missiles member variables as objects. Since we have to remember each ship’s position in the screen, we have to index them using each player’s ID. We also index missiles by a random ID to track their trajectory and remove them when they exit the screen. Next we have the animateScene function:

private function animateScene(e:Event):void {
graphics.clear();
   for each(var ship:Object in ships) {
graphics.lineStyle(1,ship.color);
graphics.moveTo(ship.x,ship.y-10);
graphics.lineTo(ship.x+10,ship.y);
graphics.lineTo(ship.x,ship.y+10);
graphics.lineTo(ship.x-10,ship.y);
graphics.lineTo(ship.x,ship.y-10);
}
graphics.lineStyle(1,0xFF0000);
   for(var mid:String in missiles) {
      var missile:Object = missiles[mid];
graphics.moveTo(missile.x,missile.y);
graphics.lineTo(missile.x+missile.xmov,missile.y+missile.ymov);
missile.x += missile.xmov;
missile.y += missile.ymov;
if(missile.x>stage.stageWidth || missile.x<0
|| missile.y>stage.stageHeight || missile.y<0) {
         delete missiles[mid];
}
}
}


Demo available here.

One thing that we can noticed is that the movement of the ship you control is not really that smooth. That’s because there is a delay for the message to go to the server and back. When making a game, you need to make sure that the controls are as responsive as possible. So rather than sending the coordinates of our own ship to the server and back, we will apply them directly. Change the MOUSE_MOVE event listener as follow:

stage.addEventListener(MouseEvent.MOUSE_MOVE,
   function(e:MouseEvent):void {
      if(connection) {
connection.send("moveShip",e.stageX,e.stageY,client.connectUserId);
moveShip(e.stageX,e.stageY,client.connectUserId);
}
});

You will also need to change the message handler to ignore messages that relate to your own ship.

connection.addMessageHandler("moveShip",
   function(m:Message,x:Number,y:Number,id:String):void {
      if(id!=client.connectUserId)
moveShip(x,y,id);
});

The ship should look a lot more responsive. See the difference in the demo here.

Now this raises a few questions. If the ship’s coordinates is slightly different than the one sent to the other player, how can we determine if a ship has been hit by a missile? The answer is simple. Simply do a collision check only on your own ship, and if a collision occurred, broadcast that message. While another player might see a missile colliding with your missile yet not damaging it, it’s not as frustrating as seeing your own ship explode when you clearly dodged a missile. In terms of real-time, you can never get perfect synchronization (unless you update the ship using the coordinates that made a roundtrip to the server and back, which deteriorates responsiveness).

So for our final test, we will test collision between the ship and the missiles. Inside the animateScene function at the end, add the following:

if(client && ships[client.connectUserId]) {
   var myShip:Object = ships[client.connectUserId];
   var rect:Rectangle = new Rectangle(myShip.x-10,myShip.y-10,20,20);
   for each(missile in missiles) {
      if(rect.contains(missile.x,missile.y)) {
// ship has been hit
gameOver = true;
connection.send("gotHit",client.connectUserId);
         break;
}
}
}

And add a message handler inside the onJoin function:

connection.addMessageHandler("gotHit",
   function(m:Message,id:String):void {
      delete ships[id];
log("Ship",id,"has been destroyed!");
});

You can check out the result here.

 

 Next >> TUTORIAL – Create realtime multiplayer games using Player.IO (Part 4 – Lobby)

---

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

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 ]

TUTORIAL – Create realtime multiplayer games using Player.IO (PART 1 – Server)

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

---

 

This multi parts tutorial explains how to produce a multiplayer game using Player.IO’s SDK (Now called Yahoo Games Network SDK.)

Creating a multiplayer game, especially real-time, is always a daunting task for developers. Yet, the player.io API simplifies the task and makes it actually very easy. I’m going to explain in this tutorial how to produce a game using the API. The language used will be Actionscript, but the SDK supports other languages like Objective-C, Java (for mobile), Unity, C#. The server has to be implemented with C#, but it’s a lot easier than you’d expect.

I’m sure you’re all expert programmers, and have ways to optimize your code to create wonders, so in this tutorial I will just explain the bare absolute minimum to create a simple game.

STEP 1 – Get an account on Yahoo Games Network

As a shortcut, I always type “player.io” in the url bar because that’s what sticks to my mind. Since the company has been bought by yahoo, it shows a link to redirect to gamesnet.yahoo.com. You then proceed in signing-up with a new account with the link in the top right.

STEP 2 – Setup a game’s server

Once you’ve completed the signing-up, your first step is to setup your game’s server.

• Click on My Games
• + Create New Game
• Choose a name (ex: “Dobukiland”)
• You should see a message like this:

---

 Your game has been created!

Your next step should be to connect to your game. First, download the appropriate client library from our downloads section, and use your game id to authenticate to the Backend Game Services.

Dobukiland Game ID: dobukiland-ymhkxklve0qg9ksunqrsq

---

Ok, so we’re done with part 1 of this tutorial

(wait, what?!)

Right, you can actually skip the whole process of writing your server code, compiling your dll, testing locally, re-uploading to the server ect… Normally that’s what you would do to create your game, but remember in this tutorial, I’m only showing the bare minimum. Using the steps above, you’ve already been provided a server. It’s a very dumb one that simply broadcasts messages that you send to everybody in the same room. But that’s actually all you need to create a realtime multi-player game.

For more advance user, I will write more on setting up a local server in the later part of this tutorial. But for now, we’ll just go to the next step: Writing the client code.

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

---

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