TUTORIALS
물체와 인터렉션하는 월드를 만들어 봅니다.

6min
샘플 프로젝트
📘 강의에 사용된 프로젝트 파일
﻿https://github.com/naverz/zepeto-world-sample/tree/main/Assets/Chapter3﻿
요약
요약
사용자가 가까이에 다가갔을 때 나타나는 상호작용 버튼을 구현해 봅니다.
난이도
초급
소요 시간
30분
﻿
프로젝트 목표
UI와 트리거를 응용한 상호작용 버튼 컨트롤
월드 스페이스 캔버스
캐릭터 애니메이션 적용
오브젝트 인스턴스 생성
확률 랜덤 코드 적용
﻿
🎬 완성 월드 영상
﻿
﻿
스크립트
CharacterController.ts
import { ZepetoScriptBehaviour } from 'ZEPETO.Script'
import { SpawnInfo, ZepetoPlayers, LocalPlayer, ZepetoCharacter } from 'ZEPETO.Character.Controller'
import { WorldService } from 'ZEPETO.World';
export default class CharacterController extends ZepetoScriptBehaviour {
    Start() {
        //사용자 ID를 가져옵니다 (편집기를 통해 로그인됨)
        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId,new SpawnInfo(), true);
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            let _player : LocalPlayer = ZepetoPlayers.instance.LocalPlayer;
        });
    }
}               
import { ZepetoScriptBehaviour } from 'ZEPETO.Script'
import { SpawnInfo, ZepetoPlayers, LocalPlayer, ZepetoCharacter } from 'ZEPETO.Character.Controller'
import { WorldService } from 'ZEPETO.World';
export default class CharacterController extends ZepetoScriptBehaviour {
    Start() {
        //사용자 ID를 가져옵니다 (편집기를 통해 로그인됨)
        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId,new SpawnInfo(), true);
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            let _player : LocalPlayer = ZepetoPlayers.instance.LocalPlayer;
        });
    }
}               
﻿
Interaction.ts
import { Canvas, AnimationClip, WaitForSeconds, GameObject, Object, Random } from 'UnityEngine';
import { Button } from 'UnityEngine.UI';
import { ZepetoPlayers, ZepetoCharacter } from 'ZEPETO.Character.Controller';
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';

// 경로에서 사용자 정의 스크립트 가져오기
import UIController from './UIController';

export default class Interaction extends ZepetoScriptBehaviour 
{
    public openUIGesture: Button;
    public interactionCanvas: Canvas;
    public animationClip: AnimationClip;
    public uiControllerObject: GameObject;
    public badEffectFactory: GameObject;
    public goodEffectFactory: GameObject;
    public gift: GameObject;
    public failureRatio: number = 50;
    
    private uiController: UIController;
    private zepetoCharacter :ZepetoCharacter;

    Start() 
    {    
        // EventCamera 설정 
        this.interactionCanvas.worldCamera = ZepetoPlayers.instance.ZepetoCamera.camera;
        // 캐릭터 설정
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this.zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
        });
        // 스크립트 가져오기
        this.uiController = this.uiControllerObject.GetComponent<UIController>();
        
        // 버튼 숨기기
        this.openUIGesture.gameObject.SetActive(false);
        
        // 버튼 클릭 시
        this.openUIGesture.onClick.AddListener(()=>{
            this.zepetoCharacter.SetGesture(this.animationClip);
            this.StartCoroutine(this.FirstRoutine());         
        });
    }
    
    OnTriggerEnter(collider)
    {
        this.openUIGesture.gameObject.SetActive(true);
    }
    OnTriggerExit(collider)
    {
        this.openUIGesture.gameObject.SetActive(false);
    }
    
    *FirstRoutine() 
    {
        this.uiController.Loading();
        yield new WaitForSeconds(3);
        this.zepetoCharacter.CancelGesture();
        this.RandomCalculation();
    }

    private RandomCalculation()
    {
        let randomNumber: number;
        randomNumber = Random.Range(0,100);
        if (randomNumber <= this.failureRatio)
        {
            this.Lose();
        }
        else
        {
            this.Win();
        }
        this.StartCoroutine(this.SecondRoutine());
    }

    private Lose()
    {
        this.uiController.Lose();
        // 게임 오브젝트 생성
        var obj = Object.Instantiate(this.badEffectFactory) as GameObject;
        obj.transform.position = this.transform.position;
    }

    private Win()
    {
        this.uiController.Win();
        // 게임 오브젝트 생성
        var obj = Object.Instantiate(this.goodEffectFactory) as GameObject;
        obj.transform.position = this.transform.position;
        var giftobj = Object.Instantiate(this.gift) as GameObject;
        giftobj.transform.position = this.transform.position;
    }

    *SecondRoutine()
    {
        yield new WaitForSeconds(1);
        this.uiController.Init();
        // 박스 파괴
        GameObject.Destroy(this.gameObject);
    }
}
import { Canvas, AnimationClip, WaitForSeconds, GameObject, Object, Random } from 'UnityEngine';
import { Button } from 'UnityEngine.UI';
import { ZepetoPlayers, ZepetoCharacter } from 'ZEPETO.Character.Controller';
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';

