CRÉEZ VOTRE MONDE
Geste

32min
L'API ZepetoWorldContent vous permet de définir des vignettes pour les catégories de gestes/poses souhaitées et d'activer des gestes/poses spécifiques lorsqu'une vignette est cliquée.
﻿
﻿
Pour utiliser l'API ZepetoWorldContent, vous devez écrire une instruction d'importation comme suit.
TypeScript
import { OfficialContentType, WorldService, ZepetoWorldContent, Content } from 'ZEPETO.World';
import { OfficialContentType, WorldService, ZepetoWorldContent, Content } from 'ZEPETO.World';
﻿
﻿
Les informations sur les variables membres et les fonctions de la classe Content contenant des informations sur les gestes/poses sont les suivantes :
API
Description
public get Id(): string
Identifiant unique de contenu
public get Title(): string
Texte du titre de geste, pose

- La langue sera automatiquement traduite en fonction de la langue de l'appareil
public get Thumbnail(): UnityEngine.Texture2D
Miniature 2D
public get AnimationClip(): UnityEngine.AnimationClip
Clip d'animation de geste
public get IsDownloadedThumbnail(): boolean
Fonction pour déterminer si vous avez déjà téléchargé cette miniature
public get IsDownloadedAnimation(): boolean
Fonction pour déterminer si vous avez déjà téléchargé ce clip d'animation
public DownloadAnimation($complete: System.Action):void
Une fonction de téléchargement de clip d'animation qui reçoit un rappel de complétion avec un facteur

- Si IsDownloadedAnimation() est faux, implémentez DownloadAnimation() pour être appelé.
public DownloadThumbnail($complete: System.Action):void
Fonction pour télécharger des miniatures

- Si IsDownloadedThumbnail() est faux, implémentez DownloadThumbnail() pour être appelé.
OfficialContentType : enum
Type de contenu (World 1.9.0 et supérieur)

- Geste = 2
- Pose = 4
- Selfie = 8
- GestureGreeting = 16
- GesturePose = 32
- GestureAffirmation = 64
- GestureDancing = 128
- GestureDenial = 256
- GestureEtc = 512
- Tout = 14
Vous pouvez utiliser la fonction existante, public DownloadThumbnail($character: ZEPETO_Character_Controller.ZepetoCharacter, $complete: System.Action):void, sans aucun problème de fonctionnalité. Cependant, comme elle n'accepte plus le personnage Zepeto comme argument, veuillez utiliser la fonction nouvellement modifiée public DownloadThumbnail($complete: System.Action):void à la place.
﻿
ÉTAPE 1 : Configurer l'interface utilisateur
﻿
ÉTAPE 1-1 : Créer un bouton de geste
1) Ajoutez Hiérarchie > UI > Canvas et définissez l'ordre de tri sur 2 pour éviter d'être obscurci par d'autres interfaces utilisateur.
﻿
﻿
2) Ajouter Hiérarchie > UI > Bouton.
Exemple de bouton de geste
﻿
﻿
ÉTAPE 1-2 : Organiser le panneau de geste
1) Ajouter Hiérarchie > Créer Objet Vide et le renommer PanelParent.
﻿
﻿
2) Ajouter Hiérarchie > UI > Panneau comme enfant de PanelParent.
Exemple de panneau de geste
﻿
﻿
3) Bouton de fermeture : Après avoir ajouté UI > Bouton, ajoutez un événement onClick pour désactiver le panneau de geste.
Exemple de configuration du bouton de fermeture
﻿
﻿
4) Bouton d'ouverture : Veuillez ajouter un événement onClick qui active le panneau de geste au bouton d'ouverture créé ci-dessus.
Exemple de configuration du bouton d'ouverture
﻿
﻿
5) Ajoutez une image pour servir de zone de titre.
Exemple d'image de titre
﻿
﻿
6) Configurez une vue défilante pour afficher la miniature de geste.
Ajoutez Hiérarchie > UI > Vue défilante.
Cochez Horizontal et désactivez l'image de la barre de défilement car vous n'utiliserez que des défilements verticaux et des défilements horizontaux ne seront pas nécessaires.
Ajoutez une mise en page en grille au contenu dans la vue défilante pour aligner les miniatures en motif de grille.
Ajoutez un ajusteur de taille de contenu pour rendre la taille de l'objet appropriée à la taille du contenu.
Lorsque vous implémentez un script, vous devez définir le contenu dans la vue défilante comme le parent de la miniature de geste (afin que toute la zone soit reconnue et défilée)
Exemple de configuration de vue défilante
﻿
﻿
7) Configurez des onglets par type de geste.
Ajouter une hiérarchie > Créer un objet vide en tant qu'enfant du panneau et le renommer en GestureTitle.
Ceci est l'objet parent du bouton bascule.
Ajouter une mise en page horizontale pour aligner les onglets horizontalement.
Ajouter le composant Toggle Group.
👍 Pour configurer plus d'onglets, ajoutez une hiérarchie > UI > Scroll View et cochez Horizontal dans l'option Scroll View.
Exemple de configuration de GestureTitle
﻿
﻿
8) Ajoutez le texte à utiliser comme bouton bascule en tant qu'enfant de GestureTitle, et remplacez-le par Tout.
Définit la couleur du texte en gris.
Ajoutez le texte surligné qui sera affiché lorsqu'il est coché en tant qu'enfant du texte.
Définissez le contenu de la police, la taille et l'épaisseur de la même manière, et définissez la couleur sur noir.
Ajoutez le composant Toggle.
Spécifiez l'objet parent dans le groupe.
Ajoutez le texte surligné que vous avez ajouté en tant qu'enfant à Graphic
Vérifiez isOn uniquement pour les composants Toggle All qui seront affichés en premier.
Créez à la fois les boutons bascule Gesture et Pose de la même manière.
Exemple de configuration du bouton bascule
﻿
﻿
ÉTAPE 1-3 : Créer des préfabriqués de vignettes
Utilisez la méthode de création d'un bouton vignette en tant que préfab et générez-le ensuite en tant qu'instance dans un script.
1) Ajoutez UI > Bouton en tant qu'enfant de Contenu dans la Vue Défilante et renommez-le préThumb.
2) Veuillez changer le nom en Thumb après avoir ajouté l'Image Brute.
Cette image sera une vignette. Ajustez la taille en conséquence.
3) Ajoutez du texte.
Réglez la position pour centrer le bas de l'image.
Ajustez la taille et l'épaisseur de l'écriture, et ajoutez le Ajusteur de Taille de Contenu.
Ajustement Horizontal : Taille Préférée
Ajustement Vertical : Taille Préférée
4) Si le réglage est fait, veuillez en faire un Préfab et le mettre dans le dossier Resources.
Exemple de configuration de préfabriqué miniature
﻿
Exemple où les boutons miniatures sont placés sur le panneau de geste après exécution
﻿
﻿
ÉTAPE 1-4 : Vidéo de guide de configuration de l'interface utilisateur
﻿
👍 Les valeurs de taille et de position de l'interface utilisateur montrées dans la vidéo sont recommandées, mais vous pouvez les modifier selon vos souhaits !
Une fois la configuration de l'interface utilisateur terminée, passez à la scriptage.
﻿
ÉTAPE 2 : Écrire un script
Ce script est basé sur un jeu unique.
﻿
ÉTAPE 2-1 : Miniature
Projet > Créer > ZEPETO > TypeScript et renommez-le en Miniature.
Écrivez un script d'exemple comme ci-dessous.
Ceci est un script qui organise les informations de contenu de geste (titre, image) dans l'interface utilisateur.
Miniature
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Content } from 'ZEPETO.World';
import { RawImage, Text } from 'UnityEngine.UI';
import { Texture2D } from 'UnityEngine';
 
