Article original : How to Implement a GameKit Leaderboard in SwiftUI

Par Saamer Mansoor

Dans cet article, nous allons parler de pourquoi et comment implémenter le Tableau des scores de GameCenter dans votre application.

Pourquoi GameCenter connaît un énorme regain d'intérêt

Vous pouvez créer des jeux iPhone sans tableau des scores, mais les tableaux des scores peuvent aider à rendre le jeu plus compétitif, comme si les gens concouraient les uns contre les autres dans le monde entier.

Au lieu de créer et de gérer votre propre backend, le Tableau des scores GameCenter vous permet de scalabiliser infiniment avec le trafic, de sauter une page de connexion entière pour l'autorisation, d'obtenir l'image, le nom et les amis jouant au même jeu – tout cela sans que vos utilisateurs aient à entrer quoi que ce soit.

Surtout avec iOS 16, Apple investit davantage pour l'améliorer, et stimule davantage l'utilisation des applications, comme par le biais de notifications push lorsque votre ami bat votre score dans le jeu.

Dans mon parcours d'apprentissage de SwiftUI, j'ai créé et publié des applications, car selon moi c'est la meilleure façon d'apprendre.

Il n'y avait pas beaucoup de documentation mise à jour sur la façon de faire tout cela, surtout aucune avec SwiftUI ni avec l'avènement de async et await en Swift. J'ai donc consolidé et simplifié cela pour que tout le monde puisse créer des applications incroyables. N'hésitez pas à m'inviter à tester vos applications aussi !

Prérequis :

Comment implémenter votre tableau des scores iOS en 6 étapes

La plupart de la logique de code pour le tableau des scores se trouve dans ce fichier si vous voulez passer directement à cette partie. Voici les étapes à suivre :

1. Comment créer le tableau des scores dans App Store Connect

image Capture d'écran du portail Apple iTunes Connect

Une fois que vous avez créé l'application dans le portail App Store Connect avec succès, allez dans l'onglet Services pour l'application -> et assurez-vous d'être dans la page GameCenter.

Ensuite, ajoutez un nouveau tableau des scores en utilisant le signe "+", qui peut être soit "Classique" (les scores ne sont jamais réinitialisés) soit "Récurrent" (les scores sont réinitialisés selon vos paramètres de fréquence).

La plupart des jeux préfèrent un tableau des scores récurrent afin que le tableau des scores ne soit pas encombré par d'anciens scores élevés impossibles à atteindre.

L'ID du tableau des scores que vous entrez là est celui que vous devez utiliser dans tous les endroits du code qui le demandent.

Image Informations requises pour créer un nouveau tableau des scores

2. Comment configurer l'authentification GameCenter

Tout d'abord, vous devrez authentifier les utilisateurs auprès de GameCenter pour que l'une de ces fonctionnalités puisse fonctionner.

Nous utiliserons donc ce code pour cela, qui vérifie essentiellement que vous (GKLocalPlayer.local) êtes authentifié, ou imprime une erreur s'il y en a une :

func authenticateUser() {
    GKLocalPlayer.local.authenticateHandler = { vc, error in
        guard error == nil else {
            print(error?.localizedDescription ?? "")
            return
        }
    }
}

Si l'utilisateur est authentifié, vous verrez une petite fenêtre contextuelle dans l'interface utilisateur. Sinon, l'utilisateur sera redirigé vers une page pour se connecter à son compte GameCenter.

image Un signe qui s'affiche lorsqu'un utilisateur est connecté

3. Comment afficher les éléments du tableau des scores dans l'interface utilisateur

Pour obtenir les données du contrôleur de vue du tableau des scores de GameCenter (GKLeaderboard), vous devez utiliser loadLeaderboards.

Vous pouvez changer la fonction loadEntries de .global à .friends pour ne récupérer que vos amis.

Vous pouvez également récupérer l'image de chaque joueur en itérant sur chaque joueur et en effectuant un loadPhoto.

En utilisant NSRang(1...5), vous pouvez choisir combien de joueurs afficher. Cela récupère les utilisateurs avec les 5 meilleurs scores du tableau des scores et ne retourne rien s'il n'y a pas d'utilisateurs, comme dans le cas où le cycle se rafraîchit pour un tableau des scores récurrent.

Voici à quoi pourrait ressembler la récupération de données depuis un tableau des scores si vous utilisez async-await :

