로컬 플레이어 의상 갈아입기

15min
로컬 플레이어의 의상을 소유한 의상으로 변경할 수 있습니다.
ZEPETO.Character.Controller 1.11.3 이상 버전을 설치해야 합니다.
SetCostume API 사용하기
메서드
API
설명
SetCostume($itemCode: string, $complete?: System.Action):void;
로컬 플레이어의 의상을 변경하기 위해 아이템 코드(아이템 ID)를 인수 값으로 입력합니다. 의상 변경이 완료되면 콜백을 받습니다.
﻿
로컬 플레이어 의상 변경 예제
로컬 플레이어의 의상을 SetCostume().
장면이 시작될 때 로컬 플레이어를 생성하고, 로컬 플레이어가 생성될 때 특정 아이템 코드로 의상을 변경하는 예제 코드입니다.
1) ZEPETO > Typescript를 추가하고 스크립트 이름을 ChangeLocalPlayerCostume으로 설정합니다.
아래와 같이 샘플 스크립트를 작성합니다.
ChangeLocalPlayerCostume.ts
import { SpawnInfo, ZepetoPlayers } from 'ZEPETO.Character.Controller';
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { WorldService } from 'ZEPETO.World';

export default class ChangeLocalPlayerCostume extends ZepetoScriptBehaviour {

    public itemCode: string;

    // 장면이 시작될 때, 제공된 사용자 ID로 플레이어를 생성하고 의상을 변경합니다.
    Start() {
        
        // 지정된 사용자 ID로 새 플레이어를 생성합니다.
        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true);

        // 로컬 플레이어가 추가될 때 트리거되는 OnAddedLocalPlayer 이벤트에 리스너를 추가합니다.
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {

            // 제공된 아이템 코드로 ChangeCostume 메서드를 호출하여 의상을 변경합니다.
            this.ChangeCostume(this.itemCode);
        });
    }

    // 제공된 아이템 코드를 사용하여 로컬 플레이어의 의상을 변경하는 메서드입니다.
    ChangeCostume(itemCode: string) {

        // LocalPlayer 속성을 사용하여 로컬 플레이어 인스턴스에 접근하고 제공된 아이템 코드로 의상을 설정합니다.
        ZepetoPlayers.instance.LocalPlayer.SetCostume(itemCode, () => {
            // 의상 변경이 완료되면 성공적인 변경을 나타내는 메시지를 로그에 기록합니다.
            console.log(`의상 설정 완료 : ${itemCode}`);
        });
    }
}
import { SpawnInfo, ZepetoPlayers } from 'ZEPETO.Character.Controller';
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { WorldService } from 'ZEPETO.World';

export default class ChangeLocalPlayerCostume extends ZepetoScriptBehaviour {

    public itemCode: string;

    // 장면이 시작될 때, 제공된 사용자 ID로 플레이어를 생성하고 의상을 변경합니다.
    Start() {
        
        // 지정된 사용자 ID로 새 플레이어를 생성합니다.
        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true);

