Utilisation de V-pad

20min
V-pad
Une interface de contrôle est nécessaire pour manipuler le personnage dans le monde.
ZEPETO World crée essentiellement une interface de contrôle appelée V-pad à l'exécution via ZEPETOPlayers.
﻿
Le V-pad peut effectuer les fonctions suivantes en fonction de la zone que le joueur touche sur l'écran :
﻿
﻿
1) Écran tactile : Lorsque vous touchez la zone du pavé et que vous le faites glisser vers le haut, vers le bas, à gauche ou à droite, le joueur local se déplace le long de l'axe XZ.
Lorsque vous appuyez dans la zone du pavé, le pavé tactile apparaît à l'emplacement touché, et il disparaît une fois l'action de toucher terminée.
Les zones de pavé par défaut sont les suivantes :
Mode écran
Taille du canevas
Taille de la zone
Horizontal
1334 X 750
600 X 450
Vertical
750 X 1334
375 X 500
﻿
2) Bouton de saut : Appuyer sur le bouton fait sauter le joueur local. La valeur de hauteur du saut peut être modifiée via Zepeto Players > Character > Jump Power.
﻿
👍 Conseils
La zone du pad peut être modifiée en définissant la zone du prefab enregistré dans le Contrôle des joueurs Zepeto.
Changez la taille de la zone dans l'ordre suivant.
Sélectionnez le prefab par défaut enregistré dans le Contrôle des joueurs Zepeto et copiez le prefab en le faisant glisser et en le déposant dans les Assets.
Sélectionnez l'objet Pad à l'intérieur du Prefab copié.
Changez la largeur et la hauteur du composant Rect Transform à la taille souhaitée.
﻿
﻿
La structure de l'objet V-pad créée à l'exécution est la suivante.
﻿
1) Pad : Un objet d'interface utilisateur d'écran qui peut déplacer la position du personnage.
Arrière-plan : Une image d'arrière-plan noire translucide montrant la zone du pad.
HandleOrigin : La zone du cercle extérieur du pad. HandleOrigin change de position en fonction de l'emplacement touché.
Handle : La zone du cercle intérieur du pad. Lorsque le Handle est touché et glissé, sa position change et il ne quitte pas la zone de HandleOrigin.
2) Saut : Un objet bouton qui permet au personnage de sauter.
Haut : Objet image de saut à l'intérieur du bouton Saut.
﻿
Comment obtenir la valeur d'entrée du V-pad
Pour recevoir les valeurs d'entrée du V-pad, vous devez accéder au composant ZepetoScreenTouchpad et au composant ZepetoScreenButton créés à l'exécution et enregistrer un événement.
Événement ZepetoScreenTouchpad
Le composant ZepetoScreenButton est un composant de bouton de saut de personnage. Les événements accessibles incluent :
Événement
Description
OnPointerDownEvent
Cet événement se produit lorsque l'utilisateur appuie sur le V-pad.
OnDragEvent
Cet événement se produit pendant que l'utilisateur appuie sur le V-pad.
OnPointerUpEvent
Cet événement se produit lorsque l'utilisateur relâche le V-Pad.
﻿
Événement ZepetoScreenButton
Le composant ZepetoScreenButton est un composant de bouton de saut de personnage. Les événements accessibles incluent :
Événement
Description
OnPointDownEvent
Cet événement se produit lorsque l'utilisateur appuie sur le bouton de saut.
OnPointUpEvent
Cet événement se produit lorsque l'utilisateur relâche le bouton de saut.
﻿
Exemple de script
Le script suivant est un exemple de sortie de la valeur de position du V-pad dans la console lorsque l'utilisateur appuie sur le pavé tactile.
GetVPadInput
import { Object } from 'UnityEngine';
import { ZepetoPlayers, ZepetoScreenButton, ZepetoScreenTouchpad } from 'ZEPETO.Character.Controller';
import { ZepetoScriptBehaviour } from 'ZEPETO.Script'

export default class GetVPadInput extends ZepetoScriptBehaviour {

