Sprites, text, animations, gradients, buttons, scrolling

Repository: github.com/dekiengine/deki-2d · Latest release: 1.2.0 · Needs engine 1.2.0+ · Requires: deki-rendering, deki-input

Install: DekiEditor --packages-add deki-2d <project>, or add it in the Package Manager. Part of Deki; the engine's own components and the C++ API are documented there.

Shown in the editor as 2D.

Components

Component	Category	Description
AnimationComponent	2D	Plays a frame animation asset on the object's sprite.
ButtonComponent	2D	Makes the object a button: tracks hover and press, and fires a click callback.
ButtonStyleComponent	2D	Gives a button its look per state, by tinting or by swapping sprites.
ClipComponent	Core	Clips its children's rendering to a rectangle.
GradientComponent	2D	Draws a procedural gradient: linear, radial or conical.
RollerComponent	2D	Picker wheel: spins through a list of values with momentum and snaps to one.
ScrollComponent	2D	Scrolls its children by dragging, with momentum.
ScrollElement	2D	Declares one list item's size so its Scroll Component can lay the list out.
SortingGroupComponent	2D	Makes its children sort together as one unit against the rest of the scene.
SpriteComponent	2D	Draws a sprite, with tint, flip, and tiled or 9-slice modes.
TextComponent	2D	Draws text with a bitmap font, alignment and word wrap.

Feature flags

Compile-time features the package exposes (package.json):

Feature	Define	Default
Sprites	DEKI_FEATURE_SPRITE	on
Text	DEKI_FEATURE_TEXT	on
Animation	DEKI_FEATURE_ANIMATION	on
Gradients	DEKI_FEATURE_GRADIENT	on
Buttons	DEKI_FEATURE_BUTTON	on
Scrolling	DEKI_FEATURE_SCROLL	on
Rollers	DEKI_FEATURE_ROLLER	on
Clipping	DEKI_FEATURE_CLIP	on
Sorting Groups	DEKI_FEATURE_SORTING_GROUP	on
Input	DEKI_FEATURE_INPUT	on

Component reference

AnimationComponent

Plays a frame animation asset on the object's sprite.

Inspector name: Animation Component · Category: 2D · Type GUID: 05f70a7a-334f-492f-9779-f3e351f64d9a

Property	Type	Default
animation	AssetRef (FrameAnimationData)	""
currentSequence	int32	0
currentFrame	int32	0
isPlaying	bool	false
hasFinished	bool	false
playOnceOverride	bool	false

ButtonComponent

Makes the object a button: tracks hover and press, and fires a click callback.

Inspector name: Button Component · Category: 2D · Type GUID: e6bb6f32-be31-4af1-a152-32cd21f490f3

Property	Type	Default	Constraints
inputCollider	ObjectRef (InputCollider)	0
state	enum	Normal	Normal, Hovered, Pressed, Disabled
isEnabled	bool	true

ButtonStyleComponent

Gives a button its look per state, by tinting or by swapping sprites.

Inspector name: Button Style Component · Category: 2D · Type GUID: 0c34e973-6cd1-45d2-b2c6-f010ba320707

Property	Type	Default	Constraints
button	ObjectRef (ButtonComponent)	0
sprite	ObjectRef (SpriteComponent)	0
transition	enum	ColorTint	ColorTint, SpriteSwap
normalColor	Color	0xFFFFFFFF	shown when transition allows
hoveredColor	Color	0xC8C8C8FF	shown when transition allows
pressedColor	Color	0xA0A0A0FF	shown when transition allows
disabledColor	Color	0x80808080	shown when transition allows
normalSprite	AssetRef (Sprite)	""	shown when transition allows
hoveredSprite	AssetRef (Sprite)	""	shown when transition allows
pressedSprite	AssetRef (Sprite)	""	shown when transition allows
disabledSprite	AssetRef (Sprite)	""	shown when transition allows

ClipComponent

Clips its children's rendering to a rectangle.

Inspector name: Clip Component · Category: Core · Type GUID: 063a42d4-bfe1-49b9-b620-0cbf87ad720f

Property	Type	Default	Constraints
width	float	6.25	in m
height	float	6.25	in m
sortingOrder	int32	0

GradientComponent

Draws a procedural gradient: linear, radial or conical.

Inspector name: Gradient Component · Category: 2D · Type GUID: 8d84cca3-7eb9-4b92-ba49-968ceec203c8

