CRÉEZ VOTRE MONDE
Interagir avec des objets

Appliquer des véhicules aux personnages ZEPETO

21min

En appliquant le guide sur l'attachement d'objets aux personnages ZEPETO, vous pouvez implémenter des véhicules à conduire comme des voitures, des avions, des animaux de compagnie, etc., comme si le personnage les conduisait.

📘 Veuillez vous référer au guide suivant [Attacher des objets aux personnages de ZEPETO]



Configuration de l'Animateur

Pour changer la pose du personnage ZEPETO lorsqu'il conduit un véhicule comme décrit ci-dessus, vous devez modifier l'Animateur et le configurer sous ZEPETOPlayers.
Pour changer la pose du personnage ZEPETO lorsqu'il conduit un véhicule comme décrit ci-dessus, vous devez modifier l'Animateur et le configurer sous ZEPETOPlayers.




1) Créez un contrôleur d'animateur en allant dans Projet > Créer > Contrôleur d'Animateur et renommez-le en VehicleZepetoAnimator.

Document image




2) Dans l'onglet Animateur, créez un état vide en sélectionnant Créer État > Vide.

Document image




3) Renommez-le de manière appropriée dans l'Inspecteur et assignez des clips d'animation à Motion.

Document image




  • Pour utiliser vos fichiers de clips d'animation souhaités, référez-vous au guide d'animation personnalisée.

📘 Veuillez vous référer au guide suivant [Appliquer une animation personnalisée]



4) Faites glisser et déposez VehicleZepetoAnimator sur ZEPETOPlayers pour le configurer.

Document image


👍 Conseils

  • Si la hauteur de la caméra doit changer en fonction de la taille du véhicule, vous pouvez présélectionner la valeur Camera LookOffset dans ZEPETOPlayers.



Exemple de code

1) Créez un TypeScript en allant dans Projet > Créer > ZEPETO > TypeScript et renommez-le en RideVehicle.

2) Écrivez un script d'exemple comme indiqué ci-dessous.

  • Notez que les valeurs de transformation du véhicule dans cet exemple doivent être ajustées pour correspondre au prefab du véhicule lors de son application.
TypeScript




3) Après avoir terminé l'écriture du script, ajoutez le script à l'objet de jeu dans la scène.

4) Dans l'inspecteur, assignez les ressources du prefab du véhicule et le bone du corps à attacher.

5) Cliquez sur le bouton Play, et vous verrez le personnage ZEPETO monter sur le véhicule.

Document image




👍 Conseils

  • Vous pouvez créer divers véhicules en changeant simplement le prefab du véhicule et les clips d'animation du personnage.
Document image




Exemple de changement de taille lors de la consommation d'objets

Voici un exemple d'application amusante : mettre en œuvre un contenu où la taille du personnage change lors de la consommation d'objets tout en montant sur un véhicule.

1) Dans cet exemple, nous avons préparé deux types de prefabs et défini le tag des objets qui augmentent en taille lorsqu'ils sont consommés comme "Augmenter" et les objets qui diminuent en taille comme "Diminuer".

2) Ajoutez des colliders à chaque objet et assurez-vous de cocher IsTrigger.

Document image

Document image




3) Créez un TypeScript en allant dans Projet > Créer > ZEPETO > TypeScript et renommez-le en ChangeObjectSize.

4) Écrivez un script d'exemple comme indiqué ci-dessous.

TypeScript




  • La partie clé du code consiste à modifier le localScale pour changer la taille du personnage ZEPETO lorsqu'il touche chaque élément.
    • N'hésitez pas à ajuster les chiffres pour le changement de taille
    • mais assurez-vous de gérer les exceptions pour éviter que l'échelle ne devienne plus petite que (1,1,1).

5) Ce script doit être ajouté au personnage ZEPETO créé à l'exécution. Par conséquent, modifiez le script RideVehicle qui attache le véhicule comme suit.

TypeScript




  • Le code pour ajouter le script ChangeObjectSize à l'exécution a été ajouté.

6) Cliquez sur le bouton Play, et vous verrez la taille du personnage changer chaque fois qu'il consomme un objet.

Document image




Interagir avec les véhicules

En appliquant le guide d'interaction, il est possible de monter dans un véhicule à un endroit souhaité après y avoir interagi.

📘 Veuillez vous référer au guide suivant. [Interagir avec un objet]



Configuration

1) Configurez l'objet DockPoint et le prefab UI sur votre prefab de véhicule de la même manière que dans le guide d'interaction.

Prefab de Slime avec Dock Point Configuré
Prefab de Slime avec Dock Point Configuré




