스프라이트 애니메이션

스프라이트 엔진

스프라이트 엔진은 Qt Quick 스프라이트 엔진은 여러 프레임의 애니메이션이 포함된 이미지를 잘게 쪼개는 기능과 결합된 확률적 상태 머신입니다.

스테이트 머신

스프라이트 엔진의 주요 기능은 내부 스테이트 머신입니다. 이는 Qt Quick 의 상태 및 전환과는 다르며 기존의 상태 머신과 더 비슷합니다. 스프라이트는 다른 스프라이트로 또는 다시 자신으로 가중치 전환을 할 수 있습니다. 스프라이트 애니메이션이 완료되면 스프라이트 엔진은 방금 완료된 스프라이트에 사용할 수 있는 가중치 전환을 기반으로 다음 스프라이트를 무작위로 선택합니다.

현재 재생 중인 스프라이트에는 두 가지 방법으로 영향을 줄 수 있습니다. 임의로 스프라이트 재생을 즉시 시작하도록 강제하거나 특정 스프라이트로 점진적으로 전환하도록 지시할 수 있습니다. 점진적으로 전환하도록 지시하면 가장 적은 수의 중간 스프라이트를 사용하여 유효한 상태 전환을 거쳐 대상 스프라이트에 도달합니다(상대적인 가중치는 무시). 이를 통해 서로 다른 두 스프라이트 사이에 트랜지션 애니메이션을 쉽게 삽입할 수 있습니다.

예를 들어 가상의 2D 플랫폼 게임 캐릭터에 대한 스프라이트를 보여주는 위의 다이어그램을 살펴보겠습니다. 캐릭터는 서 있는 상태를 표시하는 것으로 시작합니다. 이 상태에서 외부 입력이 없으면 대기 애니메이션이나 걷기 애니메이션으로 전환하거나 서 있는 애니메이션을 다시 재생합니다. 이러한 전환의 가중치는 각각 1, 0, 3이므로 서 있는 애니메이션이 끝나면 대기 애니메이션이 재생될 확률은 4분의 1, 서 있는 애니메이션이 다시 재생될 확률은 4분의 3입니다. 이를 통해 기다리는 동안 약간의 애니메이션과 가변적인 동작을 하는 캐릭터가 가능합니다.

걷기 애니메이션에는 무게가 0으로 전환되기 때문에 일반적으로 서 있는 애니메이션은 전환되지 않습니다. 하지만 목표 애니메이션을 걷기 애니메이션으로 설정하면 서 있는 애니메이션이 끝나면 걷기 애니메이션이 재생됩니다. 이전에 대기 애니메이션에 있었다면 그 애니메이션 재생을 끝내고 서 있는 애니메이션을 재생한 다음 걷는 애니메이션을 재생합니다. 그런 다음 목표 애니메이션이 설정 해제될 때까지 걷기 애니메이션을 계속 재생하고, 걷기 애니메이션을 마친 후 서 있는 애니메이션으로 전환합니다.

그런 다음 목표 상태를 점프 애니메이션으로 설정하면 점프 애니메이션을 재생하기 전에 걷기 애니메이션을 완료합니다. 점프 애니메이션은 다른 상태로 전환되지 않으므로 상태가 강제로 변경될 때까지 점프 애니메이션이 계속 재생됩니다. 이 예제에서는 걷기로 다시 설정하고 목표 애니메이션을 걷기 또는 아무것도 하지 않음으로 변경할 수 있습니다( 걷기 애니메이션 후에 서 있는 애니메이션이 재생되도록 함). 애니메이션을 강제로 설정하면 애니메이션 재생을 즉시 시작할 수 있습니다.

입력 형식

스프라이트 엔진에서 허용하는 파일 형식은 Image 과 같은 다른 QML 유형에서 허용하는 파일 형식과 동일합니다. 그러나 이미지에 애니메이션을 적용하려면 스프라이트 엔진에서 이미지 파일에 애니메이션의 모든 프레임이 포함되어 있어야 합니다. 이러한 프레임은 파일의 오른쪽 가장자리에서 시작하여 파일의 왼쪽 가장자리에서 시작하여 아래 행(이전 행 바로 아래에 위치)까지 연속된 선으로 배열되어야 합니다.

위의 이미지를 예로 들어 보겠습니다. 지금은 검은색 숫자만 고려하고 사각형이 40x40픽셀이라고 가정합니다. 일반적으로 이미지는 왼쪽 상단 모서리부터 읽습니다. 프레임 크기를 40x40픽셀로 지정하고 프레임 수를 8로 지정하면 번호가 매겨진 순서대로 프레임을 읽습니다. 왼쪽 상단의 프레임이 첫 번째 프레임, 오른쪽 상단의 프레임이 다섯 번째 프레임, 그리고 다음 행(파일에서 픽셀 위치 0,40)으로 래핑하여 여섯 번째 프레임을 읽습니다. 8번째 프레임 이후에는 읽기를 중지하고 4번째 프레임 아래의 사각형에 이미지 데이터가 있는 경우 애니메이션에 포함되지 않습니다.