export default class Thumbnail extends ZepetoScriptBehaviour {
 
    @HideInInspector() public content: Content;
     
    Start() {
        this.GetComponentInChildren<Text>().text = this.content.Title;
        this.GetComponentInChildren<RawImage>().texture = this.content.Thumbnail as Texture2D;
    }
 
}
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Content } from 'ZEPETO.World';
import { RawImage, Text } from 'UnityEngine.UI';
import { Texture2D } from 'UnityEngine';
 
export default class Thumbnail extends ZepetoScriptBehaviour {
 
    @HideInInspector() public content: Content;
     
    Start() {
        this.GetComponentInChildren<Text>().text = this.content.Title;
        this.GetComponentInChildren<RawImage>().texture = this.content.Thumbnail as Texture2D;
    }
 
}
﻿
Après avoir créé le script, ouvrez le prefab preThumb et ajoutez le script.
﻿
﻿
ÉTAPE 2-2 : GestureLoader
Créer une hiérarchie > Créer un objet vide et le renommer en GestureLoader.
Créer un projet > Créer > ZEPETO > TypeScript et le renommer en GestureLoader.
Écrire un script d'exemple comme ci-dessous.
GestureLoader
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { LocalPlayer, SpawnInfo, ZepetoCharacter, ZepetoPlayers } from 'ZEPETO.Character.Controller';
import { OfficialContentType, WorldService, ZepetoWorldContent, Content } from 'ZEPETO.World';
import { RawImage, Text, Button } from 'UnityEngine.UI';
import { GameObject, Texture2D, Transform, WaitUntil } from 'UnityEngine';
import Thumbnail from './Thumbnail';
 
export default class GestureLoader extends ZepetoScriptBehaviour {
 
    @HideInInspector() public contents: Content[] = [];
    @HideInInspector() public thumbnails: GameObject[] = [];
 
    @SerializeField() private _count: number = 50;
    @SerializeField() private _contentsParent: Transform;
    @SerializeField() private _prefThumb: GameObject;
 
    private _myCharacter: ZepetoCharacter;
     
    Start() {
        // Création d'un personnage
        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true);
         
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._myCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
 
            // Pour prendre une miniature avec mon personnage, vous devez demander le contenu après la création du personnage.
            this.ContentRequest();
        });
    }
 
 
    // 1. Recevoir le contenu du serveur
    private ContentRequest() {
         
        // Demande de tous les types
        ZepetoWorldContent.RequestOfficialContentList(OfficialContentType.All, contents => {
            this.contents = contents;
             
            for (let i = 0; i < this._count; i++) {
                if (!this.contents[i].IsDownloadedThumbnail) {
                    // Prendre une photo miniature en utilisant mon personnage
                    this.contents[i].DownloadThumbnail(() =>{
                        this.CreateThumbnailObjcet(this.contents[i]);
                    });
                } else {
                    this.CreateThumbnailObjcet(this.contents[i]);
                }
            }
        });
 
    }
 
    // 2. Création d'objets miniature
    private CreateThumbnailObjcet(content: Content) {
        const newThumb: GameObject = GameObject.Instantiate(this._prefThumb, this._contentsParent) as GameObject;
        newThumb.GetComponent<Thumbnail>().content = content;
 
        // Écouteur de bouton pour chaque miniature
        newThumb.GetComponent<Button>().onClick.AddListener(() => {
            this.LoadAnimation(content);
        });
         
        this.thumbnails.push(newThumb);
    }
 
    // 3. Chargement de l'animation
    private LoadAnimation(content: Content) {
        // Vérifier le chargement de l'animation
        if (!content.IsDownloadedAnimation) {
            // Si l'animation n'a pas été téléchargée, téléchargez-la.
            content.DownloadAnimation(() => {
                // jouer le clip d'animation
                this._myCharacter.SetGesture(content.AnimationClip);
            });
        } else {
            this._myCharacter.SetGesture(content.AnimationClip);
        }
    }
}
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { LocalPlayer, SpawnInfo, ZepetoCharacter, ZepetoPlayers } from 'ZEPETO.Character.Controller';
import { OfficialContentType, WorldService, ZepetoWorldContent, Content } from 'ZEPETO.World';
import { RawImage, Text, Button } from 'UnityEngine.UI';
import { GameObject, Texture2D, Transform, WaitUntil } from 'UnityEngine';
import Thumbnail from './Thumbnail';
 
