송/수신하는 채팅 메세지 커스터마이즈하기

11 분

ZEPETO.Chat 패키지를 가져와서 보내고 받는 채팅 메시지를 사용자 정의할 수 있습니다.

❗️ 주의

이 기능은 멀티플레이어 요소가 구현된 월드에서 사용할 수 있습니다.

👍 참고용 포인트

편집기 환경에서도 채팅을 보내고 받을 수 있습니다.
사용자가 핸들러를 통해 생성한 채팅 메시지만 보내고 받을 수 있습니다 (빠른 채팅, 시스템 메시지는 받을 수 없습니다)

함수 정의

class ZepetoChat extends System.Object {
    public static get Instance(): ZepetoChatImplementation;
    public static get OnReceivedMessage(): UnityEngine_Events.UnityEvent$1<IMessage>;
    public constructor();
    public static Send($message: string): void;
}

ZepetoChat. Send()를 사용하여 채팅 창에 특정 메시지를 보낼 수 있습니다.
ZepetoChat.OnReceivedMessage.AddListener()를 사용하여 어떤 이벤트에서 메시지를 받을지 결정할 수 있습니다.

사용 예시

버튼 1과 2를 눌러 지정된 메시지를 전송하세요. 입력 필드에서 사용자 정의 메시지를 만들어 메시지를 전송하세요.

예시 설정

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Button, InputField, Text } from 'UnityEngine.UI';
import { ZepetoChat, MessageType, UserMessage } from 'ZEPETO.Chat';
import { Color } from 'UnityEngine';


export default class CustomChat extends ZepetoScriptBehaviour {

    public custom1ChatBtn: Button;
    public custom2ChatBtn: Button;
    public sendChatBtn: Button;
    public resultText: Text;
    public inputChatbox: InputField;

    Start() {
        // 버튼 클릭 시
        this.custom1ChatBtn.onClick.AddListener(() => {
            // 텍스트 색상 변경 
            this.resultText.color = Color.magenta;
            // 메시지 전송
            ZepetoChat.Send("1");
        });
        this.custom2ChatBtn.onClick.AddListener(() => {
            this.resultText.color = Color.blue;
            ZepetoChat.Send("2");
        });
        this.sendChatBtn.onClick.AddListener(() => {
            this.resultText.color = Color.black;
            const inputMsg = this.inputChatbox.text;
            ZepetoChat.Send(inputMsg);
        });

        // 메시지 수신
        ZepetoChat.OnReceivedMessage.AddListener(msg => {
            const userMsg = msg as UserMessage;
            this.resultText.text = `[USER - ${userMsg.userName}] - ${userMsg.message}`;
        });
    }
}

예시 실행 결과

채팅 버튼 활성화/비활성화

멀티플레이어 요소가 구현된 월드에서 사용할 수 있는 기능입니다.
모바일 테스트에서 확인할 수 있습니다.

선언

public static SetActiveChatUI($value: boolean): void;

예제 코드
- 특정 버튼을 눌러 채팅 버튼을 활성화/비활성화합니다.

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Button } from 'UnityEngine.UI';
import { ZepetoChat, MessageType, UserMessage } from 'ZEPETO.Chat';
 
export default class ChatController extends ZepetoScriptBehaviour {
 
    public chatUIBtn: Button;
    private isChatUIActive : boolean = true;
     
    Start() {
        // 버튼 클릭 시
        this.chatUIBtn.onClick.AddListener(() => {
            // 메시지 전송
            if (this.isChatUIActive) {
                ZepetoChat.SetActiveChatUI(false);
                this.isChatUIActive = false;
                console.log("채팅 UI 비활성화됨");
            }
            else {
                ZepetoChat.SetActiveChatUI(true);
                this.isChatUIActive = true;
                console.log("채팅 UI 활성화됨");
            }
        });
    }
}

필터링된 메시지 결정하기

멀티플레이어 요소가 구현된 월드에서 사용할 수 있는 기능입니다.
모바일 테스트에서 확인할 수 있습니다.

선언

public isFiltered: boolean;

예제 코드
- 수신된 채팅 메시지가 필터링된 메시지인지 확인하고 화면에 출력합니다.

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Text } from 'UnityEngine.UI';
import { ZepetoChat, MessageType, UserMessage } from 'ZEPETO.Chat';
 
export default class ChatController extends ZepetoScriptBehaviour {
 
    public filterResultText: Text;
     
    Start() {
        // Receive message
        ZepetoChat.OnReceivedMessage.AddListener(msg => {
            const userMsg = msg as UserMessage;
            if (userMsg.isFiltered) {
                this.filterResultText.text = `이 메시지는 필터링되었습니다 : ${userMsg.message}`;
            } else {
                this.filterResultText.text = `이 메시지는 필터링되지 않았습니다 : ${userMsg.message}`;
            }
        });
    }
}