스프라이트 애니메이션

스프라이트 엔진

이 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로, 프레임 크기는 이전과 동일하게 설정하면, 빨간색으로 표시된 번호 순서대로 프레임을 불러옵니다. 이미지의 처음 120x40 영역은 사용되지 않는데, 이는 120,0 위치부터 40x40 블록 단위로 읽기를 시작하기 때문입니다. 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
• Gimp의 SpriteSheet 플러그인
• 명령줄 도구: http://www.imagemagick.org/script/montage.php

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

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

SpriteSequence 는 스프라이트 엔진을 사용하여 그 안에 정의된 스프라이트를 그리는 타입입니다. 이는 독립적이고 자체적으로 작동하는 단일 스프라이트 엔진이며, 다른 스프라이트 엔진과는 상호작용하지 않습니다. Sprite 타입은 스프라이트 엔진을 사용하는 타입들 간에 공유될 수 있지만, 이는 자동으로 이루어지지 않습니다. 따라서, 한 SpriteSequence 에서 스프라이트를 정의했다면, 해당 애니메이션으로 전환하기 위해 다른 SpriteSequence 의 sprites 속성에서 이를 재정의하거나(또는 동일한 Sprite 타입을 참조해야) 합니다.

또한, ImageParticle 는 Sprite 타입을 사용하여 각 파티클에 대한 스프라이트를 정의할 수 있습니다. 이 역시 타입당 하나의 스프라이트 엔진이 적용됩니다. 이는 SpriteSequence 와 유사하게 작동하지만, ImageParticle 타입이 제공하는 매개변수화된 가변성도 함께 갖추고 있습니다.

AnimatedSprite 유형

애니메이션 간 전환이 필요 없는 사용 사례의 경우, AnimatedSprite 타입을 고려해 보십시오. 이 타입은 동일한 입력 형식으로 스프라이트 애니메이션을 표시하지만, 한 번에 하나만 표시합니다. 또한 백그라운드에서 타이밍과 전환을 관리하는 스프라이트 엔진이 없기 때문에, 더 세밀한 수동 제어가 가능합니다.