DEKI/ENGINE 문서
deki-2d 0.19.0
Deki 패키지 레퍼런스
deki-2d

2D 콘텐츠 컴포넌트: 스프라이트, 텍스트(BitmapFont + TTF 베이킹), 애니메이션, 그라데이션, 버튼, 스크롤, 클리핑, 롤러.

저장소: github.com/dekiengine/deki-2d · 최신 릴리스: 0.19.0 · 엔진 0.19.0 이상 필요 · 의존: deki-rendering, deki-input

DekiEditor --packages-add deki-2d <project> 또는 패키지 관리자로 설치합니다. 엔진 자체의 컴포넌트와 C++ API는 Deki 문서에 있습니다.

에디터에는 2D(으)로 표시됩니다.

컴포넌트

컴포넌트 카테고리 설명
AnimationComponent 2D 오브젝트의 스프라이트에서 프레임 애니메이션 에셋을 재생합니다.
ButtonComponent 2D 오브젝트를 버튼으로 만듭니다. 호버와 누름을 추적하고 클릭 콜백을 호출합니다.
ButtonStyleComponent 2D 틴트 또는 스프라이트 교체로 버튼의 상태별 모양을 정합니다.
ClipComponent 코어 자식의 렌더링을 사각형 영역으로 잘라냅니다.
GradientComponent 2D 선형, 방사형 또는 원뿔형 절차적 그라디언트를 그립니다.
RollerComponent 2D 선택 휠입니다. 관성으로 값 목록을 돌다가 하나에 맞춰 멈춥니다.
ScrollComponent 2D 드래그로 자식을 스크롤합니다. 관성이 적용됩니다.
ScrollElement 2D 목록 항목 하나의 크기를 지정하여 스크롤 컴포넌트가 목록을 배치할 수 있게 합니다.
SortingGroupComponent 2D 자식들을 하나의 단위로 묶어 씬의 나머지 부분과 함께 정렬되게 합니다.
SpriteComponent 2D 스프라이트를 그립니다. 틴트, 뒤집기, 타일 및 9-슬라이스 모드를 지원합니다.
TextComponent 2D 비트맵 폰트로 텍스트를 그립니다. 정렬과 단어 단위 줄 바꿈을 지원합니다.

기능 플래그

빌드에서 뺄 수 있는 부분입니다. define이 있는 기능은 그 define으로 켜고 끄며, 나머지는 컴포넌트와 함께 제거됩니다.

기능 define 기본값
Sprites DEKI_FEATURE_SPRITE 켜짐
Text DEKI_FEATURE_TEXT 켜짐
Animation DEKI_FEATURE_ANIMATION 켜짐
Gradients DEKI_FEATURE_GRADIENT 켜짐
Buttons DEKI_FEATURE_BUTTON 켜짐
Scrolling DEKI_FEATURE_SCROLL 켜짐
Rollers DEKI_FEATURE_ROLLER 켜짐
Clipping DEKI_FEATURE_CLIP 켜짐
Sorting Groups DEKI_FEATURE_SORTING_GROUP 켜짐

컴포넌트 레퍼런스

AnimationComponent

오브젝트의 스프라이트에서 프레임 애니메이션 에셋을 재생합니다.

인스펙터 이름: 애니메이션 컴포넌트 · 카테고리: 2D · 유형: Deki2D::AnimationComponent

속성 유형 기본값 설명
animation AssetRef (FrameAnimationData) "" 프레임 애니메이션 에셋입니다. 프레임 목록과 각 프레임을 얼마나 오래 표시할지 담고 있습니다.
currentSequence int32 0 재생 중인 이름 있는 시퀀스의 인덱스입니다. 시퀀스는 하나의 에셋 안에 있는 개별 애니메이션(idle, walk 등)입니다.
currentFrame int32 0 현재 시퀀스 안의 프레임입니다. 값을 바꾸면 그 위치로 이동하며, 디버깅 중에 값을 확인할 때도 유용합니다.
isPlaying bool false 애니메이션이 진행 중인지 여부입니다. 끄면 처음으로 되돌리지 않고 현재 프레임에서 멈춥니다.
hasFinished bool false 반복하지 않는 시퀀스가 마지막 프레임에 도달하면 켜집니다. 다음으로 넘어갈 때를 알기 위해 읽습니다.
playOnceOverride bool false 에셋에서 반복으로 지정되어 있어도 현재 시퀀스를 한 번만 재생합니다. 시퀀스가 바뀌면 꺼집니다.

