[CreateJS] 동적으로 생성된 객체 참조하기

 

과거 플래시로 개발 했던 경험이 있다면

AnimateCC + CreatejS 조합에서도 비슷한 방식으로 개발하게 된다.

 

보통은 특정한 무비 클립을 만들어서 그 내부에 필요한 객체를 배치하고

인스턴스명까지 미리 적용된 상태에서 가져다 쓰게 된다.

이렇게 생성된 객체의 경우 그 내부의 자식들까지 접근이 잘 된다.

 

하지만 다음과 같이 동적으로 생성해서 

자식으로 붙여준 경우에는 해당 객체를 찾지 못한다.

화면에도 보이고 txt 자체도 로그로 찍히지만

txt 객체를 붙인 부모 객체에서는 찾지를 못한다.

    private testFnc(): void {
        const txt = new createjs.Text(
            'Create Text',
            "bold 38px 'HUGoth350'",
            '#000000'
        );
        txt.name = 'myTxt';
        console.log(txt) // --> a {_listeners: null, …}
        this.addChild(txt);

        console.log(this['myTxt']); // --> undefined
    }

 

플래시 액션스크립트로서 개발을 생각한다면 

이 코드에는 전혀 문제가 없다.

그래서 무엇이 문제인지 감도 잡지 못했다.

 

사실 이유는 정말 간단했다.

플래시와 다르게 동적으로 생성된 객체는 부모 객체에서 바로 참조가 되지 않는다.

배치된 무비클립의 경우는 퍼블리싱 과정에서

해당 자식들을 모두 속성으로 참조하도록 코드가 떨어진다.

 

하지만 위와 같이 동적으로 만들어서 붙인 경우에는

부모 클래스에는 해당 객체를 참조하는 속성이 자동으로 추가 되지 않는다. 

 

다음과 같이 수동으로 참조하도록 선언을 해줘야 한다.

 

    private testFnc(): void {
        const txt = new createjs.Text(
            'Create Text',
            "bold 38px 'HUGoth350'",
            '#000000'
        );
        txt.name = 'myTxt';
        console.log(txt);
        this.addChild(txt);

        this['myTxt'] = txt; // 참조하도록 선언

        console.log(this['myTxt']);
    }

 

다른 그래픽 라이브러리나 엔진에서 이런 경우는 못 봤다.

AnimateCC를 사용하기 때문에 생산성은 좋지만

이런점에서는 반쪽짜리 느낌은 지울수가 없다.