[App 개발] 마스크 이미지를 이용한 애니메이션
본문
지난 예제에서 한 번 비트맵 데이터를 이용하여 CGContext 를 작성하는 방법을 사용해 보았습니다. 이번에는 이것을 응용하여 투명 레이어에 조그마한 애니메이션을 출력하는 프로그램을 만들어 보겠습니다. 투명 윈도우를 여는 방법, 이벤트 핸들러를 등록하는 방법은 모두 동일합니다.
이미지는 두 벌을 준비합니다. 먼저 화면에 출력될 컬러 이미지를 준비하는데, 작성하고자 하는 애니메이션에 필요한 프레임 장수만큼 옆으로 길게 늘여서 이미지를 만듭니다. 프로그램에서는 이를 하나씩 나누어 순차적으로 출력하게 될 것입니다. 그리고 토토샵을 이용하여 마스크 이미지를 만듭니다. 저는 토토샵을 잘 못 씁니다. 그래서 대충 마술 지팡이로 검은 바탕에 흰 물체를 만들었습니다. 검은색이 알파 채널 0 이 될 영역이고, 흰 색이 채널 255가 될 부분입니다.
여기서 저는 kCGColorSpaceGenericRGB 를 이용하여 비트맵을 만들었는데 결과는 RGBA 로 만들어졌습니다. 마지막 바이트가 알파 채널이라는 뜻이지요. 앞에서 준비한 애니메이션과 마스크 이미지를 RAW 포맷으로 저장한 다음 프로그램에서 읽어들여 버퍼에 입력합니다. 컬러 이미지는 RGB 를 구성할 때 쓰이며, 흑백 마스크 이미지는 Alpha 값에 해당됩니다. 여기서 토토샵에 자신있는 분들은 128 이라든지 그런 값을 이용하여 애니메이션의 그림자를 입력한다든지 Feather 를 줄 수도 있겠지요.
타이머에서 Render 루틴을 호출하면 먼저 네 장의 그림 중에서 필요한 부분을 잘라내어 다시 CGImage 로 만드는 일을 합니다. 이렇게 된 조각 이미지를 화면에 출력하게 됩니다. 이 부분에서 좀 더 효율적으로 프로그램을 작성하려면 원본 이미지를 CGLayer 로 만드는 것이 더 유리하다고 매뉴얼에는 되어 있습니다. 왜냐하면 CGLayer 의 이미지는 비디오 카드에 저장되기 때문이라는군요. 좀 더 속도가 빨라지겠지요?
간단한 프로그램이지만 투명색을 이용하여 어떻게 애니메이션을 구현할 것인지를 보여주는 예제로 활용되었으면 합니다. ^^
다음번에는 CGDirectDisplay 나 OpenGL 의 off-screen 기법을 이용한 풀스크린 예제를 만들어 보려고 하는데, 약간 시간이 걸릴 것 같습니다. 제가 이런 쓸모없는 프로그램들을 올리는 것은 ㅡㅡ;;; 일차적으로는 제 공부를 위한 것입니다. ^^;;; 짜 보지 않고는 제 것이 안 되는 것 같아서요...
최신글이 없습니다.
최신글이 없습니다.
댓글목록 0