    Start() {

        // Ajouter un écouteur pour l'événement lorsque un joueur local est ajouté
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this.GetPadTouch();
            this.GetJumpTouch();
        });
    }

    GetPadTouch() {

        // Trouver l'objet ZepetoScreenTouchpad dans la scène
        const touchPad = Object.FindObjectOfType<ZepetoScreenTouchpad>();

        // Ajouter un écouteur pour l'événement de glissement sur le touchpad
        touchPad.OnDragEvent.AddListener(() => {
            // Enregistrer la position de la poignée de toucher lorsque un événement de glissement se produit
            console.log(touchPad.touchHandle.transform.position);
        });
    }

    GetJumpTouch() {

        // Trouver l'objet ZepetoScreenButton dans la scène
        const screenButton = Object.FindObjectOfType<ZepetoScreenButton>();

        // Ajouter un écouteur à l'OnPointDownEvent du screenButton
        // Cet écouteur enregistre "Bouton de saut enfoncé" lorsque le bouton est pressé
        screenButton.OnPointDownEvent.AddListener(() => {

            console.log("Bouton de saut enfoncé");
        });

        // Ajouter un écouteur à l'OnPointUpEvent du screenButton
        // Cet écouteur enregistre "Bouton de saut relâché" lorsque le bouton est relâché
        screenButton.OnPointUpEvent.AddListener(() => {

            console.log("Bouton de saut relâché");
        });

    }

}
import { Object } from 'UnityEngine';
import { ZepetoPlayers, ZepetoScreenButton, ZepetoScreenTouchpad } from 'ZEPETO.Character.Controller';
import { ZepetoScriptBehaviour } from 'ZEPETO.Script'

export default class GetVPadInput extends ZepetoScriptBehaviour {

    Start() {

        // Ajouter un écouteur pour l'événement lorsque un joueur local est ajouté
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this.GetPadTouch();
            this.GetJumpTouch();
        });
    }

    GetPadTouch() {

        // Trouver l'objet ZepetoScreenTouchpad dans la scène
        const touchPad = Object.FindObjectOfType<ZepetoScreenTouchpad>();

        // Ajouter un écouteur pour l'événement de glissement sur le touchpad
        touchPad.OnDragEvent.AddListener(() => {
            // Enregistrer la position de la poignée de toucher lorsque un événement de glissement se produit
            console.log(touchPad.touchHandle.transform.position);
        });
    }

    GetJumpTouch() {

        // Trouver l'objet ZepetoScreenButton dans la scène
        const screenButton = Object.FindObjectOfType<ZepetoScreenButton>();

        // Ajouter un écouteur à l'OnPointDownEvent du screenButton
        // Cet écouteur enregistre "Bouton de saut enfoncé" lorsque le bouton est pressé
        screenButton.OnPointDownEvent.AddListener(() => {

            console.log("Bouton de saut enfoncé");
        });

        // Ajouter un écouteur à l'OnPointUpEvent du screenButton
        // Cet écouteur enregistre "Bouton de saut relâché" lorsque le bouton est relâché
        screenButton.OnPointUpEvent.AddListener(() => {

            console.log("Bouton de saut relâché");
        });

    }

}
﻿
Description du script
Enregistrez un écouteur d'événements qui appelle le GetPadTouch() et GetJumpTouch() fonctions lorsque un joueur local est ajouté à la scène.
La GetPadTouch() fonction est une fonction qui traite les événements tactiles qui se produisent sur le pavé tactile.
Utilisez Object.FindObjectOfType<ZepetoScreenTouchpad>() pour trouver un objet ZepetoScreenTouchpad dans la scène.
Ajoutez un écouteur pour l'OnDragEvent. Cet écouteur se déclenche lorsqu'un événement de glissement se produit sur le pavé tactile.
Dans l'écouteur, la position de la poignée tactile est affichée dans la console.
La GetJumpTouch() fonction est une fonction qui traite les événements qui se produisent à partir du bouton de saut.
Utilisez Object.FindObjectOfType<ZepetoScreenButton>() pour trouver un objet ZepetoScreenButton dans la scène.
Ajoutez des écouteurs pour les événements OnPointDownEvent et OnPointUpEvent du bouton de saut.
Dans OnPointDownEvent, un log appelé Jump Button Down est affiché chaque fois que le bouton de saut est pressé.
Dans OnPointUpEvent, un log appelé Jump Button Up est affiché chaque fois que le bouton de saut est relâché.
﻿
Si vous l'exécutez en appuyant sur le bouton Lecture, vous pouvez voir la valeur de position du V-pad affichée dans le journal de la console chaque fois que vous appuyez sur le V-pad. Vous verrez également le journal de la console affiché chaque fois que vous appuyez ou relâchez le bouton de saut.
﻿
﻿
﻿
Personnaliser le V-Pad
Vous pouvez contrôler le V-Pad en utilisant ScreenTouchPad et ScreenButton.
Vous pouvez allumer/éteindre le V-Pad depuis UIController_TouchPad_Horizontal et UIController_TouchPad_Vertical Prefab.
Voici à quoi cela ressemble avec le Touch Pad désactivé. Vous pouvez désactiver le bouton de saut de la même manière.
﻿
﻿
Paramètre de double saut
Vous pouvez ajouter une fonction de double saut au bouton de saut du V-pad ou appliquer une fonction de bouton de double saut personnalisée.
﻿
﻿
Pour activer la fonction de double saut, activez la case à cocher Paramètres personnalisés > Double saut dans la section Caractère du composant ZepetoPlayers.
La hauteur du double saut peut être réglée en ajustant la valeur de puissance.
﻿
﻿
Il y a trois façons d'utiliser la fonction de double saut sur le V-pad :
﻿
1) Réglage via le prefab V-Pad
Lors de l'utilisation du double saut avec le bouton V-Pad, configurez comme suit.
Cliquez sur le prefab UIController_TouchPad_Vertical ou UIController_TouchPad_Horizontal. Vous serez déplacé vers le dossier où se trouve le prefab original sous le dossier Packages dans le panneau Projet.
﻿
﻿
Copiez le prefab UIController_TouchPad_Vertical ou UIController_TouchPad_Horizontal en le faisant glisser et en le déposant dans le dossier Assets.
﻿
❗️ Avertissement
Le prefab original dans le dossier Packages ne peut pas être modifié, vous devez donc en copier une copie dans le dossier Assets pour le modifier.
Si vous essayez de modifier le prefab original, une erreur de prefab immuable se produira.
﻿
﻿
Double-cliquez sur le prefab UIController_TouchPad_Vertical ou UIController_TouchPad_Horizontal dans l'élément prefab copié ou appuyez sur le bouton Ouvrir Prefab dans la fenêtre Inspecteur pour modifier le prefab.
﻿
﻿
Sélectionnez l'objet Jump parmi les sous-objets du prefab.
﻿
﻿
Dans le composant Zepeto Screen Button de l'objet Jump, appuyez sur le bouton + dans On Point Down Event() et enregistrez un événement comme suit.
﻿
On Point Down Event()
Runtime Only
Sélectionnez l'objet : Enregistrer UIController_TouchPad_Vertical ou UIController_TouchPad_Horizontal.
Fonction d'événement : Cliquez sur la section No Function et définissez-la sur UIZepetoPlayerControl > DoubleJump() fonction.
﻿
﻿
Si les paramètres sont les suivants, c'est réussi.
﻿
﻿
2) Paramétrage à l'aide d'un script
Ce script permet au personnage d'effectuer un double saut en réponse à l'entrée du bouton de saut du V-pad.
TypeScript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Object } from 'UnityEngine';
import { ZepetoScreenButton, CharacterState, ZepetoPlayers } from 'ZEPETO.Character.Controller';
 
