A Defold native extension exposing the Yoga layout library via a Lua wrapper.
Currently supports macOS, Windows, Linux and HTML5, iOS, and Android.
You can use Yoga in your own project by adding this project as a Defold library dependency.
Add the latest archive URL from the
releases page to your
dependencies field in game.project.
Yoga is a high performance C++ library which implements the Flexbox specification. Basic usage consists of four steps:
- Creating the Yoga nodes and setting their styles
- Initializing the node tree by attaching children to parents with
set_parent - Calling
calculate_layoutto compute the layout position and size of each node - (optional) Updating the Defold Gui nodes using
update_node
Yoga's layout algorithm assumes you are working in a traditional document coordinate system, with the (0,0) being at the top left corner.
However, Defold uses the bottom left corner as (0,0). To account for this the Defold Yoga extension will apply styles in a way that "inverts" the y-coordinate.
What this essentially means is that setting FLEX_DIRECTION_COLUMN will actually set FLEX_DIRECTION_COLUMN_REVERSE, and vice-versa.
This also applies to usage of EDGE_TOP and EDGE_BOTTOM.
To opt-out of this behavior you can disable it by calling yoga.set_invert_y(false).
The example in this repo demonstrates a simple three row layout with a fixed size header and footer, and a body that scales to fill the area.
View the live demo here
All functions take a gui node as their first argument. This is used as the lookup key for the underlying YGNode.
yoga.new_node(node: node): void
yoga.update_node(node: node): void
yoga.free_node(node: node): void
yoga.delete_node(node: node): void
yoga.reset_node(node: node): void
yoga.set_parent(child: node, parent: node, keep_scene_transform: boolean): void
yoga.get_direction(node: node): yoga.DIRECTION
yoga.set_direction(node: node, direction: yoga.DIRECTION): void
yoga.get_overflow(node: node): yoga.OVERFLOW
yoga.set_overflow(node: node, overflow: yoga.OVERFLOW): void
yoga.get_display(node: node): yoga.DISPLAY
yoga.set_display(node: node, display: yoga.DISPLAY): void
yoga.get_position_type(node: node): yoga.POSITION_TYPE
yoga.set_position_type(node: node, position_type: yoga.POSITION_TYPE): void
yoga.get_position(node: node, edge: yoga.EDGE): number
yoga.set_position(node: node, edge: yoga.EDGE, position: any): void
yoga.set_position_percent(node: node, edge: yoga.EDGE, position: any): void
yoga.get_flex_position(node: node): number
yoga.set_flex_position(node: node, flex_position: any): void
yoga.get_flex_direction(node: node): number
yoga.set_flex_direction(node: node, flex_direction: any): void
yoga.get_align_items(node: node): yoga.ALIGN
yoga.set_align_items(node: node, align_items: yoga.ALIGN): void
yoga.get_align_content(node: node): yoga.ALIGN
yoga.set_align_content(node: node, align_content: yoga.ALIGN): void
yoga.get_justify_content(node: node): yoga.JUSTIFY
yoga.set_justify_content(node: node, justify_content: yoga.JUSTIFY): void
yoga.get_grow(node: node): number
yoga.set_grow(node: node, grow: number): void
yoga.get_shrink(node: node): number
yoga.set_shrink(node: node, shrink: number): void
yoga.get_basis(node: node): number
yoga.set_basis(node: node, basis: number): void
yoga.set_basis_percent(node: node, basis: number): void
yoga.get_width(node: node): number
yoga.set_width(node: node, width: number): void
yoga.set_width_percent(node: node, width: number): void
yoga.get_min_width(node: node): number
yoga.set_min_width(node: node, min_width: number): void
yoga.set_min_width_percent(node: node, min_width: number): void
yoga.get_max_width(node: node): number
yoga.set_max_width(node: node, max_width: number): void
yoga.set_max_width_percent(node: node, max_width: number): void
yoga.get_height(node: node): number
yoga.set_height(node: node, height: number): void
yoga.set_height_percent(node: node, height: number): void
yoga.get_min_height(node: node): number
yoga.set_min_height(node: node, min_height: number): void
yoga.set_min_height_percent(node: node, min_height: number): void
yoga.get_max_height(node: node): number
yoga.set_max_height(node: node, max_height: number): void
yoga.set_max_height_percent(node: node, max_height: number): void
yoga.get_aspect_ratio(node: node): number
yoga.set_aspect_ratio(node: node, aspect_ratio: number): void
yoga.get_border(node: node, edge: yoga.EDGE): vmath.vector4
yoga.set_border(node: node, edge: yoga.EDGE, border: number): void
yoga.get_padding(node: node, edge: yoga.EDGE): vmath.vector4
yoga.set_padding(node: node, edge: yoga.EDGE, padding: number): void
yoga.set_padding_percent(node: node, edge: yoga.EDGE, padding: number): void
yoga.get_margin(node: node, edge: yoga.EDGE): vmath.vector4
yoga.set_margin(node: node, edge: yoga.EDGE, margin: number): void
yoga.set_margin_percent(node: node, edge: yoga.EDGE, margin: number): void
yoga.calculate_layout(node: node): void
yoga.get_layout(node: node): { x: number, y: number, width: number, height: number }
yoga.get_layout_left(node: node): number
yoga.get_layout_top(node: node): number
yoga.get_layout_right(node: node): number
yoga.get_layout_bottom(node: node): number
yoga.get_layout_width(node: node): number
yoga.get_layout_height(node: node): number
yoga.get_layout_border(node: node): number
yoga.get_layout_margin(node: node): number
yoga.get_layout_padding(node: node): number
yoga.set_invert_y(inverted: boolean): void
yoga.set_capacity(capacity: number): void
MIT License