ButtonComponent

오브젝트를 버튼으로 만듭니다. 호버와 누름을 추적하고 클릭 콜백을 호출합니다.

인스펙터 이름: 버튼 컴포넌트 · 카테고리: 2D · 유형: Deki2D::ButtonComponent

속성 유형 기본값 제약 설명
inputCollider ObjectRef (InputCollider) 0 이 버튼을 클릭할 수 있게 하는 히트 영역입니다. 없으면 버튼이 눌림을 감지할 수 없습니다.
state enum "Normal" Normal, Hovered, Pressed, Disabled 일반, 호버, 눌림, 비활성화 중 하나입니다. 입력에 의해 설정되며, 스타일 컴포넌트가 이 값을 보고 무엇을 그릴지 정합니다.
isEnabled bool true 비활성화된 버튼은 입력을 무시하고 비활성화 상태를 알리므로, 숨기는 대신 회색으로 표시할 수 있습니다.

ButtonStyleComponent

틴트 또는 스프라이트 교체로 버튼의 상태별 모양을 정합니다.

인스펙터 이름: 버튼 스타일 컴포넌트 · 카테고리: 2D · 유형: Deki2D::ButtonStyleComponent

속성 유형 기본값 제약 설명
button ObjectRef (ButtonComponent) 0 상태로 이 스타일을 결정하는 버튼입니다. 보통 같은 오브젝트에 있는 버튼입니다.
sprite ObjectRef (SpriteComponent) 0 이 스타일이 바꾸는 스프라이트입니다. 보통 같은 오브젝트에 있는 스프라이트입니다.
transition enum "ColorTint" ColorTint, SpriteSwap 누를 때 틴트 색상을 바꿀지 스프라이트 자체를 교체할지 지정합니다. 색상이 더 가볍고, 별도 스프라이트를 쓰면 모양도 바꿀 수 있습니다.
normalColor Color "#FFFFFFFF" transition이(가) 허용할 때 표시 버튼을 조작하지 않을 때의 틴트입니다.
hoveredColor Color "#C8C8C8FF" transition이(가) 허용할 때 표시 포인터가 위에 있을 때의 틴트입니다. 터치 전용 장치에서는 거의 보이지 않습니다.
pressedColor Color "#A0A0A0FF" transition이(가) 허용할 때 표시 누르고 있는 동안의 틴트입니다. 눌림이 인식되었음을 알려 주는 피드백입니다.
disabledColor Color "#80808080" transition이(가) 허용할 때 표시 버튼이 비활성화되었을 때의 틴트입니다. 보통 흐리게 하거나 채도를 낮춥니다.
normalSprite AssetRef (Sprite) "" transition이(가) 허용할 때 표시 스프라이트 교체 모드에서 조작하지 않을 때의 스프라이트입니다.
hoveredSprite AssetRef (Sprite) "" transition이(가) 허용할 때 표시 스프라이트 교체 모드에서 호버 중일 때의 스프라이트입니다.
pressedSprite AssetRef (Sprite) "" transition이(가) 허용할 때 표시 스프라이트 교체 모드에서 누르고 있는 동안의 스프라이트입니다.
disabledSprite AssetRef (Sprite) "" transition이(가) 허용할 때 표시 스프라이트 교체 모드에서 비활성화되었을 때의 스프라이트입니다.

ClipComponent