export default class GestureLoader extends ZepetoScriptBehaviour {
 
    @HideInInspector() public contents: Content[] = [];
    @HideInInspector() public thumbnails: GameObject[] = [];
 
    @SerializeField() private _count: number = 50;
    @SerializeField() private _contentsParent: Transform;
    @SerializeField() private _prefThumb: GameObject;
 
    private _myCharacter: ZepetoCharacter;
     
    Start() {
        // Création d'un personnage
        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true);
         
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._myCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
 
            // Pour prendre une miniature avec mon personnage, vous devez demander le contenu après la création du personnage.
            this.ContentRequest();
        });
    }
 
 
    // 1. Recevoir le contenu du serveur
    private ContentRequest() {
         
        // Demande de tous les types
        ZepetoWorldContent.RequestOfficialContentList(OfficialContentType.All, contents => {
            this.contents = contents;
             
            for (let i = 0; i < this._count; i++) {
                if (!this.contents[i].IsDownloadedThumbnail) {
                    // Prendre une photo miniature en utilisant mon personnage
                    this.contents[i].DownloadThumbnail(() =>{
                        this.CreateThumbnailObjcet(this.contents[i]);
                    });
                } else {
                    this.CreateThumbnailObjcet(this.contents[i]);
                }
            }
        });
 
    }
 
    // 2. Création d'objets miniature
    private CreateThumbnailObjcet(content: Content) {
        const newThumb: GameObject = GameObject.Instantiate(this._prefThumb, this._contentsParent) as GameObject;
        newThumb.GetComponent<Thumbnail>().content = content;
 
        // Écouteur de bouton pour chaque miniature
        newThumb.GetComponent<Button>().onClick.AddListener(() => {
            this.LoadAnimation(content);
        });
         
        this.thumbnails.push(newThumb);
    }
 
    // 3. Chargement de l'animation
    private LoadAnimation(content: Content) {
        // Vérifier le chargement de l'animation
        if (!content.IsDownloadedAnimation) {
            // Si l'animation n'a pas été téléchargée, téléchargez-la.
            content.DownloadAnimation(() => {
                // jouer le clip d'animation
                this._myCharacter.SetGesture(content.AnimationClip);
            });
        } else {
            this._myCharacter.SetGesture(content.AnimationClip);
        }
    }
}
﻿
Le compte est le nombre maximum de gestes à télécharger sur chaque onglet. Si vous le définissez à un nombre supérieur à 100, il peut y avoir des erreurs lors du processus de téléchargement de la miniature, donc veuillez le définir uniquement autant que nécessaire.
﻿
Le script se déroule comme suit :
1) Invoquez la fonction personnalisée ContentsRequest() pour générer des vignettes après avoir chargé le personnage ZEPETO.
La fonction ContentsRequest() reçoit des informations sur le contenu en séparant les gestes et les poses, respectivement.
S'il existe une vignette, elle est ignorée ; sinon, la vignette est récupérée.
Les données de vignette récupérées sont stockées dans des listes respectives.
Exemple de l'écran de configuration du script de geste
﻿
﻿
ÉTAPE 2-3 : UIController
Créer une hiérarchie > Créer un objet vide et le renommer en UIContoller.
Créer un projet > Créer > ZEPETO > TypeScript et le renommer en UIContoller.
Écrire un script d'exemple comme ci-dessous.
UIController
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Button, RawImage, Text, Toggle } from 'UnityEngine.UI';
import { LocalPlayer, ZepetoCharacter, ZepetoPlayers, ZepetoScreenTouchpad } from 'ZEPETO.Character.Controller';
import { OfficialContentType, Content } from 'ZEPETO.World';
import { Object, GameObject, Transform } from 'UnityEngine';
import GestureLoader from './GestureLoader';
import Thumbnail from './Thumbnail';
 
export default class UIController extends ZepetoScriptBehaviour {
     
    @SerializeField() private _closeButton : Button;
    @SerializeField() private _typeToggleGroup : Toggle[];
 
    private _gestureLodaer: GestureLoader;
    private _myCharacter: ZepetoCharacter;
         
    Start() {
        this._gestureLodaer = Object.FindObjectOfType<GestureLoader>();
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._myCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
 
            // Si vous cliquez sur le pavé tactile, annulez le geste
            Object.FindObjectOfType<ZepetoScreenTouchpad>().OnPointerDownEvent.AddListener(() => {
                this.StopGesture();
            });
 
            // Si vous cliquez sur le bouton de fermeture, annulez le geste
            this._closeButton.onClick.AddListener(() => {
                this.StopGesture();
            });
        });
         
        // Écouteur UI
        this._typeToggleGroup[0].onValueChanged.AddListener(() => {
            this.SetCategoryUI(OfficialContentType.All);
        });
        this._typeToggleGroup[1].onValueChanged.AddListener(() => {
            this.SetCategoryUI(OfficialContentType.Gesture);
        });
        this._typeToggleGroup[2].onValueChanged.AddListener(() => {
            this.SetCategoryUI(OfficialContentType.Pose);
        });
 
    }
 
    // Catégorie Toggle UI Set
    private SetCategoryUI(category: OfficialContentType) {
         
        if (category == OfficialContentType.All) {
            this._gestureLodaer.thumbnails.forEach((Obj) => {
                Obj.SetActive(true);
            });
        }   else {
            for (let i = 0; i < this._gestureLodaer.thumbnails.length; i++) {
                const content = this._gestureLodaer.thumbnails[i].GetComponent<Thumbnail>().content;
                if (content.Keywords.includes(category)) {
                    this._gestureLodaer.thumbnails[i].SetActive(true);
                } else {
                    this._gestureLodaer.thumbnails[i].SetActive(false);
                }
            }
        }
    }
     
    private StopGesture() {
        this._myCharacter.CancelGesture();
    }
}
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Button, RawImage, Text, Toggle } from 'UnityEngine.UI';
import { LocalPlayer, ZepetoCharacter, ZepetoPlayers, ZepetoScreenTouchpad } from 'ZEPETO.Character.Controller';
import { OfficialContentType, Content } from 'ZEPETO.World';
import { Object, GameObject, Transform } from 'UnityEngine';
import GestureLoader from './GestureLoader';
import Thumbnail from './Thumbnail';
 
