• Herbert Tse

Unity Tutorial - Friendship request system design

Updated: Jul 18

Multiplayer games without a friendship request system are just like a burger with just the buns. It is fine, but lacking something very essential to the nature of oneself.

After going through many multiplayer games, a friendship request system seems to be almost a must. The functionality allows players to build relationships with other players through interactive design. It provides some feeling of belonging to a community while playing the game when seeing others also playing at the same time. This tutorial is to teach you how to design one version of an interactive friendship system in Unity, which is one that I am using in Abyss of Dreams.

Before I start talking about my implementation of the system, I have to let you know that I am assuming you have everything ready on the data structure and have all the data ready to be used on the client. You won't be able to work on the friendship request system if your data is not ready. At least some experience working with game development with Unity is expected for this tutorial.

I will go into more detail throughout this Unity tutorial, but here are a few steps I used to design the friendship request system:

  1. Double-check the data structure.

  2. Make sure player data and friendship data can be linked between server/database and clients.

  3. Design the UI for a friend list, friend request, and player search.

Assuming you are storing the players' data in some sort of database/file and your players' client already has information about the player, the data should currently be stored as an object. If it is not done yet, go ahead and define a class for hosting all the players' data. Each player object requires a new integer variable to count the current amount of friends they have so we don't have to go through the friend list for count every time, and another new integer variable to count the maximum amount of friends they can have. Noted that the maximum amount of friends variable is only needed if your game design is to allow each player to have a different maximum depending on things like player level. After the two new integers, now we need two new lists on the player object as well. One for the friend list, and another one for the friend requests list. Both of the lists are just going to store a list of integers for players' id as an individual value instead of the entire player object.

Once we have added all these variables into the player data object, it is now time to have the server and clients communicate with each other whenever any event happens. There are a few things an individual client needs to get from the server for the player when they first join the game and connect with the server:

  • Their friend count and friend maximum limit amount.

  • Their friend list as an integer list.

  • Their friend request list, also as an integer list.

After getting this data at the time of connection with the server, everything will become event-based. Whenever a player sends, accepts, or declines a request, the client needs to send a signal to the server and let the server handle the notification for the other player so the data can be updated correctly.

High-level Flow for friendship request system design

Assuming we will have a large number of registered players, we do not want to have the server send the entire list to the client at the beginning of the connection. When the player wants to search for a specific player, or for a random friend, it would be the best to send a signal to the server to fetch for what the player is looking for and show the result on the UI. It is a lot more efficient this way, especially since the server can periodically fetch for the list from the database and cache it on the side for anyone to request without the need to pull from the database every time anyone tries to make a request.


Before you keep reading... if you like what you read, remember to subscribe to not miss any new update!


Canvas Setup

Lastly, we need to create a UI panel to host all this information and click

events. We first want to create a friend panel and add two empty game objects inside it, one for the three action buttons (friends, requests, and search) and the other one for the panels associated with them. The buttons are only for showing which panel to set to active and deactivate the other ones. As for the panels, each needs to add a Scroll View into it and make sure to scale the Scroll View object to max size, to fill up the entire parent panel. Once created, we can go ahead and set the few attributes on the Scroll Rect to the following:

  • Horizontal: false

  • Get rid of Horizontal Scrollbar

  • Get rid of Vertical Scrollbar (you can keep this if you want, but I personally find it annoying looking, as we know the list is already being scrolled without the bar)

Make sure the Rect Transform is set to stretch out for the whole parent panel

Now go ahead and add a Vertical Layout Group to the Content object, and set the following:

  • Control Child Size: true for width, false for height

  • Child Force Expand: true for width, false for height

Put a vertical Layout Group, and set the properties

Now you can create a prefab that holds friends' player information that will be automatically populated into the content and repeat the same step for all the panels. I still have yet to complete all my designs for the individual prefab at the moment, but the set up would be exactly how I am laying out below.

  • Friends panel: each prefab will be a clickable object that shows player information like player avatar, name, level, and last time saw. Players can click on the objects to get another page for more info on the specific player data, maybe game characters, and whatnot.

  • Requests panel: each prefab will be a clickable object that shows only player avatar, name, and level. Similar to the Friends panel, it can be clicked to get more info on the player. Besides the info, there will be an accept button and a reject button.

  • Search panel: each prefab will be a clickable object that shows only player avatar, name, and level. Similar to the Friends panel, it can be clicked to get more info on the player. Besides the info, there will be a request friendship button.

Sample Friendship panel
Sample Friendship request panel
Sample Friendship search panel

On the search panel, we also need to add a search bar to have players insert the desired result and a result button to fetch data from the server. We can set it up so that if the result button is clicked with the search bar being empty, it would just return a list of a few random players. Once all of these are set up, you just need to have a script to populate the prefabs onto the content object inside each Scroll View.


I hope you enjoyed this tutorial! Please feel free to drop me a comment below if you ever have any questions related to my steps, and I will try my best to help you or clarify what I mean. This is my first time trying to write a Unity tutorial, so it likely needs some improvements. I will correct and update anything as I find them, so let me know if anything is unclear. I will be creating more tutorials if people enjoy them, so let me know if you want more!

If you like what you read, please share this post, subscribe to our mailing list, follow our social media pages, and join our discord channel! Thank you, and until next time!

Have Fun. Be Happy. Be Inspirational!

Herbster Games's Twitter

Herbster Games's Facebook Page

Herbster Games's Instagram

HerbsterGames.com


Post featured Photo by Sincerely Media on Unsplash


Follow social media for more news about the current development!

  • Facebook
  • Twitter
  • Instagram

© 2020 by Herbster Games LLC.