자식의 렌더링을 사각형 영역으로 잘라냅니다.

인스펙터 이름: 클립 컴포넌트 · 카테고리: 코어 · 유형: Deki2D::ClipComponent

속성 유형 기본값 제약 설명
width float 6.25 단위 m 클리핑 영역의 너비(미터)입니다. 자식은 이 가장자리에서 잘립니다.
height float 6.25 단위 m 클리핑 영역의 높이(미터)입니다.
sortingOrder int32 0 클립된 그룹 전체를 바깥의 모든 것과 비교한 그리기 순서입니다.

GradientComponent

선형, 방사형 또는 원뿔형 절차적 그라디언트를 그립니다.

인스펙터 이름: 그라디언트 컴포넌트 · 카테고리: 2D · 유형: Deki2D::GradientComponent

속성 유형 기본값 제약 설명
gradientType enum "Linear" Linear, Radial, Conical 선형은 아래의 각도를 따라 색상을 배치합니다. 방사형은 중심점에서 바깥으로 색상을 배치합니다.
tileMode enum "None" None, Horizontal, Vertical, Both, Mirror 마지막 정지점 너머의 처리 방식입니다. 끝 색상을 유지하거나, 그라디언트를 반복하거나, 거꾸로 미러링합니다.
ditherMode enum "Ordered4x4" None, Ordered2x2, Ordered4x4, Ordered8x8, Ordered16x16 디더링은 16비트 디스플레이에서 부드러운 그라디언트에 생기는 줄무늬를 고운 점무늬로 바꾸어 가려 줍니다.
ditherScale uint8 1 아트 픽셀 단위의 디더 패턴 크기입니다. 1은 픽셀마다 디더링하고, 2, 4, 8, 16은 레트로한 느낌의 굵은 블록을 만듭니다.
width float 0 단위 m 그라디언트의 너비(미터)입니다.
height float 0 단위 m 그라디언트의 높이(미터)입니다.
angle float 0 단위 rad 선형 그라디언트가 진행하는 방향(라디안)입니다. 0이면 왼쪽에서 오른쪽으로 진행합니다.
centerX float 0.5 방사형 그라디언트의 가로 중심으로 0~1 값입니다. 0.5가 가운데입니다.
centerY float 0.5 방사형 그라디언트의 세로 중심으로 0~1 값입니다.
radius float 0.5 방사형 그라디언트가 마지막 정지점에 도달하기까지의 거리로, 크기에 대한 비율입니다.
stopCount uint8 2 네 개의 색상 정지점 중 몇 개를 사용할지 지정합니다. 나머지는 무시됩니다.
stop1Position float 0 첫 번째 정지점이 그라디언트에서 놓이는 위치로 0~1 값입니다.
stop1Color Color "#FFFFFFFF" 첫 번째 정지점의 색상입니다.
stop2Position float 1 stopCount이(가) 허용할 때 표시 두 번째 정지점이 그라디언트에서 놓이는 위치로 0~1 값입니다.
stop2Color Color "#000000FF" stopCount이(가) 허용할 때 표시 두 번째 정지점의 색상입니다.
stop3Position float 0 stopCount이(가) 허용할 때 표시 세 번째 정지점의 위치로 0~1 값입니다. 정지점 개수가 3 이상일 때 사용됩니다.
stop3Color Color "#000000FF" stopCount이(가) 허용할 때 표시 세 번째 정지점의 색상입니다.
stop4Position float 0 stopCount이(가) 허용할 때 표시 네 번째 정지점의 위치로 0~1 값입니다. 정지점 개수가 4일 때 사용됩니다.
stop4Color Color "#000000FF" stopCount이(가) 허용할 때 표시 네 번째 정지점의 색상입니다.
tileWidth float 0 단위 m 타일 모드가 반복 또는 미러일 때 한 번 반복되는 너비입니다.
tileHeight float 0 단위 m 타일 모드가 반복 또는 미러일 때 한 번 반복되는 높이입니다.

