Monthly Archives: June 2014

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.

How to become a game developer?

Turns out, I became a game developer at thirteen years old. It was so long ago, so the only way to remember how old I was is by remembering which games I played at that time, and find out what year they were released.

All you need is game

The thing is, the only thing you need to become a game developer is to create a game, however simple it is. Whether you become pro at it, do it as a hobby, or just wanna scratch one line off the list of things you want to do before you die, you really need to make one game to become a game developer. That’s why I can really claim to become a game developer at thirteen. I can’t remember exactly my first game, I think it was a clone of bomberman, or that shoot’em up where your spaceship is actually a sperm. I usually consider my first game to be World of Turtle because it was the only complete game I made at that time. Also, a couple decades later, World of Turtle turned into this.

Is it all about programming?

Ok, so depending on who you ask, the answer to “How to become a game developer?” might differ. For some, they will tell you that you need to network with people in the game industry. Others will tell you that you need to learn a programming language. That’s mostly true but there are tools out there, like GameMaker Studio, Stencyl, Twine, Construct, that let you make games with little coding. Heck even with Flash pro, you can make a game with almost no coding. One of the most popular games on Newgrounds is Steal the Diamond, and it had a lot less coding (written in AS2) than most of the games out there, because the work was mostly concentrated on animation.

What’s important for a game developer?

I wanted to give my own answer to the question. I already said that to become a game developer, you just need to make one game. That’s like saying to become president you have to be elected president. That’s not really my answer. I would say that the important thing about become a game developer is to find an audience and feed on it.

I was developing quite a few games at 13, and my friends now  still remember my World of Turtle. At that time, I was sharing my games with my classmates every chance I got. That was my audience, and I was motivated because of that. Then came a long period of drought. For a while, I wasn’t making games so much. I still had friends to share my games with, but I didn’t feel they were really into it. My friends were into games alright, but the kind of game you purchase in stores. Basically, any games I made couldn’t be impressive compared to the ones sold in store. It took me a while to find my niche again. The internet came out, and I found the indie game developer community. This time, it is a different scene. People are interested in games not because they are impressed by it, but because they can relate to your work. They might use different tools, but they know how to make games. It’s like artists sharing ideas and work.

Don’t just play with yourself

I realized that this is the most important element of making games. It’s not the software, it’s not the skill, it’s the people you share it with. Without an audience, you can’t make a game. It’s practically impossible. I think most game developers will agree with me, when you make a game, it’s not to play with it! The only time when you play with your own game is when you need to test it. I pretty much never had as much fun creating my own game as I had playing it myself. Of course, in some way it makes sense because for a puzzle game, you already know all the solutions. Also, you’ve already watched the ending. But my point is, you don’t really have fun playing your own game. You have fun sharing it and watching somebody play. I really enjoyed when a friend was constantly cursing when trying to beat one of the most difficult level of World of Turtle.

Where’s everyone?

So how do you get your audience? Ok you might have a couple friends around who really love what you’re doing (and sometimes even a couple friends is enough). But really you should get the game dev community as your audience. Some people in that community don’t actually make games, they play indie games and even make videos out of it, like Jupiter Hadley (I can’t confirm for sure that she doesn’t make games). She rarely makes bad comments about a game, so if she doesn’t mention something she likes when playing your game, you know your game is crap.

So where do you get your audience? Your best choice for joining the community is to make a game for a Game Jam.

Game jam? Sounds delicious.

What’s a game jam? So it’s an event, that usually last a weekend or a week, during which you have to create a game (and you thought making a game takes years!). Actually, those are usually not complex games. It’s the kind of games you play one time and forget about it. (think of it as a piece of art, a short film, or a song). It doesn’t mean that it’s not fun, but usually, because of the simplicity of the game, I rarely come back to it after a week. Most of the time, you will finish the game after playing one time. I really think of them as a short films. So for one weekend or a week, you work on a game, release it, and share it. The game becomes part of a collection, and… that’s about it. Kind makes you feel like you’re part of something big. But actually, you will get quite a few people who play your game. If it’s really bad, people will say it’s bad. But let’s say you made a game with very awful Gameplay, but the story is interesting. People can be touched by it. I’m thinking of one of my game produced in 48h called The World is in your hand. People either really hated the game mechanics, or were really touched by it. Maybe both. If I didn’t create it, I’m sure I would have fell in the first category. So anyway, don’t be shy, be ready to receive some harsh criticism though, but don’t worry. There are a lot of awful games thrown out in those jams, so you’ll feel right at home.

Where do I go?

A place to find game jams is http://compohub.net. You’ll find out that there’s a game jam almost every months. Now it’s like an infection, and it’s impossible to do them all. If you’re flexible, you can try to submit a game for two or three jams at the time. Then you get double/triple kudos, and your game looks like a weird mix of random ideas. Compohub is your one-shop-stop for learning about game jams, but you also want to spend your time on jams that really matter. Gamejolt and itch.io usually hosts some of those jams, so you can be sure a lot of people will participate. Newgrounds also has some jams once in a while. I do find though that Newgrounds is heavily focused on art and animation, so people will get very critical of that. I also find out that unlike other portals, Newgrounds users are … at best very honest, at worst real jerks. Be ready for your worst criticisms, especially if you’re making a game. (somehow crappy animations get a free pass on Newgrounds, I really don’t know why). My advice though, if you’re making a Flash/HTML/Unity game, do include Newgrounds in your release. You get an almost automatic thousand views, and as a game developer, your goal is really to share your work.

Ludum Dare? Is that latin?

One of the most popular game jam is Ludum Dare. To give some perspective, most game jams have a couple hundred entries. The least popular ones have about 10-20, last Ludum Dare had nearly 2500. The great thing about Ludum Dare, is that you get a huge number of people playing your game, and they’re not all jerks like on Newgrounds (j/k, I hope Tom doesn’t read my blog. Hey, still pissed at you guys for removing Flappy Mario from the site even after I busted my ass redoing all the graphics…). Be aware that on Ludum Dare, you do get rated, unlike a lot of jams out there. You will get a score and a ranking. It can be disheartening when you realize people rated one star on some artwork that you spent several hours on. Ludum Dare is a limited time competition. There are two simultaneous contest, one is 48h with strict rules, the other one is 72h and easy going. Whether you strictly abide to the rules is your own choice. There’s no prize to win except popularity, so you should really just do it for fun. To give you an example of the quality of games developed during Ludum Dare, here are the entries I’ve produced for three jams: The World is in your hand, My Champion Oliver and Princess Fart. I know, those are only my own game, and I’m kinda in the middle in ranking. There are a lot of games worst than mine.

Global Game Jam

Alright this is for the pros…. ok not really. If you’re looking to join a game jam, Global Game Jam is definitely the place to be. Literally. This is not an online game jam. You have to move your butt out of the house, go to a location where you will meet people in person, shake their hands if you’re not homophobic, and team up with them to produce a game. If you’re not a programmer, this is the place to be because you will be put into a team that has programmers. Global Game Jam is not short of programmers, I guarantee. Where is Global Game Jam? Well it’s in California so book your plane ticket… ok it’s also all over the world. Really, if you go to the Global Game Jam website, you will find locations all over the world. Your location may have 10 people, or 100 people. If you’re lucky, a tech company will host the game jam and give you free food. My last game jam was at Facebook, and they provided us a shuttle to get there. What do they get out of it? Well I’m sure if I helped produce a godly awesome game, or maybe if I didn’t look so weird (I’m a real hamster you know), they would’ve tried to hire me. Global Game Jam is only once a year in January. No matter how your game turns out, it’s a fun experience. One advise during Global Game Jam is to balance the team with artist and devs to 50-50. During my last jam, we had 3 devs and 2 artists at first, so I chose to become an artist/composer for the team to balance things out.

One game… a month?

Turns out, if it becomes a habit, you can pretty much produce one game a month or less. You can put out a game out of your ass pretty much every day if you wanted to. But for me, I found that one game a month is about right if I don’t want to just produce some crap that will get responses like “You’ve wasted one minute of my life” or something like that. There is actually a website called http://www.onegameamonth, created by McFunkypants (that’s his real name), which gives you a score if you do your homework and manage to produce a game every month. You get bonus points for having twitter accounts, selling a copy of your game, fixing someone’s bug… There a bunch of side quests that give you points. There are also random theme words, and if you include them in your game you get extra points. One time, they released three words for bonus points, and we got a plethora of Secret Frozen Kitten games (I don’t like when people go for the obvious)! So far, I haven’t really figured out how exactly OneGameAMonth has helped me. I don’t really pay attention to my score, but somehow I’m compelled to fill out all the side quests whenever I make a game. I don’t visit the site very often (once a month, of course), but being part of it kinda motivates me to create one game every month. I’m actually doing better than that though, so I’m not sure if that site is really helping me, but I’m sure it is useful for a lot of game developers who need a little push to be motivated to work on games regularly.

To tweet or not to tweet

What a cliche title, great job Jack! (If you know me, you know I hate cliches). Anyway, to tweet of course. When you make a game, tweet about it. I try not to abuse tweets by sending more than one tweet per game, but I really shouldn’t care. I’ve seen people have ten tweets about their games. Hey, if it makes you happy, just do it. That’s why Twitter invented the mute button anyway (j/k). So onegameamonth does give you one hashtag to tweet #1GAM. Usually, McFunkyPants re-tweets my tweets when I post there. I haven’t tried yet to post a very awful boring game to see if he’ll re-tweet that, and I’m not sure if I have the courage to do that. If you’re making a game for Ludum Dare, you got #LD48. You can also hashtag #LD72, #LD<the jam’s number>, #LudumDare, but it seems like #LD48 is the most consistent one. Aside from that, there’s #gamedev, #indiedev,… if you post on portals you can also include them (#gamejolt, #newgrounds, #kongregate,…). One good trick is to follow other game developers. Whenever they post a tweet, I just pay attention to the hashtag they use and I know where to tweet my games. That’s really the only reason I’m friends with them (j/k, don’t click that unfollow button! dah!!!).

Meet the big players at a game conference

So you’ve made one game, you’re one of the crowd, and to show you’re in the crowd, you decide to go to a game conference. Let’s say you decide to go to E3, or the Game Developer Conference… to promote your Flappy Bird clone you produced in one day… for Ludum Dare… using a tool that only makes Flappy Bird clones…… doesn’t matter ;-P. I’m only gonna talk about GDC because I haven’t been to E3, and quite frankly, I find myself more interested in GDC than E3 as an indie game developer. Basically, if you’re a game developer, eventually you’d want to go to GDC. However, GDC is reserved for professionals. You work for Ubisoft, Blizzard, and they churned out a couple thousand dollars for you to attend GDC? Well you’re pretty lucky, but for the rest of us, we need another way. Alright let’s say you’re really loaded, like you inherited a fortune from your uncle, you just won the lottery, or you made Flappy Bird and pulled out the game early enough not to get sued… then yeah you can afford the ticket to GDC. That’s still leaves the rest of us… Well turns out if you put a little work into it, you can get a free pass to GDC. During the last conference, an association called IGDA, provided limited passes in exchanges for hours of volunteering. I’d say this is the best bet for most of us, and the volunteer experience itself is definitely worth it… because they give you a free t-shirt at the end… (j/k… I really wish I didn’t have to put j/k all the time because it’s cliche, but I really got infected with that awful “politically correct” bug since I live in USA. J/K!).

Is GDC really worth it? Well I can tell you one single thing that made my experience at GDC worth it. I met… wait let me look on the internet… Dave Grossman! Yes, who can forget that name. Very gentle dude. I didn’t ask for his autograph but I got a picture with him, tweeted the picture, and crop myself out the tweet cause I didn’t like how Dave looked too handsome compared to me. You might think… well what’s the big deal… and who is Dave Grossman? Well, he’s one of the three creators of Monkey Island. What is Monkey Island? Personally, it’s what I consider my favorite game of all time. I’ve played it less than Warcraft 3 and Civilization, but it is the game that I think most fondly about. The humor, the jokes, the characters… Actually it’s not Monkey Island but Monkey Island 2 that I loved, and for me, meeting its creator would be like meeting Abraham Lincoln, Einstein or Santa Claus. I have yet to meet Ron Gilbert and Tim Schafer. I’m a bit worried that Tim Schafer might eat me.

Oh but when…. WHEN will I ever get the chance to work on… the next Super Mario!

I can’t comment on something like that because so far, I haven’t touched the big names in the industry. The closest I’ve got so far is working on Wasteland for Crowdstar, or perhaps it was one of those silly Facebook games I produced for this startup that is no longer active. Either way, those are good… I mean it’s nice to work on games that once affected millions of people. But as it turns out, affecting a thousand people with one game and get personal feedback about it is pretty much as rewarding. I will say, you don’t need a million fans to be satisfied when making a game. In fact…

You only need X fans

… you only need one. I’m not counting yourself. Really, you only need one person. It’s not the quantity but the quality that matters. Having one real person that follows what you’re doing is worth more than having a million people play your game without knowing who created it. You get bonus points if that person is someone you regularly meet in real life. I think some of the greatest works of art are produced by one person trying to impress one and only one other person. The sheer passion that you will put into your work itself will automatically make your work worthy of thousands… millions people liking it. At the end, having at least one person laugh (or cry) when playing your game is really what makes it worth it. A lot of you have kids, so use them! Use your partner. She or he knows how to be honest without hurting your feeling. Use family, show the game to grandma just to show her how weird her grand son has become. Use your friends, that’s what friends are for. Believe me, it was a pleasant feeling when I realized that despite the time, my friends from preschool still remember a game I created twenty years ago.

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 ActionScript Settings next to [Script: Actionscript 3.0] at the top. > Click on Add New Path then click on Browse to SWC file

 

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 ]