export default class DobuleJump extends ZepetoScriptBehaviour {
 
    Start() {
         
           // Écoutez quand un joueur local est ajouté et exécutez la fonction lambda donnée
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
 
            // Récupérez le personnage du joueur local
            const zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
 
            // Trouvez un objet de type ZepetoScreenButton dans la scène
            const screenButton = Object.FindObjectOfType<ZepetoScreenButton>();
 
            // Ajoutez un écouteur pour l'événement OnPointDownEvent du bouton d'écran pour gérer les actions de saut
            screenButton.OnPointDownEvent.AddListener(() => {
 
                // Si l'état actuel du personnage est Jump, déclenchez un double saut
                if (zepetoCharacter.CurrentState === CharacterState.Jump) {
                    zepetoCharacter.DoubleJump();
                }
            });
        })    
    }
}


import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Object } from 'UnityEngine';
import { ZepetoScreenButton, CharacterState, ZepetoPlayers } from 'ZEPETO.Character.Controller';
 
export default class DobuleJump extends ZepetoScriptBehaviour {
 
    Start() {
         
           // Écoutez quand un joueur local est ajouté et exécutez la fonction lambda donnée
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
 
            // Récupérez le personnage du joueur local
            const zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
 
            // Trouvez un objet de type ZepetoScreenButton dans la scène
            const screenButton = Object.FindObjectOfType<ZepetoScreenButton>();
 
            // Ajoutez un écouteur pour l'événement OnPointDownEvent du bouton d'écran pour gérer les actions de saut
            screenButton.OnPointDownEvent.AddListener(() => {
 
                // Si l'état actuel du personnage est Jump, déclenchez un double saut
                if (zepetoCharacter.CurrentState === CharacterState.Jump) {
                    zepetoCharacter.DoubleJump();
                }
            });
        })    
    }
}

