Comment ajouter un tableau d'affichage et un tableau de classement à votre jeu Unity

Les tableaux d'affichage et les tableaux de classement sont des éléments clés de la promotion de l'engagement des joueurs. Les tableaux d'affichage fournissent des informations vitales lorsque les joueurs sont engagés dans un match intense et sont nécessaires pour déterminer les meilleures chances de victoire, tandis que les tableaux de classement sont utilisés pour encourager la compétition entre les joueurs afin d'afficher les meilleurs scores à l'issue des matchs. Les deux favorisent la rejouabilité et sont un moyen facile de fidéliser les joueurs.

Bien que les tableaux d'affichage et de classement soient essentiels dans le développement d'un jeu pour promouvoir une compétition saine et fournir un retour d'information vital au cours d'un jeu, l'intégration de ces fonctionnalités dans votre projet Unity est plus facile à dire qu'à faire. En partant de zéro, il faut beaucoup de ressources pour les construire, les maintenir et les adapter à l'augmentation du nombre de joueurs, car vous devrez communiquer les mises à jour du tableau d'affichage et stocker les scores mis à jour du tableau de classement lorsqu'elles se produisent. Heureusement, PubNub a rendu plus facile que jamais l'injection de fonctionnalités en temps réel dans les jeux Unity grâce à notre plateforme API en temps réel et à faible latence. Nous nous occupons de la couche d'infrastructure de vos applications afin que vous puissiez vous concentrer sur votre application. Que vous développiez pour Windows, Mac, iOS, Android, des systèmes de réalité virtuelle tels qu'Oculus et Meta Quest, ou que vous soyez multiplateforme, notre SDK Unity vous couvre.

Si vous souhaitez voir un exemple de mise en œuvre d'un tableau d'affichage et d'un tableau de classement dans un jeu Unity, afin de l'utiliser comme référence pour suivre ce guide, n'hésitez pas à consulter notre jeu de démonstration Unity.

Continuez à lire pour apprendre pas à pas comment ajouter un scoreboard et un leaderboard à votre jeu Unity qui se met à jour en temps réel, en commençant par comprendre comment configurer le PubNub GameObject, en apprenant à connaître les PubNub Functions, et comment analyser les messages PubNub pour répondre aux besoins de votre jeu.

Démarrer avec PubNub

Avant de commencer à comprendre comment mettre en place un scoreboard et un leaderboard pour votre jeu Unity, vous devez comprendre PubNub et comment configurer votre application pour profiter des fonctionnalités de la plateforme.

Vue d'ensemble

