TS-LOG

프로그래밍/CreateJS

[CreateJS] Shape 주의점

Shape는 주로 도형을 그리거나 마스크 사용을 위해 사용된다.그래서 Container, MovieClip과 함께 가장 많이 사용되는 객체다.사용함에 있어 알게된 주의점들을 기록한다. 깊은 복사는 graphics 으로 해야 한다.Shape객체 자체로 clone()을 실행하면 깊은 복사가 아닌 얕은 복사가 일어난다.즉, maskShape는 drawShape를 참조하게 된다.그래서 drawShape.graphics.clear() 메서드를 호출하면 maskShape 역시 초기화 된다. 이런 문제점을 피하기 위해서는 깊은 복사(deep copy)가 되어야 하며,Shape의 graphics를 복제하면 깊은 복사가 된다. // 얕은 복사 this.maskShape = this.drawSha..

프로그래밍/CreateJS

[CreateJS] 9-SLICE / ScaleBitmap 사용하기

9 SLICE 란...?콘텐츠 개발시 이미지가 차지하는 용량은 무시할 수 없다.그래서 최소한의 크기로 다양한 크기를 대응하는 방법이 있는데바로 9-SLICE 다. 설명하면 이미지의 4개 부분(모서리)에 정의된 픽셀을 보호하고다른 5개 부분의 픽셀을 크기 조정하거나 반복하여 이미지 스케일링시깨짐을 방지 하는 것이다. 예를 들어 아래 이미지와 같은 400px의 길이를 가지고 있는 정사각형을600px로 늘린다면 어떻게 될까?우측처럼 모서리 부분이 뭉개지게 된다.하지만 9-SLICE 을 적용한다면 뭉개짐 없이 원하는 크기로 늘릴수가 있다. 이 기술은 2005년 FLASH 8 처음 도입되었고,지금은 언리얼, 유니티, 페이서 등에도 제공된다. CreateJS 에서 사용하려면?9-SLICE 는 AnimateCC(구 ..

프로그래밍/CreateJS

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

과거 플래시로 개발 했던 경험이 있다면AnimateCC + CreatejS 조합에서도 비슷한 방식으로 개발하게 된다. 보통은 특정한 무비 클립을 만들어서 그 내부에 필요한 객체를 배치하고인스턴스명까지 미리 적용된 상태에서 가져다 쓰게 된다.이렇게 생성된 객체의 경우 그 내부의 자식들까지 접근이 잘 된다. 하지만 다음과 같이 동적으로 생성해서 자식으로 붙여준 경우에는 해당 객체를 찾지 못한다.화면에도 보이고 txt 자체도 로그로 찍히지만txt 객체를 붙인 부모 객체에서는 찾지를 못한다. private testFnc(): void { const txt = new createjs.Text( 'Create Text', "bold 38px 'HUGoth35..

프로그래밍/CreateJS

[CreateJS] 마스크 적용하기

CreateJS는 애니메이트CC(구 플래시)에서 캔버스용으로 제작시 사용하는 라이브러리다.애니메이트CC 사용시에는 디폴트로 사용이 가능하고 따로 라이브러리만 가져와서 사용도 가능하다. 당연한 얘기지만 CreateJS는 클래스명이나 메서드는 액션 스크립트와 매우 비슷하다.그래서 액션스크립트에 익숙한 개발자라면 러닝 커브면에서 유리하다. 하지만 몇 기능들은 예상과 다르게 동작한다.그 중 하나가 마스크이다. 액션스크립트에서의 마스크 적용액션스크립트는에서는 마스크 적용은 보통 두개의 무비클립을 사용한다.하나는 마스크용, 다른 하나는 마스크를 적용하는 대상이다. 테스트를 위해 다음과 같이 무비클립을 배치했다.검정색 원의 인스턴스명은 mMask파란색 사각형의 인스턴스명은 mRect 이다. 액션스크립트를 실행하면 정..