Avatars dynamiques dans l'unité

Dans ce tutoriel, je vais vous montrer comment créer un menu simple de personnalisation de personnage et comment enregistrer les données nécessaires à une utilisation dans un jeu. Nous allons créer un avatar de joueur (un avion dans cet exemple), le personnaliser en ajoutant des pièces jointes facultatives ou en changeant de couleur, enregistrer les données, charger un autre niveau et le recréer à partir des données enregistrées. Cela vous permet effectivement de le personnaliser en dehors du monde du jeu; dans un système de menus, donc disponible partout où vous le souhaitez, même après avoir arrêté et redémarré le jeu.

Articles Similaires
  • Unité: maintenant, vous pensez aux composants
  • Utilisation du modèle de conception composite pour un système d'attributs RPG
  • Interface utilisateur de jeu par exemple: un cours intensif dans le bon et le mauvais
  • Des palettes personnalisables ajoutent une variété simple aux personnages de votre jeu

Cliquez sur les boutons pour changer votre avatar.

Pour cela, vous aurez besoin d'une compréhension de base d'Unity. Si vous souhaitez modéliser vos propres objets, vous pouvez également le faire, mais vous pouvez également télécharger le modèle 3D utilisé dans ce tutoriel ici. Le projet entier, au cas où vous voudriez chercher quelque chose, peut aussi être téléchargé ici.


Mise en place du projet

Créez un nouveau projet Unity. Nous aurons besoin de 2 niveaux pour pouvoir basculer entre eux. Enregistrez la scène actuelle et nommez-la "levelMenu". Ensuite, ouvrez les paramètres de construction (fichier - paramètres de construction) et appuyez sur "ajouter une scène en cours". Cela est nécessaire pour pouvoir y accéder ultérieurement et y charger directement.

Créez ensuite une nouvelle scène et nommez-la "levelGame", puis ajoutez-la également aux paramètres de construction. Maintenant, les scènes de base doivent être présentes, nous permettant de les remplir avec des choses.


Créer le plan

Nous utiliserons un avion comme "personnage" pour le moment (ceci est beaucoup plus facile à manipuler qu'un humain complet :). Récupérez les actifs 3d (les voici à nouveau) et copiez-les dans votre dossier d’actifs. Créez un cube et remplacez le maillage par le maillage plan. Créez un nouveau matériau et ajoutez-le à l'avion. Enfin, faites glisser l'avion dans le dossier du projet pour en faire un préfabriqué.


Interface graphique de personnalisation d'avatar

Afin de personnaliser l'avion, nous aurons besoin d'une sorte d'interface.

Créez un nouveau script et nommez-le plane.js. Mettez le code suivant dedans

function OnGUI () if (Application.loadedLevel == 0) if (GUI.Button (Rect (10, 10, 100, 50), "Rouge")) renderer.material.color = Color.red;  if (GUI.Button (Rect (10, 70, 100, 50), "Blue")) renderer.material.color = Color.blue;  if (GUI.Button (Rect (10, 130, 100, 50), "Vert")) renderer.material.color = Color.green; 

Ajoutez le script au préfixe de l'avion et mettez un avion dans la scène. Déplacez la caméra pour qu’elle regarde l’avion afin que nous puissions voir les modifications que nous y apporterons. Lorsque vous l'exécutez, si devrait ressembler à ceci:

Si vous appuyez sur un bouton, la couleur de l'avion devrait changer. Vous pouvez l'essayer dans cette version: TELECHARGEZ LE PROJET SOURCE 1.

Le support if (Application.loadedLevel == 0) désactive le bouton si un autre niveau que le menu (niveau 0) est chargé. Ceci est utile pour gérer les systèmes graphiques.


Chargement du niveau suivant

Dans votre "levelGame", mettez un autre avion et demandez à la caméra de le regarder. Si vous l'essayez, rien ne devrait se passer pour l'instant, car nous n'avons pas encore ajouté l'adaptation aux données sauvegardées. Pendant que vous y êtes, faites en sorte que la scène soit différente de la scène "levelMenu", de manière à ce que la distinction des deux soit plus facile. Donner une couleur de fond différente dans la caméra principale devrait suffire.

Revenons maintenant au niveau "levelMenu", tout se fera à partir de là. Ouvrez le script d'avion et ajoutez-y les lignes suivantes, juste en dessous du code des boutons:

fonction OnGUI () if (GUI.Button (Rect (120, 10, 100, 50), "Niveau de charge")) Application.LoadLevel (1); 

Essaye le! Un nouveau bouton devrait apparaître, et si vous appuyez dessus, cela chargera le nouveau niveau. L'avion dans l'autre niveau aura le look "de base" si. La prochaine étape sera de l’adapter une fois le niveau chargé..


Sauvegarder les données de l'avatar

Unity est livré avec les fonctions "PlayerPrefs". Celles-ci permettent de sauvegarder et de charger des données sur tout appareil utilisé. Premièrement, nous allons enregistrer la couleur de l'avion, puis nous verrons comment le recréer au deuxième niveau chargé..

Adaptez le bouton du niveau de chargement à l'aspect suivant:

if (GUI.Button (Rect (120, 10, 100, 50), "Niveau de charge")) PlayerPrefs.SetFloat ("planeColorR", renderer.material.color.r); PlayerPrefs.SetFloat ("planeColorG", renderer.material.color.g); PlayerPrefs.SetFloat ("planeColorB", renderer.material.color.b); Application.LoadLevel (1); 

Lorsque vous cliquez sur le bouton "Niveau de charge", le jeu enregistre les composants rouge, vert et bleu des couleurs sous forme de trois valeurs distinctes. Le rouge sera enregistré en tant que "planeColorR", le vert sera enregistré en tant que "planeColorG" et le bleu sera enregistré en tant que "planeColorB". Ces valeurs sont enregistrées en dehors du jeu sur l'ordinateur (ou sur tout appareil sur lequel ce dernier s'exécutera, comme un appareil iOS, Android ou Ouya), et peuvent être récupérées à tout moment et à tout moment..