PubNub est basé sur le modèle Pub/Sub (Publier/S'abonner). Un utilisateur publie un message, qui est essentiellement une charge utile contenant toutes les informations pertinentes, sur le réseau PubNub. Les utilisateurs qui souhaitent recevoir ou écouter le message et d'autres événements générés s'abonneront au réseau PubNub et analyseront le message. Les auditeurs d'événements sont utilisés pour capter les messages et les événements générés dans le réseau PubNub et se déclenchent en fonction d'une action effectuée.

Pour que le message parvienne aux bons destinataires, des canaux sont utilisés comme mécanisme de transmission des données d'un appareil à l'autre. Les canaux sont nécessaires chaque fois qu'un appareil souhaite publier et s'abonner au réseau PubNub. Alors qu'un utilisateur ne peut publier qu'un seul message à la fois, il peut s'abonner à plusieurs canaux différents à la fois.

Installer et configurer le SDK PubNub Unity

Pour commencer, vous devrez installer toutes les dépendances PubNub et configurer le PubNub Unity SDK pour connecter votre application au réseau PubNub. Ce guide suppose que vous avez installé le moteur de jeu Unity, les actifs Unity et des éditeurs de code tels que Visual Studio. Veuillez vous référer à la documentation du SDK Un ity pour plus de détails, mais à titre d'aperçu, vous devrez :

Ajouter le paquet Unity via le gestionnaire de paquets.
Créer un compte PubNub gratuit et obtenir vos clés PubNub. Vous devrez activer les fonctionnalités de votre jeu de clés dont votre application a besoin. Pour ce guide, vous devrez activer Stream Controller avec les paramètres par défaut. L'autre fonctionnalité importante, Functions, sera activée automatiquement une fois que vous aurez initialisé la fonction, ce qui sera discuté plus loin dans ce guide.
Créez un nouveau projet Unity ou ouvrez votre jeu existant et fournissez à Unity les clés de publication et de souscription que vous avez obtenues à l'étape précédente pour configurer l'objet de jeu PubNub dans l'éditeur Unity. Vous devez également fournir un UserId, car chaque objet PubNub a besoin d'un identifiant unique pour établir une connexion avec PubNub. Une fois cela fait, initialisez l'objet PubNub :

using PubnubApi;
using PubnubApi.Unity;
…
PubNub pubnub = new Pubnub(pnConfiguration);

Ajoutez un écouteur d'événements pour que votre jeu réagisse aux messages, où votre back-end recevra essentiellement des notifications lorsque vous recevrez de nouveaux messages. Il existe différents écouteurs d'événements permettant d'implémenter une logique personnalisée pour répondre à chaque type de message ou d'événement, mais pour ce guide, vous aurez simplement besoin de l'écouteur d'événements Message :

var listener = new SubscribeCallbackListener();
pubnub.AddListener(listener);
listener.onMessage += OnPnMessage;
…
private void OnPnMessage(Pubnub pn, PNMessageResult<object> result) {
  Debug.Log($"Message received: {result.Message}");
  //Handle the message based on channel name, User ID, etc.
}

Informations vitales pendant les matchs : Tableaux d'affichage

Les tableaux d'affichage ou les systèmes de notation sont utilisés dans les jeux pour fournir un retour d'information aux joueurs pendant la partie. Les tableaux d'affichage sont essentiels pour fournir des informations précieuses, attrayantes et gratifiantes qui favorisent une expérience agréable et la rejouabilité afin d'améliorer les scores. Consultez notre guide sur les systèmes de score pour découvrir les différents types de tableaux d'affichage que vous pouvez intégrer à votre projet Unity.

La mise à jour du tableau d'affichage pendant un match est essentiellement la même chose que l'envoi de messages de chat, mais à un taux beaucoup plus élevé : vous construisez une charge utile composée des informations nécessaires et vous publiez ce message pour que tous les abonnés le reçoivent, l'analysent et mettent à jour leur tableau d'affichage chaque fois qu'une nouvelle information se produit. Si vous utilisez PubNub pour alimenter d'autres fonctionnalités multijoueurs telles que la synchronisation multijoueurs, il est recommandé de regrouper ces informations, car le nombre de messages que vous devez envoyer sera énorme et peut aider à réduire le nombre de transactions que vous devez effectuer. Cependant, ce guide se concentrera simplement sur les fonctionnalités de PubNub nécessaires à l'envoi et à la réception de messages.

Pour commencer à mettre en place votre tableau d'affichage, configurez un modèle de canal afin que seuls les participants au match reçoivent les mises à jour. En fonction de votre architecture pour la synchronisation multijoueur, vous devriez avoir une sorte d'ID de salle ou d'ID de match qui identifie de manière unique un match en cours avec des joueurs. Utilisez cet identifiant lors de la construction de votre canal :

public string scoreboardUpdates = $“scoreboard.” + {RoomID};

Le canal utilise l'interpolation de chaînes pour combiner le canal du tableau d'affichage et l'identifiant du match en cours. Abonnez-vous à ce canal pour pouvoir écouter les mises à jour du canal :

pubnub.Subscribe<string>()
  .Channels(new string[] {
    // subscribe to channels
    scoreboardUpdates
   })
  .Execute();

Une fois que vous avez des mises à jour à envoyer, par exemple lorsque vous obtenez un kill ou que votre score de dégâts augmente, publiez la mise à jour en construisant un message (au cas où vous souhaiteriez envoyer plus d'informations que quelques mises à jour du tableau d'affichage) :

Dictionary<string, object> leaderboardUpdates= new Dictionary<string, object>();
leaderboardUpdates.Add("userId", user-a-uuid);
leaderboardUpdates.Add("kills", 0);
leaderboardUpdates.Add("deaths", 0);
leaderboardUpdates.Add("assists", 0);
leaderboardUpdates.Add("total_damage", 0);
…
private async void PublishMessage(string text, string channel)
{
  await PNManager.pubnubInstance.pubnub.Publish()
    .Channel(scoreboardUpdates)
    .Message(text)
    .ExecuteAsync();
}

Les autres joueurs recevront les nouvelles mises à jour par l'intermédiaire de l'écouteur d'événement de message que nous avons construit plus tôt. Vous analyserez alors le message et mettrez à jour leur interface utilisateur en conséquence. Cela se poursuivra jusqu'à la fin du jeu, auquel cas vous ferez un dernier appel pour mettre à jour les classements mondiaux.

Classement des meilleurs scores : Tableaux de classement

Les classements sont essentiels pour les jeux afin de renforcer la concurrence entre les joueurs. Ils s'affichent à la fin des matchs ou sur l'écran d'accueil, dans un menu distinct. Les joueurs veulent pouvoir comparer leurs performances à celles des autres joueurs, des guildes et des clans, et voir comment ils peuvent améliorer leur style de jeu pour obtenir de meilleurs scores. Si vous souhaitez en savoir plus sur les différents types de classements que vous pouvez mettre en place dans votre jeu Unity, n'hésitez pas à consulter notre guide sur les classements.

Avant de commencer à mettre en place un classement en ligne, nous devons parler de la façon dont nous pouvons non seulement mettre à jour le classement une fois les matchs terminés, mais aussi stocker les informations du classement sans avoir besoin de faire tourner votre serveur.

Lesfonctions permettent aux développeurs de créer et d'exécuter une logique métier à la périphérie pour acheminer, filtrer, transformer, augmenter et agréger des messages en temps réel lorsqu'ils transitent par le réseau PubNub. Vous pouvez héberger cette logique commerciale sans avoir besoin de faire tourner votre serveur, où vous pouvez intégrer l'une de nos intégrations tierces de confiance (qui sont déjà configurées pour fonctionner avec Functions et incluent des instructions pour commencer) ou écrire votre code pour exécuter une logique personnalisée avant ou après l'avoir renvoyée aux joueurs. Vous pouvez même stocker des informations pertinentes à l'aide du module KV store, qui est un magasin de valeurs clés persistant qui agit comme une base de données pour vos fonctions. Pour en savoir plus sur les fonctions, consultez notre documentation.

Pour les classements, vous souhaitez mettre à jour les scores après que les joueurs ont terminé un match, puis informer les joueurs de la mise à jour du classement.

Pour pouvoir utiliser les fonctions, vous devez procéder à quelques réglages supplémentaires dans le portail d'administration :

Accédez au portail d'administration.
Cliquez sur l'onglet Fonctions sur le côté gauche du portail.
Sélectionnez l'application et le jeu de clés que vous avez créés dans la section précédente.
Cliquez sur Créer un nouveau module.
Donnez un nom au module.
Saisissez une description de la fonction du module.
Sélectionnez l'ensemble de clés que vous avez créé précédemment pour ajouter le module. Cliquez sur Créer.
Donnez un nom à la fonction.
Sélectionnez le type d'événement After Publish ou Fire.
Saisissez le nom du canal que vous souhaitez que la fonction mette à jour après la publication d'un message (ce nom peut également être modifié ultérieurement). Vous utiliserez un nom de canal tel que score.* composé du caractère Wildcard Subscribe * la fonction. Pour en savoir plus sur le fonctionnement du Wildcard Subscribe pour les messages de chat, consultez le guide suivant.
Cliquez sur le bouton Créer pour chaque fonction.

Vous accéderez à la page de présentation de la fonction, où vous pourrez modifier les paramètres, tester et même surveiller la fonction lorsqu'elle interagit avec votre jeu pour chaque fonction. Au milieu de l'écran, il devrait y avoir un code JavaScript généré automatiquement. Il s'agit d'un exemple de fonction "Hello World" qui illustre le fonctionnement d'une fonction et vous permet d'héberger votre code ou d'exécuter la logique commerciale de l'intégration d'une tierce partie.

Pour les classements, vous écrirez une logique personnalisée et utiliserez le module KV Store pour enregistrer les informations relatives aux classements. Dans la section du code, vous devrez réfléchir à ce que contiendront les informations de votre classement. Allez-vous avoir plusieurs classements détaillant des informations différentes, un grand classement contenant plusieurs statistiques vous permettant de créer différents classements dans votre jeu ?

Une fois que vous avez déterminé les informations que vous souhaitez stocker, vous devez configurer la charge utile du message qui sera publié dans votre jeu sur le réseau PubNub et qui sera ensuite récupéré par la fonction.

Par exemple, dans notre jeu Unity Showcase, nous envoyons le nom de chaque joueur dans le match et leur score, qui est une combinaison de leurs kills/morts/assistances lorsqu'ils terminent un match. Le message est formaté en JSON et publié sur le canal score.leaderboard que la fonction écoute (sur la base du Wildcard Subscribe). Examinez plus particulièrement le fichier UIManager.cs:

…
 // Get the kills and deaths value of all players and store them in an INT array:
 int[] kills = new int[playersSorted.Length];
 int[] deaths = new int[playersSorted.Length];
 int[] otherScore = new int[playersSorted.Length];
 for (int i = 0; i < playersSorted.Length; i++)
 {
   kills[i] = playersSorted[i].Kills;
   deaths[i] = playersSorted[i].Deaths;
   otherScore[i] = playersSorted[i].OtherScore;
   if (notPublished)
   {
     if (playersSorted[i].PlayerName == Connector.PNNickName)
     {
       MyClass mc = new MyClass();
       mc.username = Connector.PNNickName;
       mc.score = playersSorted[i].Kills.ToString();
       string json = JsonUtility.ToJson(mc);
       PublishMessage(json, _leaderboardChannelPub);
      }
      notPublished = false;
    }
  }
…

private async void PublishMessage(string text, string channel)
{
  await PNManager.pubnubInstance.pubnub.Publish()
    .Channel(channel)
    .Message(text)
    .ExecuteAsync();
}

La fonction qui écoute ce canal sera alors déclenchée et vous pourrez alors trier, mettre à jour les nouveaux scores dans le module KV store et informer les joueurs des nouvelles mises à jour du classement. Pour le jeu Unity Showcase, c'est exactement ce que fait la logique suivante dans la fonction :

//This function takes a string from a unity game that contains either a username AND and a score, OR a refresh message.
//The function then looks at the message and creates a user/score json and sends it back. Putting the highest score in 0 and the lowest score in [9]
//If the score submitted is lower than [9] then trhe messages succeeds without intervention
//sending a refresh will trigger this function without any intervention.

export default (request) => {
  const db = require("kvstore");
  const pubnub = require("pubnub");
 //uncomment if you want to see the raw message
 //console.log(request.message);
 //The format of the message sent is "{\"username\":\"Bob\",\"score\":\"10\",\"refresh\":\"\"}"  and as such we need to parse it 
  //You wont be able to use the test payload until you remove the parse
  // var json = request.message; //uncomment this and comment the line below to be able to use the test payload (as well as debug console)
  var json = JSON.parse(request.message);
  let { username, score } = json;

  //create some arrays to ultimately be able to position the leaderboard correctly - there's more elegant ways to do this, this function is designed to explain
  var scorearrayprevious = [];
  var scorearraynew = [];
  var usernamearraynew = [];
  var usernamearrayprevious = [];

  //db.removeItem("data"); //uncomment this code if you need to wipe the database -- for future you could always send a message to trigger this, but that is out of the scope for this workshop
  db.get("data").then((value) => {
  if(value){
    console.log("value", value); //uncomment this if you want to see the value 
    let i = 0;
    //we use some and score > item to parse through where the submitted score will sit, if the score is greater than the item we're on, then it get's slotted in to the array at that spot
    value.score.some(item => {
        if(parseFloat(score) > parseFloat(item) || (parseFloat(item) == 0 && score.length > 0)){ //Parse into float since variables are currently strings
          //Score
          scorearraynew = value.score.slice(0, i);
          scorearrayprevious = value.score.slice(i, value.score.length);
          console.log("values", scorearraynew, scorearrayprevious);
          scorearraynew.push(score);
          var newScoreList = scorearraynew.concat(scorearrayprevious);
          newScoreList.splice(-1,1);

          //Username
          usernamearrayprevious = value.username.slice(0, i);
          usernamearraynew = value.username.slice(i, value.score.length);
          console.log("values", usernamearrayprevious, usernamearraynew);
          usernamearrayprevious.push(username);
          var newUsername = usernamearrayprevious.concat(usernamearraynew);
          newUsername.splice(-1,1);

          value.score = newScoreList;
          value.username = newUsername;
          //store the 
          db.set("data", value);

          return true; //break out of the loop using Array.prototype.some by returning true
       }
        i++;
    });
    //publish the message to a *new* or *different* channel 
    pubnub.publish({
        "channel": "leaderboard_scores",
        "message": value
    }).then((publishResponse) => {
        console.log("publish response", publishResponse);
    });
} else {
  //Initial Data, used only on the first call
    db.set("data", {
        "username":["---","---","---","---","---","---","---","---","---","---"], 
        "score":["0","0","0","0","0","0","0","0","0","0"]});
}
    }); 
    return request.ok();
};

La fonction publie ensuite les mises à jour du classement à tous les joueurs via le canal leaderboard_scores. Dans votre application, vous devez vous abonner à ce canal via l'appel Subscribe:

pubnub.Subscribe<string>()
  .Channels(new string[] {
    // subscribe to channels
    "leaderboard_scores”
  })
  .Execute();

Puisque vous êtes abonné au canal leaderboard_scores, vous pouvez recevoir les scores mis à jour du classement de la part de la fonction une fois qu'elle a terminé, via l'écouteur d'événement de message. Vous pouvez alors analyser le message et mettre à jour l'interface utilisateur du classement en conséquence. Par exemple, pour mettre à jour l'interface utilisateur du jeu Unity Showcase :

private void OnPnMessage(PNMessageResult<object> result)
{
  // Enable the button once we have established connection to PubNub 
  if (result.Channel.Equals(PubNubUtilities.chanLeaderboardSub))
  {
    Dictionary<string, object> msg = JsonConvert.DeserializeObject<Dictionary<string, object>>(result.Message.ToString());// as Dictionary<string, object>;
    var usernames = (msg["username"] as Newtonsoft.Json.Linq.JArray).ToObject<string[]>();
    var scores = (msg["score"] as Newtonsoft.Json.Linq.JArray).ToObject<string[]>();

    if (usernames[0] != null)
    {
        namePos1.text = usernames[0];
        kdPos1.text = scores[0];
    }

    if (usernames[1] != null)
    {
        namePos2.text = usernames[1];
        kdPos2.text = scores[1];
    }

    if (usernames[2] != null)
    {
        namePos3.text = usernames[2];
        kdPos3.text = scores[2];
    }

    if (usernames[3] != null)
    {
        namePos4.text = usernames[3];
        kdPos4.text = scores[3];
    }

    if (usernames[4] != null)
    {
        namePos5.text = usernames[4];
        kdPos5.text = scores[4];
    }
  }
}

Vous pouvez consulter le fichier Leaderboard.cs pour plus de détails sur l'implémentation du classement pour le jeu Unity Showcase.

Prochaines étapes

Dans ce guide pratique, vous avez appris à ajouter un leaderboard et un scoreboard à votre jeu Unity. Pour ajouter un tableau d'affichage, vous pouvez utiliser la plateforme à faible latence de PubNub pour envoyer et recevoir des messages contenant des informations pertinentes au cours d'un match, telles que les kills, les morts et les assistances, afin d'informer les joueurs en temps réel. Pour les classements, les fonctions peuvent héberger du code pour mettre à jour les scores des joueurs et mettre à jour les classements pour que les joueurs puissent les consulter une fois leur match terminé.

Les développeurs de jeux peuvent en apprendre davantage grâce aux ressources suivantes :

Consultez notre documentation.
Apprenez à ajouter un chat en temps réel dans Unity.
Comprendre comment notre jeu de démonstration Unity met en œuvre un tableau d'affichage et un classement en temps réel.
Plongez dans le code source du SDK Unity.

N'hésitez pas à contacter l'équipe des relations avec les développeurs à l'adresse devrel@pubnub.com pour toute question ou préoccupation.

Comment PubNub peut-il vous aider ?

Cet article a été publié à l'origine sur PubNub.com

Notre plateforme aide les développeurs à construire, fournir et gérer l'interactivité en temps réel pour les applications web, les applications mobiles et les appareils IoT.

La base de notre plateforme est le réseau de messagerie périphérique en temps réel le plus grand et le plus évolutif de l'industrie. Avec plus de 15 points de présence dans le monde, 800 millions d'utilisateurs actifs mensuels et une fiabilité de 99,999 %, vous n'aurez jamais à vous soucier des pannes, des limites de concurrence ou des problèmes de latence causés par les pics de trafic.