export default class UIController extends ZepetoScriptBehaviour {
     
    @SerializeField() private _closeButton : Button;
    @SerializeField() private _typeToggleGroup : Toggle[];
 
    private _gestureLodaer: GestureLoader;
    private _myCharacter: ZepetoCharacter;
         
    Start() {
        this._gestureLodaer = Object.FindObjectOfType<GestureLoader>();
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._myCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
 
            // Si vous cliquez sur le pavé tactile, annulez le geste
            Object.FindObjectOfType<ZepetoScreenTouchpad>().OnPointerDownEvent.AddListener(() => {
                this.StopGesture();
            });
 
            // Si vous cliquez sur le bouton de fermeture, annulez le geste
            this._closeButton.onClick.AddListener(() => {
                this.StopGesture();
            });
        });
         
        // Écouteur UI
        this._typeToggleGroup[0].onValueChanged.AddListener(() => {
            this.SetCategoryUI(OfficialContentType.All);
        });
        this._typeToggleGroup[1].onValueChanged.AddListener(() => {
            this.SetCategoryUI(OfficialContentType.Gesture);
        });
        this._typeToggleGroup[2].onValueChanged.AddListener(() => {
            this.SetCategoryUI(OfficialContentType.Pose);
        });
 
    }
 
    // Catégorie Toggle UI Set
    private SetCategoryUI(category: OfficialContentType) {
         
        if (category == OfficialContentType.All) {
            this._gestureLodaer.thumbnails.forEach((Obj) => {
                Obj.SetActive(true);
            });
        }   else {
            for (let i = 0; i < this._gestureLodaer.thumbnails.length; i++) {
                const content = this._gestureLodaer.thumbnails[i].GetComponent<Thumbnail>().content;
                if (content.Keywords.includes(category)) {
                    this._gestureLodaer.thumbnails[i].SetActive(true);
                } else {
                    this._gestureLodaer.thumbnails[i].SetActive(false);
                }
            }
        }
    }
     
    private StopGesture() {
        this._myCharacter.CancelGesture();
    }
}
﻿
Le script se déroule comme suit :
Touchez le pavé tactile ou le bouton de fermeture pour annuler la lecture en utilisant la fonction CancelGesture().
Appuyez sur l'onglet (bouton de basculement) pour invoquer la fonction personnalisée SetCategoryUI().
La fonction SetCategoryUI() utilise les informations de contenu de geste dans chaque miniature pour les définir pour chaque catégorie correspondante.
Activez si c'est un type applicable, et désactivez sinon.
﻿
Après avoir terminé le script, assignez le bouton de fermeture, TypeToggleGroup à l'inspecteur.
L'entrée du Type Toggle Group est le Toggle qui est un enfant du Toggle Group dans le panneau de geste.
Exemple d'écran de configuration de script
﻿
﻿
ÉTAPE 3 : Exécuter
❗️ Attention
Avant de jouer, désactivez PanelParent afin que seul le bouton d'ouverture soit visible lors de la lecture.
﻿
﻿
ÉTAPE 4 : Synchroniser les gestes multi-joueurs
Dans le cas d'un multi-joueur, un code de synchronisation doit être ajouté pour recevoir la valeur d'information de geste prise par un joueur particulier et l'appliquer à tous les joueurs accédant à la Salle.
La clé est d'envoyer et de recevoir un Message de Salle entre le serveur et le client concernant quel joueur a effectué quel geste.
﻿
ÉTAPE 4-1 : Code Client
Miniature - Multijoueur
Écrivez le même script que celui implémenté dans le code client en mode solo.
Miniature - Multijoueur
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Content } from 'ZEPETO.World';
import { RawImage, Text } from 'UnityEngine.UI';
import { Texture2D } from 'UnityEngine';
 
export default class Thumbnail extends ZepetoScriptBehaviour {
 
    @HideInInspector() public content: Content;
     
    Start() {
        this.GetComponentInChildren<Text>().text = this.content.Title;
        this.GetComponentInChildren<RawImage>().texture = this.content.Thumbnail as Texture2D;
    }
 
}
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Content } from 'ZEPETO.World';
import { RawImage, Text } from 'UnityEngine.UI';
import { Texture2D } from 'UnityEngine';
 
export default class Thumbnail extends ZepetoScriptBehaviour {
 
    @HideInInspector() public content: Content;
     
    Start() {
        this.GetComponentInChildren<Text>().text = this.content.Title;
        this.GetComponentInChildren<RawImage>().texture = this.content.Thumbnail as Texture2D;
    }
 
}
﻿
﻿
GestureLoader - Multijoueur
Par défaut, les scripts implémentés dans le code client en mode solo sont écrits de la même manière.
De plus, le client déclare l'interface pour contenir le PlayerGestureInfo.
Lors de l'envoi de vos informations au serveur : voir SendMyGesture() Fonction Personnalisée
Lorsque votre joueur appuie sur la miniature pour faire un geste, envoyez l'ID du geste au serveur en utilisant room.Send().
Lorsque vous annulez un geste, traitez-le pour envoyer l'information que vous avez annulé.
Lors de la réception d'informations sur le geste d'un autre client depuis le serveur : "OnChangeGesture" Le message de la salle est envoyé à this.room.AddMessageHandler() dans Start()
La synchronisation est réalisée en ayant l'ID de session et l'ID de geste dans le message "OnChangeGesture" et en faisant jouer le geste au joueur approprié.
TypeScript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { LocalPlayer, SpawnInfo, ZepetoCharacter, ZepetoPlayers } from 'ZEPETO.Character.Controller';
import { OfficialContentType, WorldService, ZepetoWorldContent, Content, ZepetoWorldMultiplay } from 'ZEPETO.World';
import { RawImage, Text, Button } from 'UnityEngine.UI';
import { GameObject, Texture2D, Transform, WaitUntil } from 'UnityEngine';
import Thumbnail from './Thumbnail';
import { Room, RoomData } from 'ZEPETO.Multiplay';
 