RendererComponent에서 sortingOrder, ignoreClip, pixelSnap, alphaMode을(를) 상속합니다.

RollerComponent

선택 휠입니다. 관성으로 값 목록을 돌다가 하나에 맞춰 멈춥니다.

인스펙터 이름: 롤러 컴포넌트 · 카테고리: 2D · 유형: Deki2D::RollerComponent

속성 유형 기본값 제약 설명
inputCollider ObjectRef (InputCollider) 0 드래그를 받는 히트 영역입니다. 없으면 롤러를 돌릴 수 없습니다.
width float 6.25 단위 m 롤러의 너비(미터)입니다.
itemHeight float 1.875 단위 m 선택되지 않은 한 행의 높이(미터)입니다.
visibleRows int32 3 선택된 행을 포함해 한 번에 보이는 행 수입니다. 홀수이면 선택 항목이 가운데에 옵니다.
infiniteScroll bool false 마지막 옵션에서 첫 번째 옵션으로 이어져 롤러가 끝없이 돕니다.
reverseDrag bool false 드래그 방향을 반대로 합니다.
options Array<string> [] 선택지 목록(순서대로)입니다.
selectedIndex int32 0 현재 선택된 옵션으로, 0부터 셉니다.
deceleration float 0.95 플릭이 얼마나 빨리 느려지는지 지정합니다. 높을수록 빨리 멈춥니다.
snapSpeed float 8 느려진 뒤 롤러가 가장 가까운 옵션에 자리 잡는 속도입니다. 높을수록 강하게 스냅합니다.
selectedItemHeight float 2.5 단위 m 선택된 행의 높이(미터)입니다. 다른 행보다 높게 하면 선택 항목이 구분됩니다.
selectedColor Color "#FFFFFFFF" 선택된 행의 텍스트 색상입니다.
normalColor Color "#808080FF" 양옆 행의 텍스트 색상입니다.
selectedFontSize int32 24 선택된 행의 에디터 미리 보기 크기입니다. 장치에서는 폰트 에셋이 베이크된 크기로 그립니다.
normalFontSize int32 16 선택되지 않은 행의 에디터 미리 보기 크기입니다.

ScrollComponent

드래그로 자식을 스크롤합니다. 관성이 적용됩니다.

인스펙터 이름: 스크롤 컴포넌트 · 카테고리: 2D · 유형: Deki2D::ScrollComponent

속성 유형 기본값 제약 설명
inputCollider ObjectRef (InputCollider) 0 드래그를 받는 히트 영역입니다. 없으면 아무것도 스크롤할 수 없습니다.
mode enum "NonTemplate" NonTemplate, Template 항목을 이미 있는 자식에서 가져올지, 아래의 씬에서 필요할 때 생성할지 지정합니다.
itemScene AssetRef (Scene) "" mode이(가) 허용할 때 표시 생성 모드에서 항목마다 한 번씩 생성되는 씬입니다. 각 복사본은 스크롤되어 보일 때 내용이 채워집니다.
direction enum "Vertical" Vertical, Horizontal 세로 또는 가로 이동입니다.
itemSpacing float 0 단위 m 항목 사이의 간격(미터)입니다.
paddingTop float 0 단위 m 첫 번째 항목 앞의 빈 공간(미터)입니다.
paddingBottom float 0 단위 m 마지막 항목 뒤의 빈 공간(미터)입니다.
paddingLeft float 0 단위 m 왼쪽 가장자리의 빈 공간(미터)입니다.
paddingRight float 0 단위 m 오른쪽 가장자리의 빈 공간(미터)입니다.
deceleration float 0.95 플릭이 얼마나 빨리 느려지는지 지정합니다. 높을수록 빨리 멈추고, 낮을수록 계속 미끄러집니다.
bounceStiffness float 0.15 끝을 넘어 드래그한 뒤 목록이 되돌아오는 강도입니다. 높을수록 빨리 되돌아옵니다.
enableBounce bool true 목록을 끝 너머까지 드래그했다가 튕겨 돌아오게 합니다. 끄면 가장자리에서 딱 멈춥니다.
enableInertia bool true 손가락을 뗀 뒤에도 계속 움직입니다. 끄면 드래그가 끝나는 순간 목록이 멈춥니다.
reverseDrag bool false 드래그 방향을 반대로 하여 내용이 손가락과 반대 방향으로 움직이게 합니다.

