Skip to content

Sprites and Animation ko

Shiraishi_AKi edited this page Oct 6, 2026 · 1 revision

Sprite 및 Animation

English | 繁體中文 | 日本語 | 한국어

BIT8_CLI는 2D 게임을 위한 경량 Sprite 및 Animation 시스템을 제공합니다.

Sprite는 Asset Registry에 등록된 Tile을 사용합니다. 이름이 지정된 Animation을 정의하고, 재생 속도를 설정하며, Node에 연결할 수 있습니다.

BIT8_CLI 0.1.0에서는 각 Node가 독립적인 Animation 재생 상태를 유지합니다.

따라서 여러 게임 객체가 동일한 Sprite Definition을 사용하면서 서로 다른 Animation을 재생할 수 있습니다.

1. Sprite란?

Sprite는 게임 객체가 사용할 수 있는 그래픽 정의입니다.

예를 들어 다음과 같은 객체에 사용할 수 있습니다.

  • 플레이어 캐릭터
  • 적 캐릭터
  • NPC
  • 상호작용 가능한 객체
  • 움직이는 장식 요소

Sprite는 정적인 이미지 또는 여러 Animation Frame을 포함할 수 있습니다.

BIT8_CLI는 Sprite Definition과 개별 Node Instance를 분리하여 관리합니다.

따라서 여러 Node가 동일한 Sprite를 참조하더라도 Animation 재생 위치를 공유할 필요가 없습니다.

2. Sprite Registry

Sprite Definition은 프로젝트의 선택적 설정 파일에 저장됩니다.

bit8.sprites.toml

이 파일에는 Runtime의 Sprite 시스템에서 사용하는 정의가 포함됩니다.

프로젝트 구조 예시:

my-bit8-game/
├── main.b8
├── bit8.assets.toml
├── bit8.sprites.toml
├── world.b8map
└── assets/
    └── characters (A).png

Sprite Registry는 Asset Registry와 함께 작동합니다.

Asset Registry는 등록된 Tile을 식별합니다.

Sprite Registry는 해당 Tile을 Sprite와 Animation으로 사용하는 방법을 정의합니다.

정확한 TOML 테이블 구조는 해당 릴리스의 구현을 참고하세요.

3. Sprite Definition

Sprite Definition은 재사용할 수 있는 그래픽 리소스를 설명합니다.

예를 들어 프로젝트에 다음 이름의 Sprite를 정의할 수 있습니다.

Player

이 Sprite에는 다음과 같은 Animation을 포함할 수 있습니다.

idle
walk
attack

각 Animation은 등록된 Tile을 참조할 수 있습니다.

예:

Player
│
├── idle
│   └── A1
│
├── walk
│   ├── A2
│   ├── A3
│   └── A4
│
└── attack
    ├── A5
    └── A6

이 그림은 Sprite, Animation, 등록된 Tile 사이의 관계를 보여 줍니다.

실제 TOML 설정 형식은 아닙니다.

4. Animation Frame

Animation은 여러 Frame으로 구성됩니다.

각 Frame은 등록된 Asset 시스템의 그래픽을 참조합니다.

예:

walk

Frame 1 → A2
Frame 2 → A3
Frame 3 → A4

재생 중 Runtime은 Animation의 시간 설정에 따라 적절한 Frame을 선택합니다.

Node는 선택된 Frame을 화면에 그릴 수 있습니다.

5. Animation 재생 속도

BIT8_CLI는 다음 범위의 Animation 재생 속도를 지원합니다.

1 ~ 30 FPS

FPS는 Frames Per Second의 약자로, 1초 동안 표시되는 Frame 수를 의미합니다.

Animation FPS Frame당 대략적인 시간
1 FPS 1초
5 FPS 0.2초
10 FPS 0.1초
15 FPS 0.067초
30 FPS 0.033초

BIT8_CLI Runtime은 고정된 Simulation Rate를 사용합니다.

30 Hz

Animation 재생 속도는 Simulation Rate와 독립적으로 설정할 수 있습니다.

따라서 하나의 게임에서 빠른 Animation과 느린 Animation을 함께 사용할 수 있습니다.

6. Node에 Sprite 연결하기

Node는 다음 메서드를 사용하여 Sprite를 선택할 수 있습니다.

self:sprite("Player")

이 코드는 Player라는 이름의 Sprite Definition을 참조합니다.

예:

func init()
    self:sprite("Player")
end

사용하려는 Sprite는 Sprite Registry에 미리 정의되어 있어야 합니다.

7. Animation 재생하기

이름이 지정된 Animation을 선택하려면 다음 메서드를 사용합니다.

self:play("walk")

예:

func init()
    self:sprite("Player")
    self:play("idle")
end

이 코드는 Player Sprite를 선택하고 idle Animation의 재생을 요청합니다.

