서론

안녕하세요! 제 이름은 히라 카르마켈라입니다. 이번 기회에 클립 스튜디오 페인트를 사용하여 게임 스플래시 화면용 애니메이션 레트로 픽셀 아트를 만드는 경험을 공유하겠습니다.

 

이 게시물이 CSP를 사용하여 픽셀 아트와 레트로 디자인을 만들고자 하는 분들에게 흥미로운 팁이 되기를 바랍니다.

레트로 디자인에 대하여

레트로는 70년대부터 90년대까지 유행했던 디자인 스타일입니다. 레트로는 오랫동안 알려진 빈티지 스타일과는 다릅니다. 레트로 스타일은 그 시대에 현대적이고 심지어 미래적인 인상을 줍니다. 레트로의 독특한 특징은 네온 색상으로도 알려진 더 반짝이는 색상 선택에서 볼 수 있습니다. 레트로 디자인 스타일은 디스코, 파티, 스포티한 라이프스타일의 부상과 함께 그 시대에 발전했습니다.

 

같은 시대에 비디오 게임은 저해상도 그래픽으로 개발되었으며, 이는 현재 픽셀 아트라고 알려져 있습니다. 레트로 스타일로 픽셀 아트를 만드는 팁을 만드는 것이 저에게는 흥미롭습니다.

픽셀 아트를 위한 캔버스 설정

시작해 봅시다! 클립 스튜디오 페인트를 열고 새 캔버스를 만듭니다. 우리가 만들 최종 작업물은 1280px x 720px이지만, 픽셀 아트를 만들기 위해서는 그 크기의 10%만 만들면 됩니다. 따라서 필요한 캔버스 크기는 128px x 72px입니다.

다음으로, 픽셀을 쉽게 그리기 위해 그리드를 설정해야 합니다. 보기(View) > 격자(Grid)로 이동합니다.

 

이제 캔버스에서 볼 수 있습니다. 하지만 여전히 그리드 크기를 조정해야 합니다. 보기(View) > 격자/눈금자 설정(Grid/Ruler Settings)으로 이동합니다. 원점을 중앙으로 설정하고 간격(Gap, D)과 분할 수(Number of divisions)를 1로 설정합니다.

레트로 색상 구성

픽셀을 만들기 전에, 먼저 레트로 스타일에 맞는 색상 팔레트를 만들어야 합니다. 팔레트로 사용할 새 레이어를 만들고, 레이어 이름을 "레트로 팔레트(retro palette)"로 지정합니다.

다음으로, 도구 상자(Tool Box)에서 전경색(Foreground Color)을 두 번 클릭하여 색상 설정(Color Settings)을 엽니다. 우리가 만들 첫 번째 색상은 "핫 핑크(Hot Pink)"입니다. HEX 필드에 "ff69b4" 코드를 입력합니다. 그런 다음 캔버스에 브러시로 칠합니다.

아래는 우리가 필요로 하는 레트로 팔레트의 색상입니다.

나머지는 표준 팔레트 패널에서 가져올 수 있는 검은색과 흰색이 여전히 필요합니다.

픽셀 아트를 위한 도구 설정

좋습니다! 픽셀 아트를 특별한 설정으로 만드는 데 사용할 수 있는 몇 가지 도구가 있습니다. 첫 번째 도구로, 선, 곡선 및 도형 도구와 같은 "도형 도구(Figure Tool)"를 사용하여 정밀한 픽셀 오브젝트를 만들 수 있습니다.

도형 도구를 사용하여 픽셀 아트를 만들려면 안티앨리어싱(Anti-Aliasing) 기능을 꺼야 합니다. 안티앨리어싱은 디지털 이미지 개체의 가장자리를 주변 샘플 픽셀의 색상을 추가하고 조작하여 부드럽게 보이도록 하는 기능입니다.

물론 안티앨리어싱이 적용되면 픽셀 아트가 멋져 보이지 않을 것입니다. 따라서 왼쪽의 도구 속성(tool-property) 패널에서 이 기능을 비활성화해야 합니다. 안티앨리어싱 섹션에는 여러 레벨이 있으며, "없음(None)"을 선택합니다.