        // 로컬 플레이어가 추가될 때 트리거되는 OnAddedLocalPlayer 이벤트에 리스너를 추가합니다.
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {

            // 제공된 아이템 코드로 ChangeCostume 메서드를 호출하여 의상을 변경합니다.
            this.ChangeCostume(this.itemCode);
        });
    }

    // 제공된 아이템 코드를 사용하여 로컬 플레이어의 의상을 변경하는 메서드입니다.
    ChangeCostume(itemCode: string) {

        // LocalPlayer 속성을 사용하여 로컬 플레이어 인스턴스에 접근하고 제공된 아이템 코드로 의상을 설정합니다.
        ZepetoPlayers.instance.LocalPlayer.SetCostume(itemCode, () => {
            // 의상 변경이 완료되면 성공적인 변경을 나타내는 메시지를 로그에 기록합니다.
            console.log(`의상 설정 완료 : ${itemCode}`);
        });
    }
}
﻿
스크립트 설명
이 스크립트는 주어진 아이템 코드에 따라 로컬 플레이어의 의상을 변경합니다.
장면이 시작되면, 지정된 사용자 ID로 플레이어를 생성하고 CreatePlayerWithUserId() 함수를 사용합니다.
로컬 플레이어가 추가될 때 해당 이벤트가 트리거되도록 OnAddedLocalPlayer 이벤트 리스너가 추가되며, ChangeCostume() 메서드가 호출되어 의상이 변경됩니다.
LocalPlayer 속성을 통해 로컬 플레이어 인스턴스에 접근하고 제공된 아이템 코드를 사용하여 의상을 변경합니다. 의상 변경이 완료되면, Set Costume Complete 메시지가 기록되어 성공적인 변경을 나타냅니다.
﻿
📘 아이템 ID를 확인하는 방법에 대한 마네킹 가이드를 참조하십시오. [ZEPETO 마네킹﻿]
﻿
2) [▶︎(재생)] 버튼을 눌러 실행하면 입력한 아이템 코드에 따라 의상이 변경된 로컬 플레이어가 생성되는 것을 볼 수 있습니다.
﻿
의상 변경 전(왼쪽), 의상 변경 후(오른쪽)
﻿
아이템이 정기 상품인 경우, 만료 여부를 확인한 후 착용됩니다. 만료된 아이템에 대해서는 다음과 같은 오류 로그가 호출됩니다: 만료된 아이템이 호출됩니다.
아이템이 Zem 유료 상품인 경우, 로컬 플레이어가 소유하고 있는지 확인한 후 착용됩니다. 소유하지 않은 아이템에 대해서는 다음과 같은 오류 로그가 호출됩니다: 아이템 코드 없음이 호출됩니다.
﻿
﻿
아이템 목록 로딩 및 의상 변경 예시.
사용자가 소유한 아이템에 대한 정보를 제공하는 GetMyItemListAsync(), 를 활용하여 의상 아이템 목록을 가져올 수 있습니다.
다음 예시는 로컬 플레이어가 소유한 의상을 화면에 표시하고 선택하여 의상을 변경할 수 있도록 하는 방법을 보여줍니다.
﻿
1단계. 의상 목록 UI 생성
먼저, 의상 목록의 썸네일과 이름이 표시될 UI 목록 리소스를 생성합니다. 제작해야 할 리소스는 다음과 같습니다:
1단계-1. 아이템 프리팹 생성
로컬 플레이어가 소유한 의상 목록을 로딩한 후, UI에서 아이템 목록을 생성합니다. 아이템 프리팹은 생성되는 각 아이템 목록의 소스 역할을 합니다.
아이템 프리팹이 생성되면, 썸네일과 아이템 이름이 UI에 표시됩니다.
아이템 프리팹은 다음 요소를 포함합니다.
Button_thumbnail 객체: 이 객체는 아이템의 썸네일 이미지를 표시하기 위해 Raw Image 구성 요소와 Button 구성 요소가 등록된 객체입니다.
Text_name 객체: 아이템 이름이 표시될 Text 구성 요소 객체입니다.
﻿
﻿
1-2단계. 캔버스 설정
캔버스는 아이템 프리팹이 생성될 때 표시되는 UI 화면입니다. 많은 아이템 목록을 가져올 수 있도록 이 캔버스 안에 스크롤 뷰를 만드는 것이 좋습니다.
캔버스 안의 스크롤 뷰 객체는 다음과 같이 설정됩니다.
스크롤 뷰 객체는 수직 스크롤만 허용하도록 설정됩니다.
콘텐츠 객체는 다음 구성 요소를 설정합니다:
그리드 레이아웃 그룹:
셀 크기 : x: 150, Y: 150
제약 조건 : 고정 열 수
제약 수 : 5
﻿
﻿
2단계. 아이템 목록을 로드하고 의상을 변경하는 스크립트
단계 2-1. 스크립트 작성하기
ZEPETO 추가 > Typescript로 스크립트 이름을 MyItemList로 변경합니다.
아래와 같이 샘플 스크립트를 작성합니다.
MyItemList.ts
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { ShopService, ItemKeyword } from 'ZEPETO.Module.Shop';
import { ZepetoPropertyFlag } from 'Zepeto';
import { GameObject, Object, RectTransform, Texture2D, Transform, WaitUntil } from 'UnityEngine';
import { Button, LayoutRebuilder, RawImage, Text } from 'UnityEngine.UI';
import { SpawnInfo, ZepetoPlayers } from 'ZEPETO.Character.Controller';
import { WorldService } from 'ZEPETO.World';
import { Item } from 'ZEPETO.Module.Content';

export default class CheckMyItemList extends ZepetoScriptBehaviour {

    public itemPrefab: GameObject;
    public itemCanvas: Transform;

    // 장면이 시작될 때, 제공된 사용자 ID로 플레이어를 생성하고 아이템을 가져와서 표시합니다.
    Start() {
        // 지정된 사용자 ID로 새 플레이어를 생성합니다.
        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true);

