Spine Element
Spine Elements let you bring advanced, bone-based animations into your UI Editor layouts. Using Spine’s JSON or binary runtime data, you can display and control skeletal animations with smooth, frame-independent motion.
Spine animations can be created in the Spine 2D software, and imported into the UI Editor to use in your QSApp layouts.
When to Use a Spine Element
- Character Animations
Use Spine for 2D characters that walk, run, jump, or emote with fluid skeletal rigging. - Interactive Feedback
Trigger Spine animations on user events. - Complex UI Transitions
Animate UI components—like menus or modal dialogs—with bone-driven “hinge” or “flip” effects.
Spine Element Properties
| Property | Type | Details |
|---|---|---|
| Name | text | Name of the element. Make sure the name of the element is unique if the element needs to be accessible from code (Enterprise Plan only). |
| Spine | File picker | Spine file path for the element. |
| Spine Origin | .% | Relative coordinates for the spine's origin. The default coordinates (x: 0.5, y: 1) sets the Spine's origin to the middle of the bottom edge, which is typical for standing characters. |
| Animation | text | Default spine animation to start with. This field populates a list of animations from the imported Spine file path, which can be selected from. |
| Skin | text | Default spine skin to use. Multiple skins can be set by using a comma separated list (i.e. skin1, skin2, ...) |
| Anchor | .% | Used to position the anchor point of the element (x: 0, y: 0 = top/left, x: 1, y: 1 = bottom/right) |
| Parent Align | .% | Position of the element relative to its parent’s position. (x: 0, y: 0 = top/left, x: 1, y: 1 = bottom/right) |
| Parent Size | .% | Use to resize the element relative to its parent's size (x: 1, y: 1 = match parent size, x: 0.5, y: 0.5 = half of parent size, x: 0, y: 0 = disables parent relative sizing). |
| Content size | .% | Use to set the element's size automatically based on its content. (x: 1, y: 1 = match parent size, x: 1, y: 1 = matches the size of the provided sprite, x: 2, y: 2 = doubles the size of the provided sprite). |
| Size | px | Explicitly set pixel size (logical screen units). |
| Offset | px | Additional pixel offset from the element's position. |
Transform Properties
Transform properties affect the Element, as well as any child elements nested within the Element.
| Property | Type | Notes |
|---|---|---|
| Pivot | .% | Pivot point for any transformations applied to the element. (x: 0, y: 0 = top/left, x: 0.5, y: 0.5 = center, x: 1, y: 1 = bottom/right). |
| Angle | Degrees | Rotate the element around its Pivot point. |
| Skew | Degrees | Skew along X/Y axes around the Pivot point. |
| Scale | .% | Percentage scale of the element. Setting this value to x: 2, y: 2 scales the element twice as large. |
| Alpha | .% | Transparency applied to the element. The default value 1 displays the element fully opaque, while 0.5 would make the element semi-transparent. Setting the value to 0 makes the element completely disappear. |
Modifiers
Modifiers are vital to creating different visual states for your elements in the UI Editor. They allow you to set up visual state changes and transitions using various properties such as size, position, alpha, etc.
Animations
The Animations section allows you to create Animation States which can be triggered using Events. They're useful for switching between Animations when certain Events or actions occur.
| Property | Type | Notes |
|---|---|---|
| State | text | The name of the Emit state. This is used to access the Emit from Events. |
| Animation | text | The animation to use for this Animation state. This field populates a list of animations from the imported Spine file path, which can be selected from. |
| Looping | checkbox | Enable or disable animation looping. |
| Delay | seconds | The delay in seconds before the animation is played. |
| Mix Time | seconds | The time is takes for one animation to transition to the next animation. |
| Speed | .% | The speed at which the animation plays. The default is 1, which plays the animation at full-speed. |
Sounds
Sounds are very similar to Modifiers, but instead of creating visual effects, they create sound effects which can be triggered using Events.
Triggers
Triggers allow you to add interactivity to your QSApp by enabling the ability to trigger modifiers and events when the trigger is activated. You can add triggers for actions like clicking, hovering, and dragging elements.