2) Dans l'éditeur Unity, assurez-vous que le bouton de bascule du gizmo de transformation en haut est réglé sur Local, et faites-le pivoter de sorte que l'axe Z (flèche bleue) pointe vers l'extérieur de l'objet.

Prefab de Slime avec Collider Configuré
Prefab de Slime avec Collider Configuré




3) Ajoutez un composant Collider et cochez l'option isTrigger.

4) Ajustez la taille du Collider à la portée dans laquelle le joueur peut interagir avec l'objet.

Configuration Complète du Bouton UI
Configuration Complète du Bouton UI




5) Créez un objet vide comme enfant de DockPoint en allant dans Hiérarchie > Créer un Objet Vide, et renommez-le en IconPos.

Document image




6) Configure PrefIconCanvas de la même manière que le guide d'interaction des objets, puis transformez-le en prefab.

Document image




7) Étape supplémentaire : Créez un bouton de désengagement

  • Créez un bouton en tant qu'enfant de l'objet véhicule en allant dans Hiérarchie > UI > Bouton, et renommez-le en Bouton de désengagement.



Ajout d'une animation d'embarquement au véhicule

Lorsqu'un personnage monte ou descend d'un véhicule, il a besoin d'une configuration d'animateur naturelle pour correspondre.

Le guide ci-dessous vous aidera à travers les paramètres de l'animateur nécessaires pour monter ou descendre.

Référez-vous au guide sur l'application d'animations personnalisées pour ajouter un état d'animation assise à votre animateur personnalisé.

📘 Veuillez vous référer au guide suivant. [Application d'animation personnalisée]



1) Faites un clic droit sur l'état d'animation ajouté, cliquez sur Faire une transition pour créer une transition de Idle à Sitting et de Sitting à Idle. Sélectionnez la transition créée et décochez l'option Has Exit Time.

Document image




2) Dans l'animateur personnalisé → Paramètres → [ + ], ajoutez une condition Bool et renommez-la en isRiding.

Document image




3) Pour la transition de l'état Sitting à Idle, cliquez sur Conditions → [ + ] et ajoutez la condition isRiding avec l'option définie sur false.

Document image




4) Pour la transition de l'état Idle à Sitting, cliquez sur Conditions → [ + ] et ajoutez la condition isRiding avec l'option définie sur true.

Document image




Script

Écrivez le script InteractionIcon.ts, identique à celui du guide d'interaction, qui affiche l'interface utilisateur d'interaction lors de l'entrée dans la zone de déclenchement du prefab du véhicule.

Ajoutez le script InteractionIcon ZEPETO écrit à l'objet DockPoint, et assignez Pref Icon Canvas et Icon Position dans l'inspecteur.

Référez-vous à l'exemple RideVehicleExample ci-dessous pour un code d'exemple sur la façon de monter dans le véhicule après avoir interagi avec l'interface utilisateur.

TypeScript




  • Le déroulement du script est le suivant :
    • Démarrer()
      • Lorsque l'icône est cliquée, this._interactionIcon est désactivé, et la fonction DoInteraction() est appelée.
    • DoInteraction()
      • Définir les valeurs de transition de l'animateur pour jouer l'animation Assis.
      • Démarrer la coroutine Snap Bone() pour attacher le bodyBone du personnage ZEPETO au targetTransform.
      • Utiliser la fonction this._localCharacter.StateMachine.constraintStateAnimation = true; pour désactiver la transition de l'animateur actuel, verrouillant l'animation en cours de lecture.
      • Le Parent de l'objet véhicule change pour le personnage ZEPETO.
      • Le bouton Descendre en haut à droite est activé.
    • StopInteraction()
      • Définir les valeurs de transition de l'animateur pour jouer l'animation Idle.
      • Réactiver la transition de l'animateur afin que l'animation appropriée soit jouée selon la situation.
      • Définir le Parent de l'objet véhicule sur null.
      • Désactiver le bouton Descendre.
    • this.getOffBtn.onClick
      • La fonction StopInteraction() est appelée.
      • this._interactionIcon est activé.



Ajoutez le script RideVehicleExample écrit à DockPoint, et assignez le bouton Get Off et le prefab du véhicule dans l'inspecteur.

Document image




[▶︎(jouer)] Appuyez sur le bouton de lecture pour essayer de monter dans le véhicule.

Écran résultant
Écran résultant




👍 Conseils

  • L'exemple ci-dessus est un exemple de contenu non considéré pour la synchronisation multijoueur.
  • Pour mettre en œuvre la synchronisation multijoueur, vous devez synchroniser des informations telles que le véhicule dans lequel chaque joueur monte, ainsi que la taille et l'emplacement du véhicule, comme l'état de la salle.