Animation 이름은 선택된 Sprite Definition에 존재해야 합니다.

8. Sprite 그리기

Node의 현재 Sprite Frame을 그리려면 다음 메서드를 사용합니다.

self:spr()

예:

func draw()
    self:spr()
end

렌더링에는 Node의 Sprite 상태와 위치가 사용됩니다.

활성화된 Camera에 따라 최종 화면 위치가 달라질 수 있습니다.

자세한 내용은 Camera 페이지를 참고하세요.

9. Node Script 예제

다음 예제는 아래 조건을 가정합니다.

  • Player라는 Sprite가 정의되어 있습니다.
  • Sprite에 idle과 walk Animation이 있습니다.
  • Node에 이 Script가 연결되어 있습니다.
func init()
    self:sprite("Player")
    self:play("idle")
end

func update()
    if btn(LEFT) then
        self:move(-1, 0)
        self:play("walk")
    elseif btn(RIGHT) then
        self:move(1, 0)
        self:play("walk")
    else
        self:play("idle")
    end
end

func draw()
    self:spr()
end

이 예제는 Node 이동과 Animation 선택을 결합하는 방법을 보여 줍니다.

Animation 전환을 설계할 때는 self:play()를 반복 호출했을 때의 정확한 동작을 Runtime 구현에서 확인하는 것이 좋습니다.

10. 독립적인 Animation State

BIT8_CLI의 중요한 특징 중 하나는 Animation 재생 상태가 각 Node에 개별적으로 저장된다는 점입니다.

두 개의 Node가 있다고 가정해 봅시다.

Node 1 → Player Sprite → walk

Node 2 → Player Sprite → idle

두 Node는 동일한 Sprite Definition을 참조합니다.

하지만 Animation State는 서로 독립적입니다.

예:

Node 1
Frame: A3

Node 2
Frame: A1

이 구조를 통해 동일한 Sprite Definition을 여러 게임 객체에서 재사용할 수 있습니다.

11. 영구 Sprite 참조

BIT8_CLI 0.1.0은 .b8map 데이터에 Sprite 참조를 저장하는 기능을 지원합니다.

Node는 다음과 같은 Sprite 이름을 저장할 수 있습니다.

Player

Runtime은 Node의 초기화 함수를 실행하기 전에 저장된 Sprite 참조를 해석합니다.

따라서 Script에서 Sprite를 매번 수동으로 설정하지 않아도 Node는 지정된 Sprite를 사용하여 시작할 수 있습니다.

Script는 지원되는 Runtime API를 통해 Animation을 선택하거나 Sprite를 변경할 수도 있습니다.

12. Sprite와 Map Workspace

VS Code Map Workspace는 Sprite와 관련된 Node 속성을 다루는 기능을 지원합니다.

이를 통해 시각적 편집과 Runtime 동작을 연결할 수 있습니다.

예를 들어 Map을 편집하는 동안 Node를 Sprite Definition과 연결할 수 있습니다.

Runtime은 게임을 불러올 때 저장된 프로젝트 데이터를 사용합니다.

Sprite Registry는 Sprite의 그래픽과 Animation을 정의하는 역할을 계속 담당합니다.

13. Sprite와 등록된 Asset

Sprite는 등록된 그래픽 Asset을 사용합니다.

bit8.assets.toml
        │
        ▼
Registered Tiles
        │
        ▼
bit8.sprites.toml
        │
        ▼
Sprite Definitions
        │
        ▼
Node Animation State
        │
        ▼
Runtime Rendering

이러한 분리 구조에는 다음과 같은 장점이 있습니다.

  1. Tile을 여러 Sprite에서 재사용할 수 있습니다.
  2. Sprite Definition을 여러 Node에서 재사용할 수 있습니다.
  3. 각 Node가 독립적인 Animation State를 유지할 수 있습니다.
  4. Stable Asset ID를 통해 그래픽 리소스를 안정적으로 참조할 수 있습니다.

자세한 내용은 Assets and Tilesheets 페이지를 참고하세요.

14. 현재 제한 사항

BIT8_CLI 0.1.0은 경량 Sprite 및 Animation 시스템을 제공합니다.

완전한 Skeletal Animation 또는 Character Rigging 시스템은 아닙니다.

현재 시스템은 주로 다음 기능에 중점을 둡니다.

  • 등록된 Tile 참조
  • 재사용 가능한 Sprite Definition
  • 이름이 지정된 Animation
  • 설정 가능한 Animation FPS
  • Node별 독립적인 Animation State
  • Runtime Sprite 렌더링

더 발전된 Animation 기능은 향후 릴리스에서 검토될 수 있습니다.

다음 단계

다음 페이지:

Collision

관련 문서:

Sprite는 한 번 정의하고, 각 Node에서 서로 다른 움직임을 만들어 보세요.

Clone this wiki locally