ScrollElement

목록 항목 하나의 크기를 지정하여 스크롤 컴포넌트가 목록을 배치할 수 있게 합니다.

인스펙터 이름: 스크롤 요소 · 카테고리: 2D · 유형: Deki2D::ScrollElement

속성 유형 기본값 제약 설명
width float 6.25 단위 m 한 항목의 너비(미터)입니다. 스크롤은 이 값으로 간격과 이동할 수 있는 거리를 계산합니다.
height float 3.75 단위 m 한 항목의 높이(미터)입니다.

SortingGroupComponent

자식들을 하나의 단위로 묶어 씬의 나머지 부분과 함께 정렬되게 합니다.

인스펙터 이름: 정렬 그룹 컴포넌트 · 카테고리: 2D · 유형: Deki2D::SortingGroupComponent

속성 유형 기본값 설명
sortingOrder int32 0 이 오브젝트의 하위 트리 전체를 하나의 단위로 취급하는 그리기 순서입니다. 자식끼리의 순서는 유지되지만 그룹 전체가 함께 움직이므로, 한 자식이 다른 그룹의 자식들 사이에 끼어드는 일이 없습니다.

SpriteComponent

스프라이트를 그립니다. 틴트, 뒤집기, 타일 및 9-슬라이스 모드를 지원합니다.

인스펙터 이름: 스프라이트 컴포넌트 · 카테고리: 2D · 유형: Deki2D::SpriteComponent

속성 유형 기본값 제약 설명
sprite AssetRef (Sprite) "" 그릴 이미지입니다. 스프라이트는 텍스처 에셋에서 가져오며, 전체를 쓰거나 스프라이트 시트에서 잘라 씁니다.
tintColor Color "#FFFFFFFF" 모든 픽셀에 곱해집니다. 흰색이면 이미지가 그대로이고, 어두운 틴트는 이미지를 어둡게 하며, 알파는 이미지를 흐리게 합니다.
renderMode enum "Normal" Normal, Tiled, NineSlice 일반은 스프라이트를 한 번 그립니다. 타일은 아래 크기를 채우도록 반복합니다. 9-슬라이스는 모서리를 그대로 두고 가운데를 늘리므로 패널과 버튼에 알맞습니다.
flipHorizontal bool false 왼쪽과 오른쪽을 뒤집습니다. 두 번째 스프라이트보다 가볍고, 캐릭터가 반대쪽을 보게 할 때 흔히 씁니다.
flipVertical bool false 위와 아래를 뒤집습니다.
width float 0 단위 m; renderMode이(가) 허용할 때 표시 그려지는 크기(미터)입니다. 0으로 두면 스프라이트 자체의 픽셀 크기를 프로젝트의 미터당 픽셀 수로 환산해 사용합니다.
height float 0 단위 m; renderMode이(가) 허용할 때 표시 그려지는 크기(미터)입니다. 0으로 두면 스프라이트 자체의 픽셀 크기를 프로젝트의 미터당 픽셀 수로 환산해 사용합니다.

RendererComponent에서 sortingOrder, ignoreClip, pixelSnap, alphaMode을(를) 상속합니다.

TextComponent

비트맵 폰트로 텍스트를 그립니다. 정렬과 단어 단위 줄 바꿈을 지원합니다.

인스펙터 이름: 텍스트 컴포넌트 · 카테고리: 2D · 유형: Deki2D::TextComponent