임의의 오프셋에서 애니메이션을 로드할 수 있지만 여전히 동일한 패턴을 따릅니다. 이제 빨간색 숫자를 보세요. 애니메이션이 픽셀 위치 120,0에서 시작하고 프레임 수는 5, 프레임 크기는 이전과 동일하도록 지정하면 빨간색으로 번호가 매겨진 프레임이 로드됩니다. 120,0 위치에서 40x40 블록을 읽기 시작하므로 이미지의 첫 번째 120x40은 사용되지 않습니다. 160,0에서 파일 끝에 도달하면 0,40부터 다음 행을 읽기 시작합니다.

파란색 숫자는 40,40부터 시작하여 해당 크기의 프레임을 두 개 로드하려고 시도한 경우 프레임 번호를 나타냅니다. 하나의 이미지 파일에서 여러 개의 스프라이트를 로드할 수 있습니다. 빨간색, 파란색, 검은색 숫자는 모두 동일한 스프라이트 엔진에 별도의 애니메이션으로 로드할 수 있습니다. 다음 코드는 이미지에 따라 애니메이션을 로드합니다. 또한 애니메이션이 초당 20프레임으로 재생되도록 지정합니다.

Sprite {
    name: "black"
    source: "image.png"
    frameCount: 8
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "red"
    source: "image.png"
    frameX: 120
    frameCount: 5
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "blue"
    source: "image.png"
    frameX: 40
    frameX: 40
    frameCount: 2
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}

한 애니메이션 내의 프레임은 같은 크기여야 합니다. 그러나 동일한 파일 내의 여러 애니메이션은 그렇지 않습니다. frameCount 이 지정되지 않은 스프라이트는 전체 파일을 사용하는 것으로 간주하므로 프레임 크기를 지정해야 합니다. 프레임 크기가 지정되지 않은 스프라이트는 정사각형이며 래핑 없이 파일 전체를 가져온다고 가정하므로 프레임 수를 지정해야 합니다.

스프라이트 엔진은 내부적으로 읽기 쉬운 내부 형식에 맞게 이미지를 복사하고 잘라내므로 그래픽 메모리 제한이 발생합니다. 단일 엔진의 모든 스프라이트가 동일한 텍스처에 있어야 하므로 다양한 애니메이션을 로드하려고 하면 임베디드 디바이스에서 텍스처 메모리 제한에 부딪힐 수 있습니다. 이러한 상황에서는 최대 텍스처 크기가 포함된 경고가 콘솔에 출력됩니다.

이미지 세트를 스프라이트 시트로 전환하는 데 도움이 되는 몇 가지 도구가 있습니다. 다음은 몇 가지 예입니다:

• 포토샵 플러그인: http://www.johnwordsworth.com/projects/photoshop-sprite-sheet-generator-script
• 김프의 스프라이트 시트 플러그인
• Cmd-line 도구: http://www.imagemagick.org/script/montage.php

스프라이트 엔진을 사용하는 QML 유형

스프라이트 엔진용 스프라이트는 Sprite 유형을 사용하여 정의할 수 있습니다. 이 유형에는 입력 매개변수와 애니메이션의 길이 및 다른 애니메이션으로의 가중치 전환이 포함됩니다. 순전히 데이터 클래스이며 아무것도 렌더링하지 않습니다.

SpriteSequence 는 스프라이트 엔진을 사용하여 정의된 스프라이트를 그리는 유형입니다. 단일하고 독립적인 스프라이트 엔진이며 다른 스프라이트 엔진과 상호 작용하지 않습니다. Sprite 스프라이트 엔진을 사용하는 유형 간에 유형을 공유할 수 있지만 자동으로 수행되지는 않습니다. 따라서 SpriteSequence 에서 스프라이트를 정의한 경우 해당 애니메이션으로 전환하려면 다른 SpriteSequence 의 스프라이트 속성에서 다시 정의(또는 동일한 Sprite 유형 참조)해야 합니다.

또한 ImageParticle 에서는 Sprite 유형을 사용하여 각 파티클에 대한 스프라이트를 정의할 수 있습니다. 이 역시 유형당 단일 스프라이트 엔진입니다. SpriteSequence 과 유사하게 작동하지만 ImageParticle 유형에서 제공하는 매개변수화된 가변성도 있습니다.

AnimatedSprite 유형

애니메이션 간 전환이 필요하지 않은 사용 사례의 경우 AnimatedSprite 유형을 고려하세요. 이 유형은 입력 형식은 동일하지만 한 번에 하나씩만 스프라이트 애니메이션을 표시합니다. 또한 장면 뒤에서 타이밍과 전환을 관리하는 스프라이트 엔진이 없기 때문에 보다 세밀한 수동 제어가 가능합니다.