        // 로컬 플레이어가 추가될 때 트리거되는 OnAddedLocalPlayer 이벤트에 리스너를 추가합니다.
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            // 아이템을 가져오고 표시하기 위해 CoGetMyItem 코루틴을 시작합니다.
            this.StartCoroutine(this.CoGetMyItem());
        });
    }

    // 아이템을 가져오고 표시하는 코루틴입니다.
    *CoGetMyItem() {
        // "all" 키워드와 필터 없이 아이템 목록을 요청합니다.
        var requestItemList = ShopService.GetMyContentItemListAsync(ItemKeyword.all, null);

        // 요청이 완료될 때까지 기다립니다.
        yield new WaitUntil(() => requestItemList.keepWaiting == false);

        if (requestItemList.responseData.isSuccess) {
            let contentItems: Item[] = requestItemList.responseData.items;

            console.log(contentItems.length);

            for (let i = 0; i < contentItems.length; ++i) {
                const property: ZepetoPropertyFlag = contentItems[i].property;

                // 아이템의 썸네일 텍스처를 요청합니다.
                var textureReq = contentItems[i].GetThumbnailAsync();
                yield new WaitUntil(() => textureReq.keepWaiting == false);
                let thumbnailTexture: Texture2D = textureReq.responseData.texture;

                // 아이템 프리팹을 인스턴스화하고 속성을 설정합니다.
                const item = Object.Instantiate(this.itemPrefab, this.itemCanvas) as GameObject;
                item.GetComponentInChildren<RawImage>().texture = thumbnailTexture;
                item.GetComponentInChildren<Text>().text = contentItems[i].id;

                // 클릭 시 의상을 변경하는 아이템 버튼에 클릭 리스너를 추가합니다.
                item.GetComponentInChildren<Button>().onClick.AddListener(() => {
                    this.SetItemButton(contentItems[i].id);
                });
            }
        }

        // UI 요소의 적절한 위치 지정을 보장하기 위해 레이아웃을 강제로 재구성합니다.
        const rect = this.itemCanvas.gameObject.GetComponent<RectTransform>();
        LayoutRebuilder.ForceRebuildLayoutImmediate(rect);
    }

    // 제공된 아이템 코드에 따라 로컬 플레이어의 의상을 변경하는 메서드입니다.
    SetItemButton(itemCode: string) {
        // ZepetoPlayers.instance.LocalPlayer 속성을 사용하여 로컬 플레이어 인스턴스에 접근하고 의상을 변경합니다.
        ZepetoPlayers.instance.LocalPlayer.SetCostume(itemCode, () => {
            // 의상 변경이 완료되면 성공적인 변경을 나타내는 메시지를 로그에 기록합니다.
            console.log(`의상 설정 완료 : ${itemCode}`);
        });
    }

}
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { ShopService, ItemKeyword } from 'ZEPETO.Module.Shop';
import { ZepetoPropertyFlag } from 'Zepeto';
import { GameObject, Object, RectTransform, Texture2D, Transform, WaitUntil } from 'UnityEngine';
import { Button, LayoutRebuilder, RawImage, Text } from 'UnityEngine.UI';
import { SpawnInfo, ZepetoPlayers } from 'ZEPETO.Character.Controller';
import { WorldService } from 'ZEPETO.World';
import { Item } from 'ZEPETO.Module.Content';

export default class CheckMyItemList extends ZepetoScriptBehaviour {

    public itemPrefab: GameObject;
    public itemCanvas: Transform;

    // 장면이 시작될 때, 제공된 사용자 ID로 플레이어를 생성하고 아이템을 가져와서 표시합니다.
    Start() {
        // 지정된 사용자 ID로 새 플레이어를 생성합니다.
        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true);