interface PlayerGestureInfo {
    sessionId: string,
    gestureId: string
}
 
const CancelMotion = "" as const;
 
export default class GestureLoaderMultiPlay extends ZepetoScriptBehaviour {
 
    public multiplay: ZepetoWorldMultiplay;
     
    @HideInInspector() public contents: Content[] = [];
    @HideInInspector() public thumbnails: GameObject[] = [];
 
    @SerializeField() private _count: number = 50;
    @SerializeField() private _contentsParent: Transform;
    @SerializeField() private _prefThumb: GameObject;
 
    private _myCharacter: ZepetoCharacter;
    private _room: Room;
    private _contentsMap: Map<string, Content> = new Map<string, Content>();
 
    Start() {
        // Création d'un personnage
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._myCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            
            // Pour prendre une miniature avec mon personnage, vous devez demander le contenu après la création du personnage.
            this.ContentRequest();
        });
 
        // Pour MultiPlay
        this.multiplay.RoomCreated += (room: Room) => {
            this._room = room;
            // Recevoir les informations de geste de l'utilisateur depuis le serveur
            this._room.AddMessageHandler("OnChangeGesture", (message: PlayerGestureInfo) => {
                let playerGestureInfo: PlayerGestureInfo = {
                    sessionId: message.sessionId,
                    gestureId: message.gestureId
                };
                this.LoadAnimation(playerGestureInfo);
            });
        };
    }
 
 
    // 1. Recevoir le contenu du serveur
    private ContentRequest(){
         
        // Demande de tous les types
        ZepetoWorldContent.RequestOfficialContentList(OfficialContentType.All, contents => {
            this.contents = contents;
            for (let i = 0; i < this._count; i++) {
                if (!this.contents[i].IsDownloadedThumbnail) {
                    // Prendre une photo miniature avec mon personnage
                    this.contents[i].DownloadThumbnail(() =>{
                        this.CreateThumbnailObjcet(this.contents[i]);
                    });
                } else {
                    this.CreateThumbnailObjcet(this.contents[i]);
                }
            }
        });
 
    }
 
    // 2. Création d'objets miniature
    private CreateThumbnailObjcet(content: Content) {
        const newThumb: GameObject = GameObject.Instantiate(this._prefThumb, this._contentsParent) as GameObject;
        newThumb.GetComponent<Thumbnail>().content = content;
 
        // Créer un dictionnaire pour trouver le contenu avec un Id de contenu
        this._contentsMap.set(content.Id, content);
         
        // Écouteur de bouton pour chaque miniature
        newThumb.GetComponent<Button>().onClick.AddListener(() => {
            this.SendMyGesture(content.Id);
        });
 
        // liste des miniatures
        this.thumbnails.push(newThumb);
 
    }
 
    // Pour MultiPlay
    // Envoyer les informations de geste cliqué au serveur
    public SendMyGesture(gestureId) {
        const data = new RoomData();
        data.Add("gestureId", gestureId);
        this._room.Send("OnChangeGesture", data.GetObject());
    }
 
    // 3. Chargement de l'animation
    private LoadAnimation(playerGestureInfo: PlayerGestureInfo){
         
        if (!ZepetoPlayers.instance.HasPlayer(playerGestureInfo.sessionId)) {
            console.log("Le joueur n'existe pas");
            return;
        }
         
        const zepetoPlayer = ZepetoPlayers.instance.GetPlayer(playerGestureInfo.sessionId).character;
 
        if (playerGestureInfo.gestureId == CancelMotion) {
            zepetoPlayer.CancelGesture();
            return;
        }
        else if(!this._contentsMap.has(playerGestureInfo.gestureId)) {
            console.log("Ressource pas encore chargée");
            return;
        }
 
        const content = this._contentsMap.get(playerGestureInfo.gestureId);
 
        // Vérifier le chargement de l'animation
        if (!content.IsDownloadedAnimation) {
            // Si l'animation n'a pas été téléchargée, téléchargez-la.
            content.DownloadAnimation(() => {
                // jouer le clip d'animation
                zepetoPlayer.SetGesture(content.AnimationClip);
            });
        } else {
            zepetoPlayer.SetGesture(content.AnimationClip);
        }
    }
}
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { LocalPlayer, SpawnInfo, ZepetoCharacter, ZepetoPlayers } from 'ZEPETO.Character.Controller';
import { OfficialContentType, WorldService, ZepetoWorldContent, Content, ZepetoWorldMultiplay } from 'ZEPETO.World';
import { RawImage, Text, Button } from 'UnityEngine.UI';
import { GameObject, Texture2D, Transform, WaitUntil } from 'UnityEngine';
import Thumbnail from './Thumbnail';
import { Room, RoomData } from 'ZEPETO.Multiplay';
 
interface PlayerGestureInfo {
    sessionId: string,
    gestureId: string
}
 
const CancelMotion = "" as const;
 
export default class GestureLoaderMultiPlay extends ZepetoScriptBehaviour {
 
    public multiplay: ZepetoWorldMultiplay;
     
    @HideInInspector() public contents: Content[] = [];
    @HideInInspector() public thumbnails: GameObject[] = [];
 