Property	Type	Default	Constraints
gradientType	enum	Linear	Linear, Radial, Conical
tileMode	enum	None	None, Horizontal, Vertical, Both, Mirror
ditherMode	enum	Ordered4x4	None, Ordered2x2, Ordered4x4, Ordered8x8, Ordered16x16
ditherScale	uint8	1
width	float	0	in m
height	float	0	in m
angle	float	0	in rad
centerX	float	0.5
centerY	float	0.5
radius	float	0.5
stopCount	uint8	2
stop1Position	float	0
stop1Color	Color	0xFFFFFFFF
stop2Position	float	1	shown when stopCount allows
stop2Color	Color	0x000000FF	shown when stopCount allows
stop3Position	float	0	shown when stopCount allows
stop3Color	Color	0x000000FF	shown when stopCount allows
stop4Position	float	0	shown when stopCount allows
stop4Color	Color	0x000000FF	shown when stopCount allows
tileWidth	float	0	in m
tileHeight	float	0	in m

Inherits sortingOrder, ignoreClip, pixelSnap, alphaMode from RendererComponent.

RollerComponent

Picker wheel: spins through a list of values with momentum and snaps to one.

Inspector name: Roller Component · Category: 2D · Type GUID: 72e6d6c3-ec5d-4c8f-8411-4d31824b944e

Property	Type	Default	Constraints
inputCollider	ObjectRef (InputCollider)	0
width	float	6.25	in m
itemHeight	float	1.875	in m
visibleRows	int32	3
infiniteScroll	bool	false
reverseDrag	bool	false
options	Array<string>	[]
selectedIndex	int32	0
deceleration	float	0.95
snapSpeed	float	8
selectedItemHeight	float	2.5	in m
selectedColor	Color	0xFFFFFFFF
normalColor	Color	0x808080FF
selectedFontSize	int32	24
normalFontSize	int32	16

ScrollComponent

Scrolls its children by dragging, with momentum.

Inspector name: Scroll Component · Category: 2D · Type GUID: 2d1b84cb-8881-4457-8361-98dec7a84498

Property	Type	Default	Constraints
inputCollider	ObjectRef (InputCollider)	0
mode	enum	NonTemplate	NonTemplate, Template
itemScene	AssetRef (Scene)	""	shown when mode allows
direction	enum	Vertical	Vertical, Horizontal
itemSpacing	float	0	in m
paddingTop	float	0	in m
paddingBottom	float	0	in m
paddingLeft	float	0	in m
paddingRight	float	0	in m
deceleration	float	0.95
bounceStiffness	float	0.15
enableBounce	bool	true
enableInertia	bool	true
reverseDrag	bool	false

ScrollElement

Declares one list item's size so its Scroll Component can lay the list out.

Inspector name: Scroll Element · Category: 2D · Type GUID: dcc9b892-ec9b-4eae-90d5-561b5591860a

Property	Type	Default	Constraints	Description
width	float	6.25	in m
height	float	3.75	in m

SortingGroupComponent

Makes its children sort together as one unit against the rest of the scene.

Inspector name: Sorting Group Component · Category: 2D · Type GUID: 8d743475-7905-4cca-b12c-9c397162851d

Property	Type	Default	Constraints	Description
sortingOrder	int32	0

SpriteComponent

Draws a sprite, with tint, flip, and tiled or 9-slice modes.

Inspector name: Sprite Component · Category: 2D · Type GUID: ca17ba76-f46d-484d-97ff-6e8e5497ef8d

Property	Type	Default	Constraints
sprite	AssetRef (Sprite)	""
tintColor	Color	0xFFFFFFFF
renderMode	enum	Normal	Normal, Tiled, NineSlice
width	float	0	in m; shown when renderMode allows
height	float	0	in m; shown when renderMode allows

Inherits sortingOrder, ignoreClip, pixelSnap, alphaMode from RendererComponent.

TextComponent

Draws text with a bitmap font, alignment and word wrap.

Inspector name: Text Component · Category: 2D · Type GUID: 5447ea24-d11f-4161-ae10-2f11e0a18d09

Property	Type	Default	Constraints
text	string	""
font	AssetRef (BitmapFont)	""
fontSize	int32	16
width	float	6.25	in m
height	float	1.5	in m
color	Color	0xFFFFFFFF
decorationColor	Color	0x000000FF
pixelScale	int32	1
align	enum	Left	Left, Center, Right
verticalAlign	enum	CapCenter	Top, Middle, Bottom, CapCenter, XCenter, TypoCenter, Baseline

Inherits sortingOrder, ignoreClip, pixelSnap, alphaMode from RendererComponent.

Generated from the package's reflection metadata by the Deki documentation build (engine 1.3.0). Reflected property names are the keys scene files use; a rename ships with an alias, see COMPATIBILITY.md.