Adapter l'avatar du joueur aux données sauvegardées

N'ajoutez pas ce code au script:

function Start () renderer.material.color.r = PlayerPrefs.GetFloat ("planeColorR"); renderer.material.color.g = PlayerPrefs.GetFloat ("planeColorG"); renderer.material.color.b = PlayerPrefs.GetFloat ("planeColorB"); 

Lorsque le niveau est démarré, l'avion récupère les données de couleur sauvegardées et les applique au plan. Si vous l'essayez maintenant, et qu'il semble noir, c'est parce qu'aucune donnée n'a encore été sauvegardée! Afin d'éviter cela, vous pouvez le configurer pour qu'il s'adapte uniquement au deuxième niveau:

if (Application.loadedLevel == 1) PlayerPrefs.SetFloat ("planeColorR", renderer.material.color.r); PlayerPrefs.SetFloat ("planeColorG", renderer.material.color.g); PlayerPrefs.SetFloat ("planeColorB", renderer.material.color.b);
 

Accessoires

Faisons d'autres choses pour personnaliser l'avion! Dans les fichiers 3D, vous trouverez également des bombes. Nous ferons en sorte que ceux-ci puissent être placés sous l'avion et sauvegardés aussi.

Commencez par créer un objet-bombe. Fabriquez un cube et remplacez le maillage par le maillage de bombe. Ajoutez une couleur grise, puis associez le missile à l'avion et centrez-le en dessous. Ça devrait ressembler à ça:

Si vous appuyez sur "appliquer" alors que l'avion est dans l'inspecteur, les nouvelles bombes seront ajoutées au préfabriqué et l'avion du niveau "levelGame" sera automatiquement mis à jour..

Ajoutez maintenant ces lignes au script:

var bombs: GameObject; fonction Start () bombs.SetActive (false); if (PlayerPrefs.GetInt ("bombes") == 1) bombs.SetActive (true);  function OnGUI () if (GUI.Button (Rect (10, 190, 100, 50), "Bombes")) bombs.SetActive (! bombs.activeSelf);  function LoadLevel () if (bombs.ActiveSelf ()) PlayerPrefs.SetInt ("planeBombs", 1);  Else PlayerPrefs.SetInt ("planeBombs", 0); 

Avant de l'essayer, n'oubliez pas de faire glisser l'objet "bombe" de la scène dans l'emplacement prévu à cet effet dans l'avion, sinon cela ne fonctionnera pas.

Le script entier devrait ressembler à ceci:

#pragma strict var bombs: GameObject; function Start () if (Application.loadedLevel == 1) renderer.material.color.r = PlayerPrefs.GetFloat ("planeColorR"); renderer.material.color.g = PlayerPrefs.GetFloat ("planeColorG"); renderer.material.color.b = PlayerPrefs.GetFloat ("planeColorB");  Bombs.SetActive (false); if (PlayerPrefs.GetInt ("planeBombs") == 1) bombs.SetActive (true);  function OnGUI () if (Application.loadedLevel == 0) if (GUI.Button (Rect (10, 10, 100, 50), "Rouge")) renderer.material.color = Color.red;  If (GUI.Button (Rect (10, 70, 100, 50), "Blue")) renderer.material.color = Color.blue;  If (GUI.Button (Rect (10, 130, 100, 50), "Vert")) renderer.material.color = Color.green;  If (GUI.Button (Rect (10, 190, 100, 50), "Bombes")) bombs.SetActive (! Bombs.activeSelf);  If (GUI.Button (Rect (120, 10, 100, 50), "Niveau de charge")) PlayerPrefs.SetFloat ("planeColorR", renderer.material.color.r); PlayerPrefs.SetFloat ("planeColorG", renderer.material.color.g); PlayerPrefs.SetFloat ("planeColorB", renderer.material.color.b); if (bombs.activeSelf) PlayerPrefs.SetInt ("planeBombs", 1);  Else PlayerPrefs.SetInt ("planeBombs", 0);  Application.LoadLevel (1);  Else if (GUI.Button (Rect (10, 10, 100, 50), "Menu de chargement"))) Application.LoadLevel (0); 

Lorsque vous appuyez sur le bouton "Niveau de charge", l'état des bombes est enregistré. Lors du démarrage du nouveau niveau, les bombes sont alors soit désactivées, soit activées, en fonction de l'état enregistré. Vous pouvez l'essayer dans cette version: TELECHARGER SOURCE PROJECT 2.


Conclusion

Avaient fini! Maintenant tu sais comment

  • personnaliser un "personnage"
  • enregistrer les données sur n'importe quel appareil sur lequel le jeu fonctionne
  • recréer le personnage avec les données sauvegardées

Ce "personnage" personnalisé sera alors disponible à tout moment de la partie..

Nous avons uniquement utilisé un avion simple comme exemple de "personnage", mais cela peut être n'importe quoi. Bateaux, voitures, humains, animaux, même des objets simples, comme des cubes ou des sphères, peuvent être utilisés pour représenter vos joueurs dans vos jeux. Cela peut également être utilisé pour personnaliser d’autres objets, comme des armes, des véhicules, des costumes, des coiffures ou même des décarations dans une vaste demeure persistante. Devenir fou!