Berinteraksi dengan sebuah objek

15min
Terapkan tombol interaksi yang muncul ketika karakter ZEPETO mendekati objek.
﻿
﻿
﻿
LANGKAH 1 : Pengaturan lingkungan
Anda dapat mengunduh sumber daya animasi dan tombol yang digunakan dalam contoh interaksi dan panduan dari tautan berikut.
📘 Contoh Interaksi ZEPETO
Modul Interaksi Zepeto﻿
Terapkan kode pembuatan karakter ZEPETO di Scene sebagai default.
📘 Silakan merujuk ke panduan berikut. [ZEPETO Player﻿]
﻿
LANGKAH 2 : Mengatur Objek
Atur objek untuk berinteraksi dengan karakter ZEPETO.
﻿
1) Tempatkan objek yang akan berinteraksi dengan karakter ZEPETO.
2) Buat Hierarki > Buat Objek Kosong dan ganti namanya menjadi DockPoint.
Ini adalah titik yang akan berinteraksi dengan karakter ZEPETO. Sesuaikan posisi objek.
﻿
﻿
Periksa bahwa tombol toggle gizmo transform di bagian atas Editor Unity adalah Lokal dan putar sumbu Z (panah biru) ke luar objek.
﻿
﻿
Setelah menambahkan komponen Collider, periksa isTrigger.
Sesuaikan ukuran Collider agar sesuai dengan jangkauan di mana pemain dapat berinteraksi dengan objek.
﻿
﻿
3) Buat Hierarki > Buat Objek Kosong sebagai anak dari DockPoint dan ganti namanya menjadi IconPos.
﻿
﻿
LANGKAH 3 : Mengatur UI
1) Buat Hierarki > UI > Kanvas sebagai anak dari objek yang akan berinteraksi dengan karakter ZEPETO dan ganti namanya menjadi PrefIconCanvas.
Atur Mode Render ke Ruang Dunia.
Atur Lebar dan Tinggi masing-masing menjadi 1.
Hapus centang opsi Abaikan Grafik Terbalik pada komponen Graphic Raycaster.
Contoh Pengaturan Kanvas
﻿
﻿
2) Buat Hierarki > UI > Tombol sebagai anak dari PrefIconCanvas.
Contoh Gambar Tombol
﻿
﻿
3) Setelah pengaturan selesai, buat menjadi Prefab dan hapus PrefIconCanvas yang tersisa di hierarki.
Contoh Konfigurasi Prefab
﻿
﻿
LANGKAH 4 : Menulis Skrip
LANGKAH 4 - 1 : Ikon Interaksi
1) Buat Proyek > Buat > ZEPETO > TypeScript dan ganti namanya menjadi InteractionIcon.
2) Tulis skrip contoh seperti di bawah ini.
TypeScript
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 {
     
    // Ikon
    @Header("[Ikon]")
    @SerializeField() private prefIconCanvas: GameObject;
    @SerializeField() private iconPosition: Transform;
     
    // Acara Unity    
    @Header("[Acara 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();
    }
}
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 {
     
    // Ikon
    @Header("[Ikon]")
    @SerializeField() private prefIconCanvas: GameObject;
    @SerializeField() private iconPosition: Transform;
     
    // Acara Unity    
    @Header("[Acara 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();
    }
}
﻿
Alur skrip adalah sebagai berikut:
Perbarui()
Panggil fungsi kustom UpdateIconRotation() untuk memutar kanvas ikon agar sesuai dengan rotasi kamera.
OnTriggerEnter(), OnTriggerExit()
Ketika Anda memasuki area Collider dan mendeteksi pemicu, panggil fungsi kustom ShowIcon() untuk mengaktifkan ikon.
Ketika Anda keluar dari area collider, panggil fungsi kustom HideIcon() untuk menonaktifkan ikon.
﻿
3) Setelah menyelesaikan pembuatan skrip, tambahkan skrip ke objek DockPoint.
4) Tetapkan Kanvas Ikon Pref, Posisi Ikon dari inspector.
﻿
Contoh Layar Pengaturan Skrip
﻿
﻿
LANGKAH 4 - 2 : Interaksi Gesture
1) Buat Proyek > Buat > ZEPETO > TypeScript dan ganti namanya menjadi Interaksi Gesture.
2) Tulis skrip contoh seperti di bawah ini.
TypeScript
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(()=> {
            // Ketika ikon interaksi diklik
            this._interactionIcon.HideIcon();
            this.DoInteraction();
        });
    }
 
    private DoInteraction() {
        this._outPosition = this.transform.position;
 
        if (this.isSnapBone) {
            // Apakah tempat kosong
            if (this.allowOverlap || this.FindOtherPlayerNum() < 1) {
                this._localCharacter.SetGesture(this.animationClip);
                this.StartCoroutine(this.SnapBone());
                this.StartCoroutine(this.WaitForExit());
            } else {
                // Tempat duduk sudah penuh.
                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++;
            // Kalibrasi posisi selama 5 frame animasi.
            if (idx > 5) {
                return;
            }
        }
    }
 
    // Metode yang tepat harus melalui kode server, 
    // tetapi dihitung oleh klien lokal untuk optimasi server.
    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;
            }
        }
    }
}
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(()=> {
            // Ketika ikon interaksi diklik
            this._interactionIcon.HideIcon();
            this.DoInteraction();
        });
    }
 
    private DoInteraction() {
        this._outPosition = this.transform.position;
 
        if (this.isSnapBone) {
            // Apakah tempat kosong
            if (this.allowOverlap || this.FindOtherPlayerNum() < 1) {
                this._localCharacter.SetGesture(this.animationClip);
                this.StartCoroutine(this.SnapBone());
                this.StartCoroutine(this.WaitForExit());
            } else {
                // Tempat duduk sudah penuh.
                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++;
            // Kalibrasi posisi selama 5 frame animasi.
            if (idx > 5) {
                return;
            }
        }
    }
 
    // Metode yang tepat harus melalui kode server, 
    // tetapi dihitung oleh klien lokal untuk optimasi server.
    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;
            }
        }
    }
}
﻿
Alur skrip adalah sebagai berikut:
Mulai()
Ketika ikon diklik, itu dinonaktifkan dan memanggil fungsi kustom DoInteraction().
DoInteraction()
Jika isSnapBone dicentang,
Jika kursi kosong (allowOverlap dicentang, atau nilai kembalian fungsi kustom FindOtherPlayerNum() kurang dari 1)
Ambil gerakan yang ditugaskan ke animationClip.
Mulai Coroutine SnapBone() dan lampirkan bodyBone karakter ZEPETO ke targetTranform.
Mulai Coroutine WaitForExit().
Ketika karakter ZEPETO melompat atau bergerak, atau keluar dari area collider, batalkan gerakan dan aktifkan ikon.
Aktifkan ikon ketika kapasitas tempat duduk sudah penuh.
Jika isSnapBone tidak dicentang,
Ambil gerakan yang ditugaskan ke animationClip.
Mulai Coroutine WaitForExit().
﻿
3) Setelah menyelesaikan pembuatan skrip, tambahkan skrip ke objek DockPoint.
4) Tetapkan Klip Animasi, Apakah Snap Bone, Body Bone, dan Izinkan Overlap di inspector.
Tetapkan Klip Animasi. Ini adalah gestur yang harus diambil dengan interaksi.
Periksa Apakah SnapBone. Pastikan bahwa bagian yang ditetapkan ke body bone diposisikan sebagai DockPoint.
Tetapkan Body Bone ke Hips. Pastikan bahwa pinggul diposisikan di DockPoint karena ini akan menjadi gestur duduk.
Izinkan Overlap memungkinkan Anda menentukan apakah beberapa orang dapat duduk di satu kursi.
Contoh Pengaturan Skrip Layar
﻿
﻿
LANGKAH 5 : Main
Tombol akan muncul ketika karakter ZEPETO mendekati objek, dan menghilang ketika menjauh.
Jika gerakan yang Anda atur dimainkan saat mendekati dan berinteraksi dengan tombol, itu adalah keberhasilan.
Selain gerakan, berbagai peristiwa dapat diterapkan untuk terjadi setelah interaksi.
Berikut adalah contoh penerapan peristiwa yang menciptakan item setelah interaksi.
﻿
📘 Contoh Zepeto World - Contoh Interaksi Bab 3
https://github.com/naverz/zepeto-world-sample/tree/main/Assets/Chapter3﻿
﻿