스프라이트

스프라이트(Sprite) 컴포넌트는 화면에 표시되는 단순한 이미지 또는 플립북 애니메이션입니다.

스프라이트 컴포넌트는 그래픽에 아틀라스 또는 타일 소스를 사용할 수 있습니다.

스프라이트 프로퍼티

Id, Position, Rotation 프로퍼티 외에도 다음과 같은 컴포넌트별 프로퍼티가 있습니다:

Image

쉐이더에 샘플러가 하나만 있으면 이 필드의 이름은 Image입니다. 그렇지 않으면 각 슬롯은 메터리얼의 텍스쳐 샘플러 이름을 따릅니다. 각 슬롯은 해당 텍스쳐 샘플러에서 스프라이트에 사용할 아틀라스 또는 타일 소스 리소스를 지정합니다.

Default Animation

스프라이트에 사용할 애니메이션입니다. 애니메이션 정보는 첫 번째 아틀라스 또는 타일 소스에서 가져옵니다.

Material

스프라이트 렌더링에 사용할 메터리얼입니다.

Blend Mode

스프라이트를 렌더링할 때 사용할 블렌드 모드입니다.

Size Mode

Automatic으로 설정하면 에디터가 스프라이트의 크기를 설정합니다. Manual로 설정하면 직접 크기를 설정할 수 있습니다.

Slice 9

스프라이트 크기가 조정될 때 가장자리 주변 스프라이트 텍스쳐의 픽셀 크기를 유지하도록 설정합니다.

Slice-9 텍스쳐링

GUI box 노드와 Sprite 컴포넌트에는 크기에 따라 달라지는 요소가 들어갈 때가 있습니다. 포함하는 컨텐츠에 맞게 크기를 조정해야 하는 패널과 대화상자, 또는 적의 남은 체력을 보여 주기 위해 크기를 조정해야 하는 체력 바가 그런 예입니다. 크기가 조정된 노드나 스프라이트에 텍스쳐링을 적용하면 시각적인 문제가 생길 수 있습니다.

일반적으로 엔진은 사각형 경계에 맞도록 텍스쳐를 스케일하지만, slice-9 가장자리 영역을 정의하면 텍스쳐의 어느 부분을 스케일할지 제한할 수 있습니다:

Slice9 box 노드는 일반적인 방식으로 스케일하지 않을 왼쪽, 위쪽, 오른쪽, 아래쪽 여백의 픽셀 수를 지정하는 숫자 4개로 구성됩니다:

여백은 왼쪽 가장자리에서 시작해 시계 방향으로 설정합니다:

• 모서리 세그먼트는 절대 스케일되지 않습니다.
• 가장자리 세그먼트는 단일 축을 따라 스케일됩니다. 왼쪽 및 오른쪽 가장자리 세그먼트는 세로로 스케일됩니다. 위쪽 및 아래쪽 가장자리 세그먼트는 가로로 스케일됩니다.
• 중앙 텍스쳐 영역은 필요에 따라 가로와 세로로 스케일됩니다.

위에서 설명한 Slice9 텍스쳐 스케일링은 box 노드나 스프라이트의 크기를 변경할 때만 적용됩니다:

밉맵과 slice-9

렌더러에서 밉맵이 동작하는 방식 때문에 텍스쳐 세그먼트를 스케일할 때 아티팩트가 나타날 수 있습니다. 이는 세그먼트를 원래 텍스쳐 크기보다 작게 _축소_할 때 발생합니다. 그러면 렌더러가 해당 세그먼트에 더 낮은 해상도의 밉맵을 선택하여 시각적인 아티팩트가 생깁니다.

이 문제를 피하려면 스케일될 텍스쳐 세그먼트가 충분히 작아서 절대 축소되지 않고 확대만 되도록 해야 합니다.

블렌드 모드

Blend Mode 프로퍼티는 컴포넌트 그래픽을 그 뒤에 있는 그래픽과 어떻게 블렌딩할지 정의합니다. 사용 가능한 블렌드 모드와 계산 방식은 다음과 같습니다:

Alpha

일반 블렌딩: src.a * src.rgb + (1 - src.a) * dst.rgb

Add

컴포넌트의 대응하는 픽셀 색상 값으로 배경을 밝게 합니다: src.rgb + dst.rgb

Multiply

컴포넌트의 대응하는 픽셀 값으로 배경을 어둡게 합니다: src.rgb * dst.rgb

Screen

Multiply의 반대입니다. 컴포넌트의 대응하는 픽셀 값과 배경을 밝게 합니다: src.rgb - dst.rgb * dst.rgb

런타임 조작