두 번째 도구로, 마커(Marker) 및 도트 펜(Dot Pen) 유형의 서브 도구를 가진 "펜 도구(Pen Tool)"를 사용할 수 있습니다. 이 유형의 펜은 1px 두께의 선을 생성하여 유기적인 픽셀 오브젝트를 쉽게 만들 수 있습니다.

세 번째 도구로, "채우기 도구(Fill Tool)"를 사용하여 픽셀 필드를 쉽게 채울 수 있습니다. 다른 레이어 참조(Refer other layers) 유형을 선택하여 다른 레이어라도 겹치는 필드를 채울 수 있습니다. 그런 다음 도구 속성(tool-property)에서 영역 크기 조정(Area Scaling)을 선택 해제합니다. 이 기능은 픽셀 오브젝트에 노이즈를 생성하는 안티앨리어싱과 거의 유사합니다.

네 번째 도구로, 물론 작업물에서 불필요한 픽셀을 지우기 위해 "지우개 도구(Eraser Tool)"가 필요합니다. 벡터 유형(Vector type)을 선택하여 흔적을 남기지 않고 픽셀을 지웁니다.

 

좋습니다! 나머지는 필요에 따라 다른 도구를 사용할 수 있습니다.

레트로 배경

이제 픽셀 잔치를 시작합시다. 우리가 만들 스플래시 화면의 배경을 레트로 스타일로 만들어 보겠습니다.

캔버스를 하늘과 지면을 나누는 수평선으로 1px 두께의 선으로 나눕니다.

다음으로, "스포이드 도구(Eyedropper Tool)"를 사용하여 이전에 만들었던 레이어 팔레트에서 색상을 가져옵니다. 하늘은 Amethyst 색상으로, 지면은 Carmine 색상으로 채웠습니다.

이제 새 레이어를 만들고, 유명한 레트로 디자인의 특징인 일몰 오브젝트를 만들 것입니다. 타원형 도형 도구(ellipse shape tool)를 사용하고 키보드의 "Shift" 키를 누른 상태에서 원을 만들어 비율이 맞도록 합니다.

지우개 도구를 사용하여 일몰에 줄무늬를 만듭니다. 제가 한 것처럼 패턴을 따라 할 수 있습니다.

이제 새 레이어를 다시 만들고, 배경을 산 실루엣 이미지로 장식할 것입니다. 검은색 선 도구(line tool)를 사용하여 일몰 이미지의 오른쪽과 왼쪽에 산을 그립니다.

산을 검은색으로 채운 다음 레이어 불투명도를 50%로 변경합니다.

새 레이어를 만들고, 일몰 앞에 있는 건물 실루엣 이미지를 추가할 것입니다. 이번에는 도트 펜을 사용합니다.

건물의 이미지를 몇 가지 다채로운 픽셀로 장식하여 불빛처럼 보이게 합니다.

이제 지면 영역으로 이동하여, 지면 위에 메시를 만들 새 레이어를 만듭니다. 다시 한번, 저는 정확한 디자인을 만들기 위해 터쿼이즈 블루 색상의 선 도구를 사용합니다.

원근감을 위해 한 점에 닿도록 선을 대각선으로 그립니다.

이 레이어를 복사한 다음, 편집(Edit) > 변형(Transform) > 좌우 반전(Flip Horizontal)으로 이동합니다. 메시를 캔버스에 대칭이 되도록 배치합니다. 그런 다음 메시 레이어와 복사본을 선택하고 레이어(Layer) > 선택한 레이어 병합(Merge selected layers)으로 이동합니다.

이제 만들어진 대각선 위에 수평선을 만들어 메시 이미지를 만듭니다.

레트로 거리 환경

다음으로, 환경을 위한 오브젝트를 만듭니다. 레트로 거리 분위기를 만들 것입니다. 간단하게, 저는 도로 표식과 도로의 왼쪽과 오른쪽에 야자수 줄을 만들 것입니다.

 

환경 오브젝트 레이어들을 모으기 위한 레이어 폴더를 만듭니다. 경로를 만들기 위한 새 레이어를 만듭니다.

