Unité Tutoriel - Leaderboards - Partie 5 Création Leaderboard Préfabriqués - Scores, affichage GameSparks
Tutoriel - Leaderboards pour Unity 3D
Cela fait partie 5 d'un tutoriel en 6 parties, il est recommandé que vous regardez la section précédente avant de continuer.
Ce tutoriel couvrira la création de notre maison préfabriquée d'entrée leaderboard, notre jeu dans le leaderboard affiché au joueur et à écrire du code pour afficher les scores et pour récupérer Leaderboards de Gamesparks. Vous trouverez peut-être utile de TELECHARGEMENT notre jeu échantillon Tappy Bird et voir ce que nous avons fait pour mettre en œuvre nos classements en jeu. Pour suivre les étapes et à imiter ce que nous avons fait il y a aussi une version du jeu pour le téléchargement qui n'a pas toutes les fonctionnalités GameSparks mises en œuvre.
Création de l'en-tête Leaderboard
La première chose que vous devez faire est de mettre en place un nouveau panneau Ngui pour contenir le Leaderboard et un en-tête pour montrer le joueur à quelle page ils regardent.
1) Création du parent Leaderboard
En tant qu'enfant de l'interface utilisateur racine créer un nouveau panneau par Ngui> Créer> Panneau. Ce parent contiendra tous les éléments de notre Leaderboard.
2) Ensemble Leaderboard en-tête
Enfant du nouveau parent Leaderboard vous venez de créer, ajouter un nouveau sprite 2D pour contenir l'en-tête Leaderboard (Ngui> Créer> 2D Sprite Unity). bouton 1 Sélectionnez comme l'image-objet et le redimensionner à environ 320 x 30. Set Matériel à « Sprites - Default ». Faites-le glisser vers le haut de votre scène comme il va être le titre du leaderboard qui affiche sur les résultats. Nommez le nouvel objet « Leaderboard En-tête ».
3) Set Leaderboard en-tête Étiquette
Dans la hiérarchie, en tant qu'enfant de l'en-tête Leaderboard ajouter une nouvelle étiquette (Ngui> Créer> Étiquette). Ce sera est le texte affiché dans le panneau d'en-tête. Définissez la nouvelle étiquette dans l'inspecteur comme suit:
- Dans le « texte » type de champ « Leaderboard Haute Score. »
- Décochez la case « dégradé ».
- Modifier le menu « Effet » à « Outline »
Ça devrait ressembler a quelque chose comme ca:
Comme un enfant du parent d'ensemble Leaderboard Créer une grille Ngui (Ngui> Créer> Grille) Ceci organisera automatiquement toute entrée ajoutée au Leaderboard. Réglez l'arrangement de grille à « verticale » et la hauteur de cel à « 40 », à cause de notre tête. Cela donne à chaque entrée de l'espace comme il est arrangé automatique.
- Arrangement: vertical
- Régler la hauteur de la taille des cellules: 40
- Déplacer la grille de façon à ce qu'il est positionné juste en dessous de la tête Leaderboard
Créer une Leaderboard Entrée Prefab
1) Créer une nouvelle unité 2D Sprite
Enfant de créer une grille 2D Sprite Unity (Ngui> Créer> Unity 2D Sprite). Renommer sprite « Leaderboard entrée » dans la hiérarchie. Réglez le sprite « Bouton - 2 », Matière à « Sprites - Default ». Enclenchez et redimensionnez être à peu près la même taille que l'en-tête Leaderboard: 312 x 28. Assurez-vous qu'il est correctement positionné, légèrement en dessous du Leaderboard en-tête.
2) Définir une étiquette de Rank utilisateur
Enfant d'entrée Leaderboard ajouter une étiquette (Ngui> Créer> Étiquette). Renommez le libellé de Rang de l'utilisateur. Réglez-le dans l'inspecteur comme suit
- Entrez le texte comme 1 (Toutes les entrées de texte que nous ajoutons ici ne sont que pour les tests, ces entrées de test seront remplacés par nos scripts dans l'avenir)
- Désactivez le gradient du texte
- Donner au texte un aperçu
- Position à gauche de l'entrée de sprite Leaderboard.
2) Définir une étiquette Nom d'utilisateur
Comme enfant de Leaderboard entrée ajouter une deuxième étiquette (Ngui> Créer> Étiquette). Renommez le libellé de « Nom d'utilisateur ».
- Entrez « Nom d'utilisateur » dans le champ de texte (encore une fois, cette entrée est juste un espace réservé pour nous assurer d'avoir configuré correctement le bâtiment préfabriqué)
- Désactiver le gradient sur le texte
- Donner au texte une Outine
- Position dans le centre de l'étiquette
4) un score utilisateur Étiquette
Enfant d'entrée Leaderboard ajouter une troisième étiquette. Renommer cette étiquette Note utilisateur. Dans l'inspecteur, définissez comme suit:
- Entrez 5000 dans le champ de texte
- Désactiver le gradient sur le texte
- Donner au texte un aperçu
- Position à droite du leaderboard
5) Enregistrer Leaderboard Entrée en Prefab
Appuyez sur Appliquer et faites glisser le Leaderboard Entrée parent de la hiérarchie dans votre dossier Préfabriqués pour sauver une maison préfabriquée. Nous avons maintenant un Leaderboard-tête mis en place, et une entrée Leaderboard avec des entrées pour prefab Joueur Rang, Nom d'utilisateur et le score qui peut être appelé et rempli d'informations extraites d'aperçu scène GamesSparks.The doit maintenant quelque chose comme ceci:
Ensuite, nous allons écrire des scripts pour permettre à notre Leaderboard de fonction qui rassembleront les informations de GameSparks, ajoutez au panneau d'entrée Leaderboard et mise à jour et afficher le Leaderboard chaque fois qu'il est demandé.
1) le classement d'entrée
2) Ajouter ce script à Leaderboard Entrée Ngui en tant que composant
Faites glisser le script sur l'onglet inspecteur du parent LeaderboardEntry. Les trois étiquettes de l'interface utilisateur variables que nous avons définies dans le script doivent être attribués éléments de l'interface utilisateur. Ce sont les UserName, Rang de l'utilisateur et Score de l'utilisateur que nous avons mis en place plus tôt. Faire glisser chaque étiquette dans le champ correspondant
- Faites glisser le nom d'utilisateur Étiquette pour nom d'utilisateur champ de saisie
- Faites glisser userRank Étiquette à Classez champ d'entrée
- Faites glisser l'étiquette userScore à marquer champ d'entrée
Maintenant, quand Leaderboard L'entrée est instancié il passera le nom d'utilisateur, les chaînes userRank et userScore au modèle de l'interface utilisateur, nous mettre en place et mettre à jour les valeurs sur LeaderboardEntry.
Rappelez-vous de frapper Appliquer pour mettre à jour la maison préfabriquée LeaderboardEntry.
2) Ajout d'un script Post Score
D'abord tout ce que nous voulons tirer dans notre mesure GameSparks SDK. Cela va créer des fonctions basées sur les événements que vous avez créés sur GameSparks. Pour ce faire, accédez à Gamesparks> Modifier les paramètres> Obtenir mon habitude SDK
Ajoutez le script Leaderboard à l'objet Panel Leaderboard jeu en tant que nouveau composant en faisant glisser le script sur l'inspecteur panneau Leaderboard.
Faites glisser le bâtiment préfabriqué dont il a besoin instancier dans le vide le champ d'entrée Leaderboard préfabriqué. Ceci est l'entrée Leaderboard Prefab nous avons terminé plus tôt, il devrait être dans votre dossier Préfabriqués.
Ajouter la grille de l'enfant de l'objet Leaderboard au champ Grille Leaderboard sur le panneau Leaderboard.
Et c'est la fonctionnalité leaderboard dans votre jeu tous mis en place. Ensuite, nous avons juste besoin de rendre les Leaderboards accessibles par l'utilisateur dans le menu principal du jeu.
Apporter Leaderboard en jeu
Maintenant, nous avons juste besoin de mettre en place certains éléments de l'interface utilisateur pour permettre à l'utilisateur de basculer entre le menu principal et les Leaderboards. Nous voulons également permettre à l'utilisateur d'appeler les Leaderboards eux-mêmes. Pour ce faire, nous allons mettre en place un bouton pour afficher Leaderboards et basculer entre la page et Leaderboard Menu principal, et nous allons également mettre en place un bouton de retour sur la page Leaderboard pour revenir au menu principal.
1) Ajout d'un bouton Retour sur la page Leaderboard
Ajouter un bouton pour nous ramener au menu principal de la page Leaderboard. Ajouter une nouvelle unité sprite 2D (Ngui> Créer> Unity sprite 2D) comme un enfant de Leaderboard. Configurer le sprite comme suit:
- Assigner sprites-défaut en tant que matériaux
- Attribuer bouton 3 comme l'image-objet 2D
- Renommer à Bouton Retour
- Ajouter un nouveau script Bouton (Ngui> Joindre> Bouton Script) `
- Ajouter collisionneur Ngui> Joindre> Collider
- Enclenchez le widget sprite> Taille> Magnétisme
- Placez le sprite au bas de l'écran
- Ajouter l'étiquette Ngui> Créer> Étiquette. Configurer comme il correspond à des étiquettes précédentes, nous avons fait. Entrez « Retour » dans le champ de texte.
2) Ajouter Tween Alpha composant à Leaderboard
Nous ne voulons pas que le Leaderboard soit visible au démarrage. Il superposer le menu principal. Pour rendre le Leaderboard transparent sur Démarrer, sélectionnez Leaderboard dans la hiérarchie et ajouter un Tween Alpha via (Ajouter un composant> Scripts> Ngui> Tween> Tween Alpha) Configurez le composant Alpha Tween dans Leaderboards comme ceci:
- Set « De » à 0, garder « A » comme 1
- Désactiver si le composant ne fonctionne pas sur le lancement (décocher la case à côté de « Tween Alpha (Script)
4) Définir Bouton « Retour » pour basculer entre le menu et Leaderboard
Sélectionnez le bouton Retour dans la hiérarchie et le configurer comme suit dans le panneau Cliquez dans l'inspecteur de l'objet « Bouton Retour ».
- Faites glisser Leaderboard de la hiérarchie dans le champ vide Notifier dans le panneau « sur-Click »
- Réglez cette méthode pour TweenAlpha / basculer dans le menu déroulant: Tween Alpha> Bascule
- Faites glisser le menu principal de la hiérarchie dans le champ vide Notifier dans le panneau « sur-Click »
- Réglez cette méthode pour TweenAlpha / bascule trop. Encore une fois, vua le menu déroulant: Tween Alpha> Bascule
Enfin, assurez-vous que le curseur Alpha dans le panneau de l'interface utilisateur Panel (script) dans l'objet « Leaderboard » est réglé sur 0.
Maintenant, quand nous cliquons de nouveau notre leaderboard bascule entre 1 et 0 et Menu principal entre 0 et 1, il ressemblera les scènes se dissipent entre eux.
5) Régler le bouton « Leaderboard » pour générer le Leaderboard et bascule dans le menu principal
Ici, nous allons régler le bouton leaderboard dans le menu principal à la fois appel et générer le leaderboard et également basculer la visibilité du leaderboard au joueur.
- Sous le menu principal dans la hiérarchie, sélectionnez Bouton - Leaderboards
- Faites glisser parent Leaderboard de la hiérarchie à vide « Notifier » champ « sur-cliquez sur »
- Définir la méthode pour basculer alpha (Méthode> Tween Alpha> Toggle)
- Faites glisser parent Leaderboard de la hiérarchie à l'autre champ vide « Notify » dans « le clic
- Définissez la méthode pour obtenir Leaderboards (méthode> Leaderboards> getLeaderboards)
Maintenant, quand on joue et cliquez sur le bouton de Leaderboards en jeu dans le menu principal disparaîtra, les Leaderboards se fanent et tirer les informations de GameSparks et de construire un leaderboard Nous sommes tous mis en place maintenant avec des fonctionnalités de base leaderboard dans notre jeu.
Dans la section suivante, nous allons étendre sur ce que nous venons de faire en faisant des Leaderboards tirer des photos de profil de Facebook pour chaque entrée.