        // 로컬 플레이어가 추가될 때 트리거되는 OnAddedLocalPlayer 이벤트에 리스너를 추가합니다.
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            // 아이템을 가져오고 표시하기 위해 CoGetMyItem 코루틴을 시작합니다.
            this.StartCoroutine(this.CoGetMyItem());
        });
    }

    // 아이템을 가져오고 표시하는 코루틴입니다.
    *CoGetMyItem() {
        // "all" 키워드와 필터 없이 아이템 목록을 요청합니다.
        var requestItemList = ShopService.GetMyContentItemListAsync(ItemKeyword.all, null);

        // 요청이 완료될 때까지 기다립니다.
        yield new WaitUntil(() => requestItemList.keepWaiting == false);

        if (requestItemList.responseData.isSuccess) {
            let contentItems: Item[] = requestItemList.responseData.items;

            console.log(contentItems.length);

            for (let i = 0; i < contentItems.length; ++i) {
                const property: ZepetoPropertyFlag = contentItems[i].property;

                // 아이템의 썸네일 텍스처를 요청합니다.
                var textureReq = contentItems[i].GetThumbnailAsync();
                yield new WaitUntil(() => textureReq.keepWaiting == false);
                let thumbnailTexture: Texture2D = textureReq.responseData.texture;

                // 아이템 프리팹을 인스턴스화하고 속성을 설정합니다.
                const item = Object.Instantiate(this.itemPrefab, this.itemCanvas) as GameObject;
                item.GetComponentInChildren<RawImage>().texture = thumbnailTexture;
                item.GetComponentInChildren<Text>().text = contentItems[i].id;

                // 클릭 시 의상을 변경하는 아이템 버튼에 클릭 리스너를 추가합니다.
                item.GetComponentInChildren<Button>().onClick.AddListener(() => {
                    this.SetItemButton(contentItems[i].id);
                });
            }
        }

        // UI 요소의 적절한 위치 지정을 보장하기 위해 레이아웃을 강제로 재구성합니다.
        const rect = this.itemCanvas.gameObject.GetComponent<RectTransform>();
        LayoutRebuilder.ForceRebuildLayoutImmediate(rect);
    }

    // 제공된 아이템 코드에 따라 로컬 플레이어의 의상을 변경하는 메서드입니다.
    SetItemButton(itemCode: string) {
        // ZepetoPlayers.instance.LocalPlayer 속성을 사용하여 로컬 플레이어 인스턴스에 접근하고 의상을 변경합니다.
        ZepetoPlayers.instance.LocalPlayer.SetCostume(itemCode, () => {
            // 의상 변경이 완료되면 성공적인 변경을 나타내는 메시지를 로그에 기록합니다.
            console.log(`의상 설정 완료 : ${itemCode}`);
        });
    }

}
﻿
스크립트 설명
시작 메서드에서 새로운 플레이어가 ZepetoPlayers.instance.CreatePlayerWithUserId()를 사용하여 생성됩니다.CoGetMyItem() 코루틴은 로컬 플레이어가 추가될 때 실행됩니다.
이 CoGetMyItem() 코루틴은 ShopService.GetMyContentItemListAsync()를 사용하여 플레이어가 소유한 아이템 목록을 검색합니다.
모든 카테고리의 모든 아이템 목록을 ItemKeyword.all을 통해 요청합니다. 요청이 완료될 때까지 기다립니다: yield new WaitUntil(() => requestItemList.keepWaiting == false).
요청이 성공하면 requestItemList.responseData.isSuccess, 아이템 목록을 반복하여 contentItems을 가져오고 각 아이템의 썸네일 이미지를 GetThumbnailAsync().
제공된 itemPrefab을 사용하여 각 아이템에 대한 UI 요소를 생성하고, 썸네일 이미지와 ID를 설정합니다. 각 아이템에 대한 버튼이 생성되며, SetItemButton()을 호출하도록 설정됩니다.
이 SetItemButton() 메서드는 아이템과 연결된 버튼이 클릭될 때 호출됩니다.
선택한 아이템을 플레이어의 캐릭터 의상으로 적용합니다: ZepetoPlayers.instance.LocalPlayer.SetCostume().
의상이 성공적으로 변경되면, 다음과 같은 로그 메시지가 표시됩니다: 의상 설정 완료과 함께 아이템 코드가 표시됩니다.
﻿
📘 팁
사용자의 아이템 정보를 확인하는 방법에 대한 다음 가이드를 참조하십시오 ShopService.GetMyContentItemListAsync(). [사용자가 보유한 아이템 정보 가져오기﻿]
사용자가 소유한 아이템을 검색할 때, ItemKeyword를 사용하여 카테고리별로 검색하고 UI에 목록으로 표시할 수 있습니다.
﻿
❗️ 주의
다음에서 검색된 의류 목록은 ShopService.GetMyContentItemListAsync() 만료된 기간 한정 제품을 포함합니다. 따라서 만료된 항목 오류 로그를 호출할 수 있습니다.
﻿
STEP 2-2. MyItemList 검사기 설정
1단계에서 생성된 itemPrefab을 MyItemList가 적용된 구성 요소의 Item Prefab에 등록하고, itemCanvas에 Canvas를 등록합니다.
﻿
﻿
3단계. 실행
재생 버튼을 눌러 실행하면, 캔버스 UI에 로컬 플레이어가 소유한 아이템 목록이 표시되며, 선택할 때 해당 의상으로 변경되는 것을 볼 수 있습니다.
﻿
﻿
❗️ 주의
이 의상 착용 API는 로컬 플레이어에게만 적용되며 현재 멀티플레이어 동기화를 지원하지 않습니다.
의상 멀티플레이어 동기화는 향후 제공될 예정입니다.
﻿
API	설명
SetCostume($itemCode: string, $complete?: System.Action):void;	로컬 플레이어의 의상을 변경하기 위해 아이템 코드(아이템 ID)를 인수 값으로 입력합니다. 의상 변경이 완료되면 콜백을 받습니다.
업데이트됨 11 Oct 2024
이 페이지가 도움이 되었습니까?
ZEPETO.Character.Controller - Deprecated Declarations
ZEPETO 캐릭터를 기본 체형으로 변경하는 API