이제 이미지에서 경로를 형성하는 도형의 교차점을 일렉트릭 옐로우(Electric Yellow)로 채웁니다. 레이어 불투명도를 50%로 변경합니다.

도로 표식을 만들기 위한 새 레이어를 만듭니다. 선 도구를 사용하여 흰색 도로 표식을 만듭니다.

다음으로, 야자수를 만들기 위한 또 다른 새 레이어를 만듭니다. 도트 펜 도구를 사용하여 만듭니다. 오른쪽과 왼쪽에 대칭으로 만듭니다.

레트로 자동차 오브젝트

좋습니다! 이제 메인 모델을 만들 시간입니다. 레트로 자동차 오브젝트를 위한 새 레이어를 만듭니다. 도트 펜을 사용하여 그립니다.

자동차 레이어 위에 새 레이어를 만들고, 검은색을 사용하여 자동차 모델 표면에 그림자를 만듭니다. 레이어 불투명도를 50%로 변경합니다. 그런 다음 해당 레이어를 자동차 레이어와 병합합니다.

보완으로, 새 레이어에 자동차 아래에 그림자를 만듭니다. 레이어 불투명도를 50%로 변경합니다.

애니메이션 과정

이제 장면에 생명을 불어넣을 시간입니다. 우리가 애니메이션을 만들 부분은 거리 환경과 건물 내부의 불빛 두 가지입니다.

 

이를 위해 타임라인 패널을 준비합니다. 창(Window) > 타임라인(Timeline)을 선택합니다. 화면 하단에 타임라인 패널이 나타나는 것을 볼 수 있을 것입니다.

타임라인 패널에서 새 타임라인(New Timeline)을 클릭합니다. 그러면 새 타임라인 설정이 나타나고, 타임라인 이름을 입력합니다. 프레임 속도(frame rate)와 재생 시간(playback time)을 24로 설정합니다. 장면(Scene)과 샷(shot)은 1번으로, 분할선(division line)은 6번으로 설정합니다. 그런 다음 이미지 보간(Image interpolation)을 딱딱한 가장자리(Hard Edges)로 변경합니다.

애니메이션을 만들려면 애니메이션 셀과 연결될 특수 레이어가 포함된 애니메이션 폴더가 필요합니다.

 

이를 위해 새 애니메이션 폴더(New animation folder)를 클릭합니다. 그러면 레이어 패널 상단에 애니메이션 폴더가 나타납니다. 폴더 이름을 "Animation"으로 변경합니다. 현재 애니메이션 폴더는 비어 있습니다. 우리는 만들어진 모델들을 처리하여 애니메이션 셀로 컴파일해야 합니다.

레트로 자동차부터 배경 레이어까지 모든 모델 레이어를 선택합니다. 레이어 팔레트는 제외하고 맨 아래에 저장할 수 있습니다. 그런 다음 레이어(Layer) > 폴더 만들기 및 레이어 삽입(Create folder and insert layer)으로 이동합니다. 그러면 선택된 모든 레이어가 하나의 폴더에 모입니다. 폴더 이름을 "Compilation"으로 변경합니다.

Compilation 폴더를 복사하고 복사된 폴더의 이름을 "cel_01"로 변경합니다. 그런 다음 레이어(Layer) > 레이어 변환(Convert Layer) (H)으로 이동하여 cel_01 폴더가 단위 레이어로 변경됩니다. cel_01 레이어를 Animation 폴더로 드래그합니다.

타임라인 패널에서 선택된 각 프레임에 대해 빨간색으로 표시된 프레임 번호 1을 선택했는지 확인한 다음 셀 지정(Specify cels)을 클릭합니다. 셀에 연결할 레이어를 선택하라는 메시지가 나타납니다. cel_01을 선택합니다.

다음 셀을 만들려면 동일하게 진행합니다. Compilation 폴더를 복사한 다음 복사본의 이름을 "cel_02"로 변경합니다. 단위 레이어로 변환하기 전에 이 폴더의 일부 모델을 변형하여 움직임의 환상을 만들어야 합니다.

