[CreateJS] 마스크 적용하기

천둥상어

2024. 9. 10. 23:04

CreateJS는 애니메이트CC(구 플래시)에서 캔버스용으로 제작시 사용하는 라이브러리다.
애니메이트CC 사용시에는 디폴트로 사용이 가능하고 따로 라이브러리만 가져와서 사용도 가능하다.

당연한 얘기지만 CreateJS는 클래스명이나 메서드는 액션 스크립트와 매우 비슷하다.
그래서 액션스크립트에 익숙한 개발자라면 러닝 커브면에서 유리하다.

하지만 몇 기능들은 예상과 다르게 동작한다.
그 중 하나가 마스크이다.

액션스크립트에서의 마스크 적용

액션스크립트는에서는 마스크 적용은 보통 두개의 무비클립을 사용한다.
하나는 마스크용, 다른 하나는 마스크를 적용하는 대상이다.

테스트를 위해 다음과 같이 무비클립을 배치했다.
검정색 원의 인스턴스명은 mMask
파란색 사각형의 인스턴스명은 mRect 이다.

액션스크립트를 실행하면 정상적으로 마스크가 적용된다.

mRect.mask = mMask

CreateJS에서 마스크 적용

// 마스크 적용
this.mRect.mask = this.mMask;

위에서도 언급했지만
CreateJS의 메서드는 액션스크립트와 거의 유사하다.
그래서 마스크 명령어도 동일하다.
하지만 결과는 그렇지가 않다.
mMask는 사라지고 mRect에는 마스크가 전혀 적용되지 않았다.

"그렇다면 CreateJS 에서 마스크 적용은 어떻게 할까?"

CreateJS 에서 마스크는 Shape 객체여야 한다.
CreateJS에서 Shape는 도형 객체이다.

애니메이트CC에서 사각형이나 원형 도구로 그려진
도형이 이에 해당된다.

마스킹용 Shape 객체 만들어서 적용하기

기존이 mMask 무비클립을 안내선 처리하고
동일한 위치와 크기로 코드로 작성하여 적용해 보자.
마스크가 정상적으로 적용된다.

// Shape 생성, 배치
const mMask = new createjs.Shape();
mMask.graphics.beginFill("black").drawCircle(220,150,100);

// 마스크 적용
this.mRect.mask = mMask;

무비클립의 Shape 객체로 마스킹 적용하기

모양이 단순하다면 Shape 객체를 코드로 작성해서 적용하면 된다.
하지만 CreateJS를 사용하는 가장 큰 이유중 하나는
애니메이트CC를 활용한 그래픽 작업 때문이다.
즉, 코드로 구현하기 힘든 도형을 쉽게 그려서 마스크로 사용할 수 있다.

그리고 이렇게 배치된 마스크용 객체를 제어하기 위해서는
무비클립으로 감싸져야 하고 인스턴스가 할당되어야 한다.

방법은 간단하다.
무비클립안에 그려진 도형은 Shape 자식 객체이다.
무비클립의 자식으로 접근해 할당 받으면 된다.

// mMask 감추기
this.mMask.visible = false;

// mRect 자식 참조
const shape = this.mMask.getChildAt(0);
shape.x = this.mMask.x + shape.x;
shape.y = this.mMask.y + shape.y;


// 마스크 적용
this.mRect.mask = shape;

참조한 Shape 좌표를 mMask 좌표에 더해줘야
mMask 배치 기준으로 동일한 위치가 된다.
마스크용으로 생성한 mMask 자체는 마스크가
아니므로 숨김 처리 해준다.

타임라인을 활용한 마스크 적용

번외로 타임라인마다 마스크 모양을 다르게 해서
원하는 키프레임으로 이동하면 적용이 될까?

1프레임은 기존의 원 모양이고
2프레임에 이미지와 같이 도형을 그렸다.
다음과 같이 코드를 적용해 본다.
(레이어_2에 있는 프레임 코드 내용은 this.stop())

// mMask 감추기
this.mMask.visible = false;

// mRect 자식 참조
this.mMask.gotoAndStop(1);
const shape = this.mMask.getChildAt(0);
shape.x = this.mMask.x + shape.x;
shape.y = this.mMask.y + shape.y;


// 마스크 적용
this.mRect.mask = shape;

액션스크립트와 다른점은 프레임 시작이 1이 아닌 0부터다.
그래서 2프레임이 아닌 1프레임으로 이동시킨다.

결과는 잘 적용된다.

결론

CreateJS에서 마스크는 Shape 객체여야 한다.
과거 플래시처럼 타임라인을 활용한 순차적인 마스크 적용이 가능하다.

무비클립에 마스크를 적용할 수는 없는 점은 불편하지만
위와 같은 방법으로 충분히 잘 사용할 수 있다.

그리고 주의점이 있다.

만약 2번째 프레임과 같은 모양을 코드로 구현한다면

drawRect()를 네번 호출해서 사각형을 그리면 된다.

이때 사각형을 그리고 나면 closePath() 처리를 꼭 해줘야한다.

그렇지 않으면 거리가 가깝거나 겹치는 경우

이전 사각형의 패스와 연결되어 다른 모양이 된다.

저작자표시 비영리 변경금지

TS-LOG