여러 함수와 프로퍼티를 통해 런타임에 스프라이트를 조작할 수 있습니다(사용법은 API 문서를 참조하세요). 함수:

• sprite.play_flipbook() - 스프라이트 컴포넌트에서 애니메이션을 재생합니다.
• sprite.set_hflip() 및 sprite.set_vflip() - 스프라이트 애니메이션의 가로 및 세로 뒤집기를 설정합니다.

스프라이트에는 go.get()과 go.set()으로 조작할 수 있는 여러 프로퍼티도 있습니다:

cursor

정규화된 애니메이션 커서(number)입니다.

image

스프라이트 이미지(hash)입니다. 아틀라스 또는 타일 소스 리소스 프로퍼티와 go.set()을 사용해 변경할 수 있습니다. 예제는 API 레퍼런스를 참조하세요.

material

스프라이트 메터리얼(hash)입니다. 메터리얼 리소스 프로퍼티와 go.set()을 사용해 변경할 수 있습니다. 예제는 API 레퍼런스를 참조하세요.

playback_rate

애니메이션 재생 속도(number)입니다.

scale

스프라이트의 비균일 스케일(vector3)입니다.

size

스프라이트의 크기(vector3)입니다. 스프라이트 Size Mode가 Manual로 설정된 경우에만 변경할 수 있습니다.

메터리얼 상수

기본 sprite 메터리얼에는 go.set() 또는 go.animate()로 변경할 수 있는 다음 상수가 있습니다(자세한 내용은 메터리얼 매뉴얼을 참조하세요). 예:

go.set("#sprite", "tint", vmath.vector4(1,0,0,1))
go.animate("#sprite", "tint", go.PLAYBACK_LOOP_PINGPONG, vmath.vector4(1,0,0,1), go.EASING_LINEAR, 2)

tint

스프라이트의 색상 틴트(vector4)입니다. vector4는 x, y, z, w가 각각 빨강, 초록, 파랑, 알파 틴트에 대응하는 방식으로 틴트를 나타내는 데 사용됩니다.

메터리얼 attribute

스프라이트는 현재 할당된 메터리얼의 버텍스 attribute를 오버라이드할 수 있으며, 이 attribute들은 컴포넌트에서 버텍스 쉐이더로 전달됩니다(자세한 내용은 메터리얼 매뉴얼을 참조하세요).

메터리얼에 지정된 attribute는 인스펙터에 일반 프로퍼티로 표시되며 개별 스프라이트 컴포넌트에 설정할 수 있습니다. attribute 중 하나라도 오버라이드되면 오버라이드된 프로퍼티로 표시되고 디스크의 스프라이트 파일에 저장됩니다:

프로젝트 설정

game.project 파일에는 스프라이트와 관련된 몇 가지 프로젝트 설정이 있습니다.

다중 텍스쳐 스프라이트

스프라이트가 여러 텍스쳐를 사용할 때 주의해야 할 몇 가지 사항이 있습니다.

애니메이션

애니메이션 데이터(fps, 프레임 이름)는 현재 첫 번째 텍스쳐에서 가져옵니다. 이것을 “구동 애니메이션”이라고 부르겠습니다.

구동 애니메이션의 이미지 id는 다른 텍스쳐에서 이미지를 조회하는 데 사용됩니다. 따라서 텍스쳐 간에 프레임 id가 일치하는지 확인하는 것이 중요합니다.

예를 들어 diffuse.atlas에 다음과 같은 run 애니메이션이 있는 경우:

run:
    /main/images/hero_run_color_1.png
    /main/images/hero_run_color_2.png
    ...

그러면 프레임 id는 run/hero_run_color_1이 되며, 예를 들어 normal.atlas에서는 이 값을 찾기 어려울 수 있습니다:

run:
    /main/images/hero_run_normal_1.png
    /main/images/hero_run_normal_2.png
    ...

그래서 아틀라스의 Rename patterns를 사용해 이름을 변경합니다. 해당 아틀라스에 _color=와 _normal=을 설정하면 두 아틀라스 모두에서 다음과 같은 프레임 이름을 얻게 됩니다:

run/hero_run_1
run/hero_run_2
...

UV

UV는 첫 번째 텍스쳐에서 가져옵니다. 버텍스 세트가 하나뿐이므로 보조 텍스쳐의 UV 좌표가 더 많거나 모양이 다른 경우에도 어차피 좋은 매칭을 보장할 수 없습니다.

이 점은 중요하므로 이미지들의 모양이 충분히 비슷한지 확인하세요. 그렇지 않으면 텍스쳐 블리딩이 발생할 수 있습니다.

각 텍스쳐에 있는 이미지의 크기는 서로 다를 수 있습니다.