네트워크: 보물찾기(4) 모바일 Gecomponent가 Null 되는 현상을 ‘싱글톤’으로 해결

1. 모바일에서만 Getcomponent가 먹통이 되는 문제

지난 번에 원하는 메소드(showscore)가 들어있는 오브젝트(UI)의 제페토 스크립트(UI)로 인스턴스를 만들고, Getcomponent로 오브젝트를 찾아 메소드(showsScore)를 호출하는 기능을 구현하는데까지 성공했다.

let ui: UI = GameObject.Find("UI").GetComponent<UI>();
ui.showScore(result.rankInfo.myRank.score);

하지만, 위 코드는 PC에서만 제대로 작동하고 모바일에서는 아무런 출력도 발생하지 않는 문제가 발견되었다.

3일 동안 여러가지 시도도 해보고 리서칭한 끝에 아래와 같이

모바일에서 Zepeto 스크립트의 Getcomponent가 현재까지 제대로 작동하지 않음. 하지만, 싱글톤을 이용하여 우외하여 접근할 수는 있음.

알게 되었다.

2. ‘싱글톤’이란?

싱글톤의 싱글톤 패턴이란, 하나의 인스턴스만 생성하요 사용하는 디자인 패턴이다.

보통 C#에서는 Static 으로 프로그램에서 유일하며, 스크립트의 이름으로 쉽게 공유할 수 있게 선언하여 사용했었다.

하지만, Typescript 는 C#의 Static 처럼 간단히 정의하여 사용할 수 없음을 발견하여 절망하던 중, 아래 링크에서 원하는 메소드가 들어있는 제페토 스크립트를 싱글톤으로 선언해서 사용하는 방법을 알게 되었다.

참고 링크: https://github.com/naverz/zepeto-studio-kor/discussions/504

3. 구현 방법

(1) StaticUI 스크립트를 포함한 게임오브젝트(UI)를 생성한다.

(2) 아래와 같이 StaticUI 스크립트를 작성하여, StaticUI를 static 싱글톤으로 선언한다.

[StaticUI.ts]

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

// 참고1 : https://github.com/naverz/zepeto-studio-kor/discussions/215
// 참고2 : https://github.com/naverz/zepeto-studio-kor/discussions/806
// 참고3 : https://github.com/naverz/zepeto-studio-kor/discussions/504

export default class StaticUI extends ZepetoScriptBehaviour {

    public txt: Text;

    private static instance: StaticUI; 

    // 타 오브젝트에서 StaticUI.Instance()로 StaticUI 스크립트를 불러올 수 있음
    public static get Instance(): StaticUI
    {
        if(this.instance == null) {
            this.instance = GameObject.FindObjectOfType<StaticUI>();
        }
        return this.instance;
    }

    showScore(score: string) {
        this.txt.text = score;
    }
}

(3) StaticUI.ts 의 showScore() 메소드를 호출하기 위해, 호출하기 원하는 영역에 아래와 같이 코드를 작성한다.

[tressureHit.ts]

    OnResult(result: GetRangeRankResponse) {
        let msg : string = ``;
        if (result.rankInfo.rankList) {
            for (let i = 0; i < result.rankInfo.rankList.length; ++i) {
                var rank = result.rankInfo.rankList.get_Item(i);
                
                msg += `i: ${i}, rank: ${rank.rank}, score: ${rank.score}, name: ${rank.name}\n`;                         
                
                // StaticUI의 showScore() 메소드 호출
                StaticUI.Instance.showScore(msg);
            }
        }
    }

4. 구현 결과