SpriteSheet3D

SpriteSheet3D 는 하나의 이미지에 여러 애니메이션 프레임이 포함된 스프라이트 시트(Sprite Sheet) 를 사용하여 3D 공간 내에서 연속된 동작을 구현하는 객체입니다. 폭발 효과, 불꽃, 걷는 캐릭터 등 역동적인 2D 애니메이션을 3D 공간에 배치할 때 유용합니다.

1. 스프라이트 시트 이해

스프라이트 시트는 여러 프레임의 이미지를 격자 형태로 나열한 하나의 커다란 텍스처입니다. RedGPU는 이 텍스처를 지정된 구획(Segment)으로 나누어 프레임별로 순차적으로 보여줌으로써 애니메이션을 완성합니다.

2. 기본 사용법

스프라이트 시트를 사용하기 위해서는 먼저 시트의 구조를 정의하는 SpriteSheetInfo 객체를 생성한 뒤, 이를 SpriteSheet3D 에 전달해야 합니다.

import * as RedGPU from "https://redcamel.github.io/RedGPU/dist/index.js";

// 1. 스프라이트 시트 정보 정의
const sheetInfo = new RedGPU.Display.SpriteSheetInfo(
    redGPUContext,
    'https://redcamel.github.io/RedGPU/examples/assets/spriteSheet/spriteSheet.png', 
    5, 3, // 가로 5개, 세로 3개 세그먼트
    15,   // 총 프레임 수
    0,    // 시작 프레임 인덱스
    true, // 반복 재생 여부 (loop)
    24    // 초당 프레임 수 (FPS)
);

// 2. SpriteSheet3D 인스턴스 생성 및 추가
const spriteSheet = new RedGPU.Display.SpriteSheet3D(redGPUContext, sheetInfo);
scene.addChild(spriteSheet);

3. 애니메이션 제어

SpriteSheet3D 인스턴스를 통해 애니메이션의 재생 상태를 실시간으로 제어할 수 있습니다.

• play(): 애니메이션을 시작합니다.
• stop(): 현재 프레임에서 애니메이션을 일시 정지합니다.
• gotoAndPlay(frameIndex): 지정한 프레임으로 이동한 즉시 재생합니다.
• gotoAndStop(frameIndex): 지정한 프레임으로 이동한 후 정지합니다.

4. 실습 예제: 걷는 캐릭터 애니메이션

격자 형태의 시트 이미지가 SpriteSheet3D 와 Billboard 설정을 통해 어떻게 자연스러운 캐릭터 동작으로 변하는지 확인해 봅니다.

---

핵심 요약

• SpriteSheetInfo : 이미지 소스와 시트의 격자 구조(Segments), 애니메이션 속도(FPS) 등을 정의합니다.
• 애니메이션 제어: play, stop, gotoAndPlay 등의 메서드를 통해 시각적 흐름을 제어합니다.
• 효율성: 여러 장의 이미지를 각각 불러오는 대신 하나의 시트 파일을 사용하므로 네트워크 오버헤드와 GPU 메모리 관리 측면에서 유리합니다.