Interagir avec un objet

implémentez un bouton d'interaction qui apparaît lorsqu'un personnage zepeto s'approche d'un objet étape 1 configuration de l'environnement vous pouvez télécharger les ressources d'animation et de bouton utilisées dans l'exemple d'interaction et le guide à partir du lien suivant 📘 exemple d'interaction zepeto module d'interaction zepeto https //github com/naverz/zepeto multiplay example/tree/main/assets/zepeto%20interaction%20module implémentez le code de création de personnage zepeto dans la scène par défaut 📘 veuillez vous référer au guide suivant \[ zepeto player docid\ cshsh6drio eccnexl59u ] étape 2 configuration de l'objet définissez l'objet pour interagir avec le personnage zepeto 1\) placez l'objet avec lequel le personnage zepeto interagira 2\) créez une hiérarchie > créer un objet vide et renommez le dockpoint c'est le point avec lequel le personnage zepeto interagira ajustez la position de l'objet vérifiez que le bouton de basculement du gizmo de transformation en haut de l'éditeur unity est sur local et faites pivoter l'axe z (flèche bleue) vers l'extérieur de l'objet après avoir ajouté le composant collider, vérifiez le istrigger ajustez la taille du collider pour correspondre à la portée où le joueur peut interagir avec l'objet 3\) créez hiérarchie > créer un objet vide en tant qu'enfant de dockpoint et renommez le iconpos étape 3 configuration de l'interface utilisateur 1\) créer hiérarchie > ui > canvas en tant qu'enfant de l'objet avec lequel le personnage zepeto interagira et le renommer preficoncanvas définir le mode de rendu sur espace monde définir la largeur et la hauteur à 1 respectivement décochez l'option ignorer les graphiques inversés sur le composant graphic raycaster 2\) créer hiérarchie > ui > bouton en tant qu'enfant de preficoncanvas 3\) une fois la configuration terminée, faites en un prefab et supprimez le preficoncanvas restant dans la hiérarchie étape 4 écriture d'un script étape 4 1 interactionicon 1\) créer un projet > créer > zepeto > typescript et le renommer interactionicon 2\) écrire un script d'exemple comme ci dessous import { zepetoscriptbehaviour } from 'zepeto script'; import { camera, canvas, collider, gameobject, transform, object } from 'unityengine'; import { button } from 'unityengine ui'; import { unityevent } from 'unityengine events'; import { zepetoplayers } from 'zepeto character controller'; export default class interactionicon extends zepetoscriptbehaviour { // icône @header("\[icône]") @serializefield() private preficoncanvas gameobject; @serializefield() private iconposition transform; // événement unity @header("\[événement unity]") public onclickevent unityevent; public ontriggerenterevent unityevent; public ontriggerexitevent unityevent; private button button; private canvas canvas; private cachedworldcamera camera; private isiconactive boolean = false; private isdonefirsttrig boolean = false; private update() { if (this isdonefirsttrig && this canvas? gameobject activeself) { this updateiconrotation(); } } private ontriggerenter(coll collider) { if (coll != zepetoplayers instance localplayer? zepetoplayer? character getcomponent\<collider>()) { return; } this showicon(); this ontriggerenterevent? invoke(); } private ontriggerexit(coll collider) { if (coll != zepetoplayers instance localplayer? zepetoplayer? character getcomponent\<collider>()) { return; } this hideicon(); this ontriggerexitevent? invoke(); } public showicon(){ if (!this isdonefirsttrig) { this createicon(); this isdonefirsttrig = true; } else { this canvas gameobject setactive(true); } this isiconactive = true; } public hideicon() { this canvas? gameobject setactive(false); this isiconactive = false; } private createicon() { if (this canvas === undefined) { const canvas = gameobject instantiate(this preficoncanvas, this iconposition) as gameobject; this canvas = canvas getcomponent\<canvas>(); this button = canvas getcomponentinchildren\<button>(); this canvas transform position = this iconposition position; } this cachedworldcamera = object findobjectoftype\<camera>(); this canvas worldcamera = this cachedworldcamera; this button onclick addlistener(() => { this onclickicon(); }); } private updateiconrotation() { this canvas transform lookat(this cachedworldcamera transform); } private onclickicon() { this onclickevent? invoke(); } } le flux du script est le suivant mettre à jour() appeler la fonction personnalisée updateiconrotation() pour faire pivoter le canevas de l'icône afin de correspondre à la rotation de la caméra ontriggerenter(), ontriggerexit() lorsque vous entrez dans la zone du collider et détectez un déclencheur, appelez la fonction personnalisée showicon() pour activer l'icône lorsque vous sortez de la zone du collider, appelez la fonction personnalisée hideicon() pour désactiver l'icône 3\) après avoir terminé la création du script, ajoutez le script à l'objet dockpoint 4\) assignez le canvas d'icône de préference, la position de l'icône depuis l'inspecteur étape 4 2 interaction par geste 1\) créer projet > créer > zepeto > typescript et renommez le en interaction par geste 2\) écrivez un script d'exemple comme ci dessous import { animationclip, animator, humanbodybones, physics, transform, vector3, waitforendofframe} from 'unityengine'; import { zepetoscriptbehaviour } from 'zepeto script'; import { zepetoplayers, zepetocharacter } from "zepeto character controller"; import interactionicon from ' /interactionicon'; export default class gestureinteraction extends zepetoscriptbehaviour { @serializefield() private animationclip animationclip; @serializefield() private issnapbone boolean = true; @serializefield() private bodybone humanbodybones; @serializefield() private allowoverlap boolean = false; private interactionicon interactionicon; private isfirst boolean = true; private localcharacter zepetocharacter; private outposition vector3; private playergestureposition vector3; private start() { this interactionicon = this transform getcomponent\<interactionicon>(); zepetoplayers instance onaddedlocalplayer addlistener(() => { this localcharacter = zepetoplayers instance localplayer zepetoplayer character; }); this interactionicon onclickevent addlistener(()=> { // lorsque l'icône d'interaction est cliquée this interactionicon hideicon(); this dointeraction(); }); } private dointeraction() { this outposition = this transform position; if (this issnapbone) { // est ce que l'emplacement est vide if (this allowoverlap || this findotherplayernum() < 1) { this localcharacter setgesture(this animationclip); this startcoroutine(this snapbone()); this startcoroutine(this waitforexit()); } else { // les sièges sont pleins this interactionicon showicon(); } } else { this localcharacter setgesture(this animationclip); this startcoroutine(this waitforexit()); } } private snapbone() { const animator animator = this localcharacter zepetoanimator; const bone transform = animator getbonetransform(this bodybone); let idx = 0; while(true) { const distance = vector3 op subtraction(bone position, this localcharacter transform position); const newpos vector3 = vector3 op subtraction(this transform position, distance); this playergestureposition = newpos; this localcharacter transform position = this playergestureposition; this localcharacter transform rotation = this transform rotation; yield new waitforendofframe(); idx++; // calibrer la position pendant 5 images d'animation if (idx > 5) { return; } } } // la méthode exacte doit passer par le code serveur, // mais elle est calculée par le client local pour l'optimisation du serveur private findotherplayernum() { const hitinfos = physics overlapsphere(this transform position, 0 1); let playernum = 0; if (hitinfos length > 0) { hitinfos foreach((hitinfo) => { if (hitinfo transform getcomponent\<zepetocharacter>()) { playernum ++; } }); } return playernum; } private waitforexit() { if (this localcharacter) { while (true) { if (this localcharacter tryjump || this localcharacter trymove) { this localcharacter cancelgesture(); this transform position = this outposition; this interactionicon showicon(); break; } else if(this issnapbone && this playergestureposition != this localcharacter transform position){ this interactionicon showicon(); break; } yield; } } } } le flux du script est le suivant démarrer() lorsque l'icône est cliquée, elle se désactive et appelle la fonction personnalisée dointeraction() dointeraction() si issnapbone est coché, si le siège est vide (allowoverlap est coché, ou la valeur de retour de la fonction personnalisée findotherplayernum() est inférieure à 1) prenez le geste assigné à l'animationclip démarrez la coroutine snapbone() et attachez le bodybone du personnage zepeto au targettranform démarrez la coroutine waitforexit() lorsque le personnage zepeto saute ou se déplace, ou sort de la zone du collider, annulez le geste et activez l'icône activez l'icône lorsque la capacité d'accueil est pleine si issnapbone n'est pas coché, prenez le geste assigné à l'animationclip démarrez la coroutine waitforexit() 3\) après avoir terminé la création du script, ajoutez le script à l'objet dockpoint 4\) assignez le clip d'animation, is snap bone, body bone et allow overlap dans l'inspecteur assignez le clip d'animation ce sont des gestes à adopter lors de l'interaction vérifiez is snapbone assurez vous que la partie assignée au corps est positionnée comme un dockpoint définissez body bone sur hips assurez vous que la hanche est positionnée dans le dockpoint car cela sera un geste assis allow overlap vous permet de déterminer si plusieurs personnes peuvent s'asseoir sur un seul siège étape 5 jouer le bouton apparaîtra lorsque le personnage zepeto s'approchera de l'objet, et disparaîtra lorsqu'il s'en éloignera si le geste que vous avez défini se joue lorsque vous vous approchez et interagissez avec le bouton, c'est un succès en plus des gestes, divers événements peuvent être mis en œuvre pour se produire après l'interaction voici un exemple de mise en œuvre d'un événement qui crée un élément après une interaction https //www youtube com/watch?v=ooazdb4 lgo https //www youtube com/watch?v=ooazdb4 lgo 📘 exemple de zepeto world chapitre 3 exemple d'interaction https //github com/naverz/zepeto world sample/tree/main/assets/chapter3 https //github com/naverz/zepeto world sample/tree/main/assets/chapter3