    @SerializeField() private _count: number = 50;
    @SerializeField() private _contentsParent: Transform;
    @SerializeField() private _prefThumb: GameObject;
 
    private _myCharacter: ZepetoCharacter;
    private _room: Room;
    private _contentsMap: Map<string, Content> = new Map<string, Content>();
 
    Start() {
        // Création d'un personnage
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._myCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            
            // Pour prendre une miniature avec mon personnage, vous devez demander le contenu après la création du personnage.
            this.ContentRequest();
        });
 
        // Pour MultiPlay
        this.multiplay.RoomCreated += (room: Room) => {
            this._room = room;
            // Recevoir les informations de geste de l'utilisateur depuis le serveur
            this._room.AddMessageHandler("OnChangeGesture", (message: PlayerGestureInfo) => {
                let playerGestureInfo: PlayerGestureInfo = {
                    sessionId: message.sessionId,
                    gestureId: message.gestureId
                };
                this.LoadAnimation(playerGestureInfo);
            });
        };
    }
 
 
    // 1. Recevoir le contenu du serveur
    private ContentRequest(){
         
        // Demande de tous les types
        ZepetoWorldContent.RequestOfficialContentList(OfficialContentType.All, contents => {
            this.contents = contents;
            for (let i = 0; i < this._count; i++) {
                if (!this.contents[i].IsDownloadedThumbnail) {
                    // Prendre une photo miniature avec mon personnage
                    this.contents[i].DownloadThumbnail(() =>{
                        this.CreateThumbnailObjcet(this.contents[i]);
                    });
                } else {
                    this.CreateThumbnailObjcet(this.contents[i]);
                }
            }
        });
 
    }
 
    // 2. Création d'objets miniature
    private CreateThumbnailObjcet(content: Content) {
        const newThumb: GameObject = GameObject.Instantiate(this._prefThumb, this._contentsParent) as GameObject;
        newThumb.GetComponent<Thumbnail>().content = content;
 
        // Créer un dictionnaire pour trouver le contenu avec un Id de contenu
        this._contentsMap.set(content.Id, content);
         
        // Écouteur de bouton pour chaque miniature
        newThumb.GetComponent<Button>().onClick.AddListener(() => {
            this.SendMyGesture(content.Id);
        });
 
        // liste des miniatures
        this.thumbnails.push(newThumb);
 
    }
 
    // Pour MultiPlay
    // Envoyer les informations de geste cliqué au serveur
    public SendMyGesture(gestureId) {
        const data = new RoomData();
        data.Add("gestureId", gestureId);
        this._room.Send("OnChangeGesture", data.GetObject());
    }
 
    // 3. Chargement de l'animation
    private LoadAnimation(playerGestureInfo: PlayerGestureInfo){
         
        if (!ZepetoPlayers.instance.HasPlayer(playerGestureInfo.sessionId)) {
            console.log("Le joueur n'existe pas");
            return;
        }
         
        const zepetoPlayer = ZepetoPlayers.instance.GetPlayer(playerGestureInfo.sessionId).character;
 
        if (playerGestureInfo.gestureId == CancelMotion) {
            zepetoPlayer.CancelGesture();
            return;
        }
        else if(!this._contentsMap.has(playerGestureInfo.gestureId)) {
            console.log("Ressource pas encore chargée");
            return;
        }
 
        const content = this._contentsMap.get(playerGestureInfo.gestureId);
 
        // Vérifier le chargement de l'animation
        if (!content.IsDownloadedAnimation) {
            // Si l'animation n'a pas été téléchargée, téléchargez-la.
            content.DownloadAnimation(() => {
                // jouer le clip d'animation
                zepetoPlayer.SetGesture(content.AnimationClip);
            });
        } else {
            zepetoPlayer.SetGesture(content.AnimationClip);
        }
    }
}
﻿
﻿
Après avoir terminé le script, l'Inspecteur assignera un objet supplémentaire à Multiplay avec le composant Multiplay du monde Zepeto.
﻿
Écran de paramètres de script d'exemple
﻿
Exemple d'objets avec un composant Multiplay de Zepeto World
﻿
﻿
UIController - Multiplay
Par défaut, les scripts implémentés dans le code client en mode solo sont écrits de la même manière.
La différence avec le code client en mode solo est la fonction personnalisée StopGesture().
Invoquez une fonction personnalisée SendMyGesture() dans le GestureLoaderMultiplay.
Processus pour envoyer des informations indiquant que le geste a été annulé.
TypeScript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Button, RawImage, Text, Toggle } from 'UnityEngine.UI';
import { LocalPlayer, ZepetoCharacter, ZepetoPlayers, ZepetoScreenTouchpad } from 'ZEPETO.Character.Controller';
import { OfficialContentType, Content } from 'ZEPETO.World';
import { Object, GameObject, Transform } from 'UnityEngine';
import GestureLoaderMultiPlay from './GestureLoaderMultiPlay';
import Thumbnail from './Thumbnail';
 
const CancelMotion = "" as const;
 
export default class UIController extends ZepetoScriptBehaviour {
 
    @SerializeField() private _closeButton : Button;
    @SerializeField() private _typeToggleGroup : Toggle[];
 
    private _gestureLodaer: GestureLoaderMultiPlay;
    private _myCharacter: ZepetoCharacter;
 