이제 cel_02 폴더에서 도로 표식 레이어를 선택합니다. 도로 표식이 캔버스 하단으로 나아가는 것처럼 보이도록 이미지를 편집할 것입니다. 필요한 것은 특정 부분의 픽셀을 삭제하거나 추가하는 것입니다.

도로 표식이 움직임에 따라 야자수도 캔버스 하단으로 이동해야 합니다. 논리적인 관점에서 보기에 가까워지는 오브젝트는 더 크게 보일 것입니다. 따라서 이동하면서 야자수도 확대되어야 합니다.

 

야자수 레이어를 선택한 다음, 편집(Edit) > 변형(Transform) > 자유 변형(Free Transform)으로 이동합니다. 왼쪽의 도구 속성(tool property)에서 보간 방법(Interpolation method) 설정을 딱딱한 가장자리(Hard Edges)로 변경하여 확대 시 픽셀 노이즈가 발생하지 않도록 합니다.

이제 건물 레이어를 선택하고, 불빛 장식을 변경하여 불빛이 깜빡이는 것처럼 보이게 합니다.

다음으로 cel_02 폴더를 선택합니다. 레이어(Layer) > 레이어 변환(Convert Layer) (H)으로 이동합니다. cel_02 레이어를 Animation 폴더로 드래그합니다. 타임라인에서 프레임 번호 3을 선택한 다음 셀 지정(Specify cels)을 클릭합니다. cel_02를 선택합니다. 이 애니메이션에서는 24의 재생 시간 동안 매 2프레임마다 셀을 설정할 것입니다.

타임라인에서 프레임 번호 3을 선택한 다음 셀 지정(Specify cels)을 클릭합니다. cel_02를 선택합니다.

이 애니메이션에서는 24의 재생 시간 동안 매 2프레임마다 셀을 설정할 것입니다.

 

다음 셀들에 대해서는 연속적인 변형을 변경하여 움직임의 환상을 생성하도록 동일하게 수행하십시오.

렌더링 및 게시

좋습니다! 총 24프레임 동안 매 2프레임마다 애니메이션 셀을 구성하고 채우는 작업을 마쳤습니다.

이 애니메이션을 렌더링하고 게시하기 전에, 이 애니메이션의 크기는 128px x 72px임을 알려드립니다. 따라서 바로 렌더링하면 이 크기로 결과물을 볼 수 있습니다.

이를 위해 먼저 크기를 조정해야 합니다. 편집(Edit) > 이미지 이미지 해상도 변경(Change Image Image Resolution)으로 이동합니다. 해상도 설정 창이 나타날 것입니다.

너비를 1280px로, 높이를 720px로 변경합니다. 그런 다음 보간 방법(Interpolation method)을 딱딱한 가장자리(Hard Edges)로 변경합니다. 그러면 픽셀 배열을 손상시키지 않고 이미지가 확대될 것입니다.

 

이제 이 애니메이션을 렌더링합니다. 루프 기능으로 볼 수 있는 애니메이션 결과가 필요하다면 애니메이션 GIF 형식으로 내보내야 합니다. 파일(File) > 애니메이션 내보내기(Export animation) > 애니메이션 GIF(Animated GIF)로 이동합니다. 저장할 디렉토리를 지정합니다.

렌더링 창이 나타나면, 너비를 1280px로, 높이를 720px로 변경합니다.

그러나 일부 게임 프로젝트에서는 개발자가 스플래시 화면을 이미지 시퀀스로 제공하도록 요청하는 경우가 있습니다. 이는 애니메이션이 프로그래밍 스크립트를 사용하여 생성되기 때문입니다. 이를 위해 파일(File) > 애니메이션 내보내기(Export animation) > 이미지 시퀀스(Image Sequence)를 선택할 수 있습니다.

렌더링 설정 창이 나타날 것입니다. 저장할 디렉토리를 지정합니다. PNG 형식을 선택하고 프레임 내보내기(Export frames) 체크리스트를 선택합니다.

 

좋습니다! 제가 공유할 수 있는 내용은 여기까지입니다. 유용했기를 바라며, 더 많은 팁을 만들 수 있도록 지원해 주세요.

제 YouTube 채널을 구독해 주세요: