We've updated our SDKs, and this code is now deprecated.
Good news is we've written a comprehensive guide to building a multiplayer game. Check it out!
We've been talking about matchmaking algorithms. In this post, we'll show you how to build skill based matchmaking systems (matching opponents based on skill level) with our matchmaking algorithm.
We've now covered both building a multiplayer game lobby with a chatroom and the different ways we can use matchmaking to connect two different users. Here's what we've covered so far:
- Part One: Series Overview and Building a Multiplayer Game Lobby
- Part Two: Adding Users and Usernames
- Part Three: Getting a List of Online Users
- Part Four: Random Matchmaking of Users
- Part Five: Skill-based Matchmaking of Users
- Part Six: Matchmaking Algorithm: Enabling Users to Challenge Other Players
- Part Seven: Create Chatrooms and Multiple Channels On Demand Tutorial
- Part Eight: Preparing for Private Chatrooms and Refactoring via Private Channels
- Part Nine: Creating Private Chat Requests with Popup Alerts
- Part Ten: JavaScript Private Chat API with Access Control
This blog post is Part Five of PubNub Developer Evangelist Ian Jennings‘s series on creating a multiplayer game with JavaScript.
Finding a User with a Similar Skills
Matchmaking two random users is effective, but most modern games have skill based matchmaking systems that incorporate past experience, meaning that users are matched by their skill. Every user should have a rank or level that represents their skill. Users with a similar skill level play against eachother, so a high level user isn't matched up against a n00b.
Step 1: Setting State
You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal. Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization, for example:
Remember when we added the custom uuid field to pubnub.init()? We can attach extra “state” information in a similar way when a user subscribes to a channel.
Note: The state API is used to get or set key/value pairs specific to a subscriber uuid. State information is supplied as a JSON object of key/value pairs.
All we need to do is specify the state property in our pubnub.subscribe() call. Unlink the uuid field and state can be an object.
For example:
Step 2: Retrieving User State
Even better, we can access user state directly from the same pubnub.here_now() call we used in the last post with PubNub Presence. All we need to do is set state: true in thepubnub.here_now() request.
The variable data in the code above would look like:
Step 3: Adding User Skill
In this part of our matchmaking algorithm, let's begin by adding a skill property to our users state when they join. We're going to continue working on the code from the previous posts.
We'll start by using Math.random() to generate a random skill (1 – 3) for the current client.
We'll also display the skill level next to our own username in a Bootstrap .badge.
We set my_skill as a property of our stateobject on pubnub.subscribe as was mentioned earlier.
Now when the client subscribes, it will have a random skill level attached to it's state object. When we call pubnub.here_now() we ask for the state to be populated as well.
The callback will return a list of users and all of their state objects including their skilllevels. We can use this information to find a more accurate match.
Similar to our last post, we filter ourselves out of the list of users.
This time instead of removing items from the returned array of users, we build a new array. We loop through all the online users. If their skill level is the same as my_skill we add them to the array of potential matches.
Once we have a list of similarly skilled users, we find a random user from the array to match the other user against.
Step 4: Displaying Player Skill
We can show the skill level of each user in the list of online users. The same state object we defined earlier is returned as the data property of the user object when the presenceevent is fired from pubnub.subscribe.
We use Bootstrap's list-group badge feature to easily add the skill level next to each username in a stylish way.
Skill Based Matchmaking Algorithm Demo
Check out the full example below, or check out the skill base matchmaking algorithm demo CodePen here:
See the Pen Memewarz – Matchmaking #2 by Ian Jennings (@ianjennings) on CodePen.0
In our next post, we'll show you how to enable users to challenge each other. Stay tuned!