func loadLeaderboard() async {
    playersList.removeAll()
    Task{
        var playersListTemp : [Player] = []
        let leaderboards = try await GKLeaderboard.loadLeaderboards(IDs: [leaderboardIdentifier])
        if let leaderboard = leaderboards.filter ({ $0.baseLeaderboardID == self.leaderboardIdentifier }).first {
            let allPlayers = try await leaderboard.loadEntries(for: .global, timeScope: .allTime, range: NSRange(1...5))
            if allPlayers.1.count > 0 {
                try await allPlayers.1.asyncForEach { leaderboardEntry in
                    var image = try await leaderboardEntry.player.loadPhoto(for: .small)
                    playersListTemp.append(Player(name: leaderboardEntry.player.displayName, score:leaderboardEntry.formattedScore, image: image))
                                print(playersListTemp)
                    playersListTemp.sort{
                        $0.score < $1.score
                    }
                }
            }
        }
        playersList = playersListTemp            
    }
}

image Vous pouvez obtenir les données du tableau des scores dans votre application

4. Comment appeler la fonctionnalité dans SwiftUI lorsque la vue/page apparaît

Vous pouvez tirer parti de la fonction de cycle de vie onAppear de la vue pour effectuer les appels d'authentification et de chargement, mais vous pouvez également le faire au toucher d'un bouton si vous préférez :

.onAppear(){
    if !GKLocalPlayer.local.isAuthenticated {
        authenticateUser()
    } else if playersList.count == 0 {
        Task{
            await loadLeaderboard()
        }
    }
}

5. Comment charger les scores soumis

Pour charger les scores, vous devez également les soumettre. La fonction submitScore peut vous aider à faire cela.

  • La variable flightsClimbed doit contenir le score que vous souhaitez soumettre.
  • GameKit s'assure de n'afficher que votre meilleur score pour la durée de vie du tableau des scores.
  • L'leaderboardId contient la valeur que vous entrez manuellement dans votre compte App Store Connect :
func leaderboard() async{
    Task{
        try await GKLeaderboard.submitScore(
            flightsClimbed,
            context: 0,
            player: GKLocalPlayer.local,
            leaderboardIDs: ["com.tfp.stairsteppermaster.flights"]
        )
    }
    calculateAchievements()
}

6. Comment afficher le portail du contrôleur de vue GameCenter

Lorsque vous êtes connecté à GameCenter, une petite icône gênante apparaît en haut à droite de votre écran. Lorsque vous appuyez dessus, vous êtes redirigé vers le contrôleur de vue GameCenter. Heureusement, vous pouvez la masquer si elle ne fait pas partie de votre design, en utilisant GKAccessPoint.shared.isActive = false.

Puisque l'interface utilisateur de GameCenter est un ViewController UIKit et non une simple View SwiftUI, vous devez d'abord créer ce UIViewControllerRepresentable (comme vous pouvez le voir ici), pour lancer GameCenter en utilisant un bouton différent.

Une fois que vous avez ajouté ce fichier à votre projet, vous pouvez afficher le portail GameCenter simplement en utilisant ceci : GameCenterView(format: gameCenterViewControllerState) où gameCenterViewControllerState peut vous aider à accéder à une page de détail dans GameCenter.

Image Vue du tableau des scores de GameCenter

Points à garder à l'esprit lors de l'utilisation des tableaux des scores de GameCenter :

  • Débogage du simulateur – Pour une raison quelconque, l'authentification auprès de GameCenter est extrêmement lente sur un simulateur, il peut donc être judicieux de créer une maquette de données lors de l'utilisation du simulateur.
  • Défis – Vous ne pouvez plus émettre de défis GameKit à vos amis de manière programmatique en raison de la dépréciation. Au lieu de cela, vous devez les faire manuellement dans le tableau de bord GameCenter de l'utilisateur contre les réalisations GameKit. De plus, il n'y a aucun moyen de voir les défis que vous avez envoyés.
  • Réalisations – Les tableaux des scores sont différents des réalisations GameKit, qui sont calculées et affichées différemment, mais beaucoup plus faciles. Celles-ci peuvent également être intégrées dans l'application, comme vous pouvez le voir ci-dessous :

Image Défis et réalisations GameKit

Conclusion

Vous pouvez essayer l'application gratuite et open-source Stair Master Climber iPhone Santé & Fitness que j'ai partagée ci-dessus. J'adorerais savoir ce que vous en pensez afin que nous puissions apprendre ensemble.

N'hésitez pas à me contacter sur les réseaux sociaux ou par email si vous avez des questions.