// 경로에서 사용자 정의 스크립트 가져오기
import UIController from './UIController';

export default class Interaction extends ZepetoScriptBehaviour 
{
    public openUIGesture: Button;
    public interactionCanvas: Canvas;
    public animationClip: AnimationClip;
    public uiControllerObject: GameObject;
    public badEffectFactory: GameObject;
    public goodEffectFactory: GameObject;
    public gift: GameObject;
    public failureRatio: number = 50;
    
    private uiController: UIController;
    private zepetoCharacter :ZepetoCharacter;

    Start() 
    {    
        // EventCamera 설정 
        this.interactionCanvas.worldCamera = ZepetoPlayers.instance.ZepetoCamera.camera;
        // 캐릭터 설정
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this.zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
        });
        // 스크립트 가져오기
        this.uiController = this.uiControllerObject.GetComponent<UIController>();
        
        // 버튼 숨기기
        this.openUIGesture.gameObject.SetActive(false);
        
        // 버튼 클릭 시
        this.openUIGesture.onClick.AddListener(()=>{
            this.zepetoCharacter.SetGesture(this.animationClip);
            this.StartCoroutine(this.FirstRoutine());         
        });
    }
    
    OnTriggerEnter(collider)
    {
        this.openUIGesture.gameObject.SetActive(true);
    }
    OnTriggerExit(collider)
    {
        this.openUIGesture.gameObject.SetActive(false);
    }
    
    *FirstRoutine() 
    {
        this.uiController.Loading();
        yield new WaitForSeconds(3);
        this.zepetoCharacter.CancelGesture();
        this.RandomCalculation();
    }

    private RandomCalculation()
    {
        let randomNumber: number;
        randomNumber = Random.Range(0,100);
        if (randomNumber <= this.failureRatio)
        {
            this.Lose();
        }
        else
        {
            this.Win();
        }
        this.StartCoroutine(this.SecondRoutine());
    }

    private Lose()
    {
        this.uiController.Lose();
        // 게임 오브젝트 생성
        var obj = Object.Instantiate(this.badEffectFactory) as GameObject;
        obj.transform.position = this.transform.position;
    }

    private Win()
    {
        this.uiController.Win();
        // 게임 오브젝트 생성
        var obj = Object.Instantiate(this.goodEffectFactory) as GameObject;
        obj.transform.position = this.transform.position;
        var giftobj = Object.Instantiate(this.gift) as GameObject;
        giftobj.transform.position = this.transform.position;
    }

    *SecondRoutine()
    {
        yield new WaitForSeconds(1);
        this.uiController.Init();
        // 박스 파괴
        GameObject.Destroy(this.gameObject);
    }
}
﻿
UIController.ts
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Text } from "UnityEngine.UI";
import { GameObject } from 'UnityEngine';

//변수를 정의합니다
export default class UIController extends ZepetoScriptBehaviour
{
    public messageUI: Text;

    Start()
    {
        this.Init();
    }
    
    public Init() 
    {
        this.messageUI.text = " ";
    }

    public Loading()
    {
        this.messageUI.text = "상자 안에 무엇이 있나요?";
    }

    public Win()
    {
        this.messageUI.text = "축하합니다! 당신이 얻었습니다";
    }

    public Lose()
    {
        this.messageUI.text = "빈 공간입니다";
    }

}
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Text } from "UnityEngine.UI";
import { GameObject } from 'UnityEngine';

//변수를 정의합니다
export default class UIController extends ZepetoScriptBehaviour
{
    public messageUI: Text;

    Start()
    {
        this.Init();
    }
    
    public Init() 
    {
        this.messageUI.text = " ";
    }

    public Loading()
    {
        this.messageUI.text = "상자 안에 무엇이 있나요?";
    }

    public Win()
    {
        this.messageUI.text = "축하합니다! 당신이 얻었습니다";
    }

    public Lose()
    {
        this.messageUI.text = "빈 공간입니다";
    }

}
﻿
﻿
요약	사용자가 가까이에 다가갔을 때 나타나는 상호작용 버튼을 구현해 봅니다.
난이도	초급
소요 시간	30분
업데이트됨 11 Oct 2024
이 페이지가 도움이 되었습니까?
아이템 먹기 월드를 만들어 봅니다.
멀티플레이 제작하기