    Start() {
        this._gestureLodaer = Object.FindObjectOfType<GestureLoaderMultiPlay>();
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._myCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
 
            // Si vous cliquez sur le pavé tactile, annulez le geste
            Object.FindObjectOfType<ZepetoScreenTouchpad>().OnPointerDownEvent.AddListener(() => {
                this.StopGesture();
            });
 
            // Si vous cliquez sur le bouton de fermeture, annulez le geste
            this._closeButton.onClick.AddListener(() => {
                this.StopGesture();
            });
        });
 
        // Écouteur UI
        this._typeToggleGroup[0].onValueChanged.AddListener(() => {
            this.SetCategoryUI(OfficialContentType.All);
        });
        this._typeToggleGroup[1].onValueChanged.AddListener(() => {
            this.SetCategoryUI(OfficialContentType.Gesture);
        });
        this._typeToggleGroup[2].onValueChanged.AddListener(() => {
            this.SetCategoryUI(OfficialContentType.Pose);
        });
     
    }
 
    // Catégorie Toggle UI Set
    private SetCategoryUI(category: OfficialContentType) {
 
        if (category == OfficialContentType.All) {
            this._gestureLodaer.thumbnails.forEach((Obj) => {
                Obj.SetActive(true);
            });
        }  else {
            for (let i = 0; i < this._gestureLodaer.thumbnails.length; i++) {
                const content = this._gestureLodaer.thumbnails[i].GetComponent<Thumbnail>().content;
                if (content.Keywords.includes(category)) {
                    this._gestureLodaer.thumbnails[i].SetActive(true);
                } else {
                    this._gestureLodaer.thumbnails[i].SetActive(false);
                }
            }
        }
    }
 
    private StopGesture() {
        this._gestureLodaer.SendMyGesture(CancelMotion);
    }
}
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Button, RawImage, Text, Toggle } from 'UnityEngine.UI';
import { LocalPlayer, ZepetoCharacter, ZepetoPlayers, ZepetoScreenTouchpad } from 'ZEPETO.Character.Controller';
import { OfficialContentType, Content } from 'ZEPETO.World';
import { Object, GameObject, Transform } from 'UnityEngine';
import GestureLoaderMultiPlay from './GestureLoaderMultiPlay';
import Thumbnail from './Thumbnail';
 
const CancelMotion = "" as const;
 
export default class UIController extends ZepetoScriptBehaviour {
 
    @SerializeField() private _closeButton : Button;
    @SerializeField() private _typeToggleGroup : Toggle[];
 
    private _gestureLodaer: GestureLoaderMultiPlay;
    private _myCharacter: ZepetoCharacter;
 
    Start() {
        this._gestureLodaer = Object.FindObjectOfType<GestureLoaderMultiPlay>();
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._myCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
 
            // Si vous cliquez sur le pavé tactile, annulez le geste
            Object.FindObjectOfType<ZepetoScreenTouchpad>().OnPointerDownEvent.AddListener(() => {
                this.StopGesture();
            });
 
            // Si vous cliquez sur le bouton de fermeture, annulez le geste
            this._closeButton.onClick.AddListener(() => {
                this.StopGesture();
            });
        });
 
        // Écouteur UI
        this._typeToggleGroup[0].onValueChanged.AddListener(() => {
            this.SetCategoryUI(OfficialContentType.All);
        });
        this._typeToggleGroup[1].onValueChanged.AddListener(() => {
            this.SetCategoryUI(OfficialContentType.Gesture);
        });
        this._typeToggleGroup[2].onValueChanged.AddListener(() => {
            this.SetCategoryUI(OfficialContentType.Pose);
        });
     
    }
 
    // Catégorie Toggle UI Set
    private SetCategoryUI(category: OfficialContentType) {
 
        if (category == OfficialContentType.All) {
            this._gestureLodaer.thumbnails.forEach((Obj) => {
                Obj.SetActive(true);
            });
        }  else {
            for (let i = 0; i < this._gestureLodaer.thumbnails.length; i++) {
                const content = this._gestureLodaer.thumbnails[i].GetComponent<Thumbnail>().content;
                if (content.Keywords.includes(category)) {
                    this._gestureLodaer.thumbnails[i].SetActive(true);
                } else {
                    this._gestureLodaer.thumbnails[i].SetActive(false);
                }
            }
        }
    }
 
    private StopGesture() {
        this._gestureLodaer.SendMyGesture(CancelMotion);
    }
}
﻿
﻿
ÉTAPE 4-2 : Code du serveur
Le code du serveur déclare ensuite que l'interface contient le PlayerGestureInfo de la même manière.
Le code du serveur est basé sur le code du serveur dans l'exemple Multiplay par défaut.
Il crée un rappel onMessage() qui envoie des informations de geste à d'autres clients lorsque un geste change dans onCreate().
TypeScript
import { Sandbox, SandboxOptions, SandboxPlayer } from 'ZEPETO.Multiplay';
import { Player, Transform, Vector3 } from 'ZEPETO.Multiplay.Schema';

// Définir une interface PlayerGestureInfo pour représenter les informations du geste d'un joueur.
interface PlayerGestureInfo {
    sessionId: string,
    gestureId: string
}
 
export default class extends Sandbox {
  
 	 // Définir un objet constant `MESSAGE_TYPE` pour stocker les types de messages utilisés dans le script.
    MESSAGE_TYPE = {
        OnChangeGesture: "OnChangeGesture"
    }
     
    onCreate(options: SandboxOptions) {
 
        // Appelé lorsque la salle est créée.
        // Gérer l'état ou l'initialisation des données de la salle.
 
        this.onMessage("onChangedTransform", (client, message) => {
            const player = this.state.players.get(client.sessionId);
 
            const transform = new Transform();
            transform.position = new Vector3();
            transform.position.x = message.position.x;
            transform.position.y = message.position.y;
            transform.position.z = message.position.z;
 
            transform.rotation = new Vector3();
            transform.rotation.x = message.rotation.x;
            transform.rotation.y = message.rotation.y;
            transform.rotation.z = message.rotation.z;
 
            player.transform = transform;
        });
 
        this.onMessage("onChangedState", (client, message) => {
            const player = this.state.players.get(client.sessionId);
            player.state = message.state;
            player.subState = message.subState; // Contrôleur de personnage V2
        });
 
        // Lorsque le geste est changé,
        this.onMessage<PlayerGestureInfo>(this.MESSAGE_TYPE.OnChangeGesture, (client, message) => {
            let gestureInfo:PlayerGestureInfo = {
                sessionId: client.sessionId,
                gestureId: message.gestureId
            };
            // Envoyer les gestes aux autres joueurs sauf au client
            this.broadcast(this.MESSAGE_TYPE.OnChangeGesture, gestureInfo);
        });
 
    }
     