속성 유형 기본값 제약 설명
text string "" 그릴 문자열입니다. 줄 바꿈은 새 줄을 시작하며, 너비를 설정하면 단어 사이에서 줄을 바꿔 너비에 맞춥니다.
font AssetRef (BitmapFont) "" 비트맵 폰트 에셋입니다. 폰트는 고정 크기로 베이크되므로, 크게 확대·축소하기보다 원하는 크기에 가까운 폰트를 고르세요.
fontSize int32 16 에디터 미리 보기에만 쓰는 크기입니다. 장치에서는 폰트 에셋이 베이크된 크기로 그립니다.
width float 6.25 단위 m 텍스트 상자의 너비(미터)입니다. 정렬은 이 너비를 기준으로 하므로 텍스트가 더 짧아도 영향을 줍니다.
height float 1.5 단위 m 텍스트 상자의 높이(미터)입니다. 세로 정렬은 이 높이를 기준으로 합니다.
color Color "#FFFFFFFF" 글리프의 색상입니다.
decorationColor Color "#000000FF" 폰트 에셋을 외곽선이나 그림자와 함께 베이크했을 때 그 색상입니다. 장식 없는 폰트에서는 무시됩니다.
pixelScale int32 1 정수 배율 확대입니다. 2이면 글리프의 각 픽셀을 2x2 블록으로 그려 픽셀 폰트가 흐려지지 않고 선명하게 유지됩니다.
align enum "Left" Left, Center, Right 위의 너비 안에서의 가로 위치입니다.
verticalAlign enum "CapCenter" Top, Middle, Bottom, CapCenter, XCenter, TypoCenter, Baseline 위의 높이 안에서의 세로 위치입니다. 대문자 중앙은 대문자를 기준으로 맞추므로 보통 눈으로 보기에 가운데로 보입니다. 실제 중앙은 디센더까지 포함합니다.

RendererComponent에서 sortingOrder, ignoreClip, pixelSnap, alphaMode을(를) 상속합니다.

변경 내역

변경 내역은 영어로 되어 있습니다.

0.19.0

Changed

  • minEngine 0.19.0: built against engine 0.19.0, whose component metadata records the package each class is in. A build of this package from before does not load and is rebuilt.

Added

  • Japanese, Simplified Chinese and Korean: editor/lang/ja.json, zh.json and ko.json translate the names, tooltips and enum values this package's components show in the Inspector.
  • The package's editor text goes through the editor's translation (Tr), so it shows in the editor's language. Needs the editor release that adds Localization.h; raise minEngine to it when releasing.

0.18.2

Added

  • sprite_nine_slice CLI and MCP tool: sets an image's 9-slice borders.

Changed

  • A 9-slice or tiled sprite in RGB565 or RGB565A8 without a chroma key has its tint baked into the image it keeps of itself, baked again when the tint changes, and is drawn untinted: a copy of its opaque runs instead of a tint on every pixel, every frame. Tinted panels were most of the time in the T-Deck demo's GPS and LoRa screens, which went from 55 to 63 fps.

Fixed

  • A dithered gradient kept its pattern only at whole-number zoom: in the editor's scene view its Bayer cells were laid out in screen pixels, rounded to whole ones, and drifted against the gradient's own pixels, so each zoom showed a different, uneven stipple. The pattern is now laid out on the art grid like the colour, and zooming in only magnifies it. Zoomed far in, the bake was also capped below the screen's density and scaled twice, which made some cells twice as wide as others: drawn at its own size or larger it is now baked at art size and magnified once, so every cell is the same size and zooming no longer re-bakes it. Drawn smaller than its own size, the pattern stays a regular stipple in screen pixels, as in 0.17. On the device at 1:1 the picture is unchanged.

이전 릴리스: CHANGELOG.md


패키지의 리플렉션 데이터에서 생성했습니다(엔진 0.19.0). 속성 이름은 씬 파일에서 쓰는 키입니다. 이름을 바꿔도 별칭이 유지됩니다(호환성).