IN THIS ARTICLE
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
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.
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 the
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
my_skill as a property of our
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
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
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:
In our next post, we’ll show you how to enable users to challenge each other. Stay tuned!