﻿
Description du script
ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener() enregistre un écouteur qui est déclenché lorsqu'un joueur local est ajouté au jeu. Cela sert à configurer la fonctionnalité de double saut à ajouter au fur et à mesure que des joueurs locaux sont ajoutés.
ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character fournit un accès au personnage du joueur local. Object.FindObjectOfType() localise un objet de type ZepetoScreenButton dans la scène actuelle et l'assigne aux actions de saut.
ScreenButton.OnPointDownEvent.AddListener() ajoute un écouteur à l'OnPointDownEvent du bouton d'écran. Cet écouteur attend soit un toucher d'écran soit un événement de clic et initie une action de saut ou de double saut.
Dans l'écouteur, l'instruction if vérifie si l'état actuel du personnage est CharacterState.Jump. Si c'est vrai, elle exécute zepetoCharacter.DoubleJump().
﻿
Après avoir écrit le script, créez un GameObject vide dans la scène et ajoutez le script DobuleJump.ts en tant que composant.
﻿
﻿
3) Paramétrage via un bouton personnalisé
Si vous choisissez de créer et d'utiliser votre propre bouton, veuillez ajouter le script comme indiqué ci-dessous.
Ce script ajoute des fonctions de saut et de double saut aux boutons définis par l'utilisateur.
TypeScript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Button } from 'UnityEngine.UI';
import { CharacterState, ZepetoCharacter, ZepetoPlayers } from 'ZEPETO.Character.Controller';
 
export default class JumpButton extends ZepetoScriptBehaviour {
 
    public shotButton: Button;
    private zepetoCharacter: ZepetoCharacter;
 
    Start() {
 
        // Créer le personnage
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this.zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
        });
 
        // Ajouter le composant de script
        this.shotButton.onClick.AddListener(() => {
            if (this.zepetoCharacter.CurrentState === CharacterState.Jump) {
                this.zepetoCharacter.DoubleJump();
            } else {
                this.zepetoCharacter.Jump();
            }
        });
    }
}

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Button } from 'UnityEngine.UI';
import { CharacterState, ZepetoCharacter, ZepetoPlayers } from 'ZEPETO.Character.Controller';
 
export default class JumpButton extends ZepetoScriptBehaviour {
 
    public shotButton: Button;
    private zepetoCharacter: ZepetoCharacter;
 
    Start() {
 
        // Créer le personnage
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this.zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
        });
 
        // Ajouter le composant de script
        this.shotButton.onClick.AddListener(() => {
            if (this.zepetoCharacter.CurrentState === CharacterState.Jump) {
                this.zepetoCharacter.DoubleJump();
            } else {
                this.zepetoCharacter.Jump();
            }
        });
    }
}
﻿
Description du script
ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener() enregistre une fonction à exécuter lorsque un joueur local est ajouté au jeu.
this.shotButton.onClick.AddListener() ajoute une fonction à exécuter lorsque le bouton de tir est cliqué.
Lorsque la fonction est déclenchée, elle vérifie si l'état actuel du personnage est un état de saut et exécute un saut ou un double saut.
Si le personnage est dans un état de saut, this.zepetoCharacter.DoubleJump() est appelé pour effectuer un double saut ; sinon, this.zepetoCharacter.Jump() est appelé pour effectuer un saut.
﻿
Après avoir écrit le script, créez un GameObject vide dans la scène et ajoutez le script JumpButton.ts en tant que composant.
Enfin, assignez un bouton de saut au bouton de tir dans l'Inspecteur.
﻿
﻿
Mode écran	Taille du canevas	Taille de la zone
Horizontal	1334 X 750	600 X 450
Vertical	750 X 1334	375 X 500
Événement	Description
OnPointerDownEvent	Cet événement se produit lorsque l'utilisateur appuie sur le V-pad.
OnDragEvent	Cet événement se produit pendant que l'utilisateur appuie sur le V-pad.
OnPointerUpEvent	Cet événement se produit lorsque l'utilisateur relâche le V-Pad.
Événement	Description
OnPointDownEvent	Cet événement se produit lorsque l'utilisateur appuie sur le bouton de saut.
OnPointUpEvent	Cet événement se produit lorsque l'utilisateur relâche le bouton de saut.
Mis à jour 10 Oct 2024
Cette page vous a-t-elle aidée?
Couche de collision de la caméra
Exemple de vue de dessus