    onJoin(client: SandboxPlayer) {
 
        // Définir la valeur initiale après avoir créé l'objet joueur défini dans schemas.json.
        console.log(`[OnJoin] sessionId : ${client.sessionId}, userId : ${client.userId}`)
 
        const player = new Player();
        player.sessionId = client.sessionId;
 

        if (client.userId) {
            player.zepetoUserId = client.userId;
        }
         
        // Gérer l'objet Player en utilisant sessionId, une valeur clé unique de l'objet client.
        // Le client peut vérifier les informations sur l'objet joueur ajouté en ajoutant l'événement add_OnAdd à l'objet players.
        this.state.players.set(client.sessionId, player);
    }
     
    onLeave(client: SandboxPlayer, consented?: boolean) {
 
        // En définissant allowReconnection, il est possible de maintenir la connexion pour le circuit, mais de nettoyer immédiatement dans le guide de base.
        // Le client peut vérifier les informations sur l'objet joueur supprimé en ajoutant l'événement add_OnRemove à l'objet players.
        this.state.players.delete(client.sessionId);
    }
}
import { Sandbox, SandboxOptions, SandboxPlayer } from 'ZEPETO.Multiplay';
import { Player, Transform, Vector3 } from 'ZEPETO.Multiplay.Schema';

// Définir une interface PlayerGestureInfo pour représenter les informations du geste d'un joueur.
interface PlayerGestureInfo {
    sessionId: string,
    gestureId: string
}
 
export default class extends Sandbox {
  
 	 // Définir un objet constant `MESSAGE_TYPE` pour stocker les types de messages utilisés dans le script.
    MESSAGE_TYPE = {
        OnChangeGesture: "OnChangeGesture"
    }
     
    onCreate(options: SandboxOptions) {
 
        // Appelé lorsque la salle est créée.
        // Gérer l'état ou l'initialisation des données de la salle.
 
        this.onMessage("onChangedTransform", (client, message) => {
            const player = this.state.players.get(client.sessionId);
 
            const transform = new Transform();
            transform.position = new Vector3();
            transform.position.x = message.position.x;
            transform.position.y = message.position.y;
            transform.position.z = message.position.z;
 
            transform.rotation = new Vector3();
            transform.rotation.x = message.rotation.x;
            transform.rotation.y = message.rotation.y;
            transform.rotation.z = message.rotation.z;
 
            player.transform = transform;
        });
 
        this.onMessage("onChangedState", (client, message) => {
            const player = this.state.players.get(client.sessionId);
            player.state = message.state;
            player.subState = message.subState; // Contrôleur de personnage V2
        });
 
        // Lorsque le geste est changé,
        this.onMessage<PlayerGestureInfo>(this.MESSAGE_TYPE.OnChangeGesture, (client, message) => {
            let gestureInfo:PlayerGestureInfo = {
                sessionId: client.sessionId,
                gestureId: message.gestureId
            };
            // Envoyer les gestes aux autres joueurs sauf au client
            this.broadcast(this.MESSAGE_TYPE.OnChangeGesture, gestureInfo);
        });
 
    }
     
    onJoin(client: SandboxPlayer) {
 
        // Définir la valeur initiale après avoir créé l'objet joueur défini dans schemas.json.
        console.log(`[OnJoin] sessionId : ${client.sessionId}, userId : ${client.userId}`)
 
        const player = new Player();
        player.sessionId = client.sessionId;
 

        if (client.userId) {
            player.zepetoUserId = client.userId;
        }
         
        // Gérer l'objet Player en utilisant sessionId, une valeur clé unique de l'objet client.
        // Le client peut vérifier les informations sur l'objet joueur ajouté en ajoutant l'événement add_OnAdd à l'objet players.
        this.state.players.set(client.sessionId, player);
    }
     
    onLeave(client: SandboxPlayer, consented?: boolean) {
 
        // En définissant allowReconnection, il est possible de maintenir la connexion pour le circuit, mais de nettoyer immédiatement dans le guide de base.
        // Le client peut vérifier les informations sur l'objet joueur supprimé en ajoutant l'événement add_OnRemove à l'objet players.
        this.state.players.delete(client.sessionId);
    }
}
﻿
﻿
API	Description
public get Id(): string	Identifiant unique de contenu
public get Title(): string	Texte du titre de geste, pose - La langue sera automatiquement traduite en fonction de la langue de l'appareil
public get Thumbnail(): UnityEngine.Texture2D	Miniature 2D
public get AnimationClip(): UnityEngine.AnimationClip	Clip d'animation de geste
public get IsDownloadedThumbnail(): boolean	Fonction pour déterminer si vous avez déjà téléchargé cette miniature
public get IsDownloadedAnimation(): boolean	Fonction pour déterminer si vous avez déjà téléchargé ce clip d'animation
public DownloadAnimation($complete: System.Action):void	Une fonction de téléchargement de clip d'animation qui reçoit un rappel de complétion avec un facteur - Si IsDownloadedAnimation() est faux, implémentez DownloadAnimation() pour être appelé.
public DownloadThumbnail($complete: System.Action):void	Fonction pour télécharger des miniatures - Si IsDownloadedThumbnail() est faux, implémentez DownloadThumbnail() pour être appelé.
OfficialContentType : enum	Type de contenu (World 1.9.0 et supérieur) - Geste = 2 - Pose = 4 - Selfie = 8 - GestureGreeting = 16 - GesturePose = 32 - GestureAffirmation = 64 - GestureDancing = 128 - GestureDenial = 256 - GestureEtc = 512 - Tout = 14
Mis à jour 10 Oct 2024
Cette page vous a-t-elle aidée?
Obtenez l'emplacement actuel du personnage ZEPETO
QuickChat