Partydeck/Druid-Extension
3
0
Fork 0
mirror of https://github.com/Insality/druid synced 2025-06-27 18:37:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update README and components documentation

Browse Source
This commit is contained in:
Insality 2020-09-28 21:56:46 +03:00
parent 453c8327c8
commit 59aed96d33
2 changed files with 70 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
README.md
View File

@ -1,11 +1,8 @@
[![](media/druid_logo.png)](https://insality.github.io/druid/) [![](media/druid_logo.png)](https://insality.github.io/druid/)
[![GitHub release (latest by date)](https://img.shields.io/github/v/release/insality/druid)](https://github.com/Insality/druid/releases) [![GitHub release (latest by date)](https://img.shields.io/github/v/release/insality/druid)](https://github.com/Insality/druid/releases)
**Druid** - powerful Defold component UI library. Use basic **Druid** components or make your own game-specific components to make amazing GUI in your games. **Druid** - powerful Defold component UI library. Use basic and extended **Druid** components or make your own game-specific components to make amazing GUI in your games.
## Setup ## Setup
@ -35,7 +32,7 @@ For **Druid** to work requires next input bindings:
### Input capturing [optional] ### Input capturing [optional]
By default, **Druid** will auto-capture input focus, if any input component will be created. So you don't need to call `msg.post(".", "acquire_input_focus)"` By default, **Druid** will auto-capture input focus, if any input component will be created. So you don't need to call `msg.post(".", "acquire_input_focus")`
If you not need this behaviour, you can disable it by settings `druid.no_auto_input` field in _game.project_: If you not need this behaviour, you can disable it by settings `druid.no_auto_input` field in _game.project_:
``` ```
@ -76,35 +73,19 @@ druid.on_window_callback(event)
## Components ## Components
**Druid** provides next basic components: **Druid** provides next *basic* components:
- **[Button](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#button)** - Basic Druid input component - **[Button](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#button)** - Basic Druid button input component. Handles all types of interaction (tap, long-tap, hold-tap, double-tap, simple key triggers, etc)
- **[Text](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#text)** - Basic Druid text component - **[Text](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#text)** - Basic Druid text component. Wrap on gui text node, handle text size adjusting.
- **[Lang text](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#lang-text)** - Wrap on Text component to handle localization
- **[Scroll](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#scroll)** - Basic Druid scroll component - **[Scroll](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#scroll)** - Basic Druid scroll component
- **[Progress](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#progress)** - Basic Druid progress bar component
- **[Slider](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#slider)** - Basic Druid slider component
- **[Input](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#input)** - Basic Druid text input component (unimplemented)
- **[Checkbox](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox)** - Basic Druid checkbox component
- **[Checkbox group](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox-group)** - Several checkboxes in one group
- **[Radio group](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#radio-group)** - Several checkboxes in one group with single choice
- **[Blocker](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#blocker)** - Block input in node zone component - **[Blocker](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#blocker)** - Block input in node zone component
- **[Back Handler](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#back-handler)** - Handle back button (Android back, backspace) - **[Back Handler](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#back-handler)** - Handle back button (Android back button, backspace key)
- **[Timer](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#timer)** - Handle timer work on gui text node - **[Static Grid](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#static-grid)** - Component for manage node positions with equal sizes
- **[Grid](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#grid)** - Component for manage node positions
- **[Hover](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#hover)** - System Druid component, handle hover node state - **[Hover](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#hover)** - System Druid component, handle hover node state
@ -112,6 +93,27 @@ druid.on_window_callback(event)
- **[Drag](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#drag)** - System Druid component, handle drag input on node - **[Drag](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#drag)** - System Druid component, handle drag input on node
**Druid** also provides next *extended* components:
***Note**: In future, to use extended components, you should register them first. It's required for make **Druid** modular - to exclude unused components from build*
- **[Checkbox](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox)** - Checkbox component
- **[Checkbox group](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox-group)** - Several checkboxes in one group
- **[Dynamic Grid](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#dynamic-grid)** - Component for manage node positions with different sizes. Only in one row or column
- **[Input](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#input)** - User text input component
- **[Lang text](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#lang-text)** - Wrap on Text component to handle localization
- **[Progress](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#progress)** - Progress bar component
- **[Radio group](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#radio-group)** - Several checkboxes in one group with single choice
- **[Slider](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#slider)** - Slider component
- **[Timer](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#timer)** - Handle timer work on gui text node
Full info see on _[components.md](https://github.com/Insality/druid/blob/master/docs_md/01-components.md)_ Full info see on _[components.md](https://github.com/Insality/druid/blob/master/docs_md/01-components.md)_
@ -157,7 +159,7 @@ Any **Druid** components as callbacks uses [Druid Events](https://insality.githu
Any events can handle several callbacks, if needed. Any events can handle several callbacks, if needed.
## Druid lifecycle ## Druid Lifecycle
Here is full druid lifecycle setup in your ***.gui_script** file: Here is full druid lifecycle setup in your ***.gui_script** file:
```lua ```lua
@ -213,6 +215,7 @@ Try the [HTML5 version](https://insality.github.io/druid/druid/) of the example
To learn **Druid** better, read next documentation: To learn **Druid** better, read next documentation:
- [Druid components](https://github.com/Insality/druid/blob/master/docs_md/01-components.md) - [Druid components](https://github.com/Insality/druid/blob/master/docs_md/01-components.md)
- [Create custom components](https://github.com/Insality/druid/blob/master/docs_md/02-creating_custom_components.md) - [Create custom components](https://github.com/Insality/druid/blob/master/docs_md/02-creating_custom_components.md)
- [See FAQ article](https://github.com/Insality/druid/blob/master/docs_md/FAQ.md)
- [Druid styles](https://github.com/Insality/druid/blob/master/docs_md/03-styles.md) - [Druid styles](https://github.com/Insality/druid/blob/master/docs_md/03-styles.md)
- [Druid asset store](https://github.com/Insality/druid/blob/master/docs_md/04-druid_assets.md) - [Druid asset store](https://github.com/Insality/druid/blob/master/docs_md/04-druid_assets.md)

48
docs_md/01-components.md
View File

@ -13,6 +13,9 @@ Basic Druid input component. Handle input on node and provide different callback
Create button with druid: `button = druid:new_button(node_name, callback, [params], [animation_node])` Create button with druid: `button = druid:new_button(node_name, callback, [params], [animation_node])`
Where node name is name of node from GUI scene. You can use `node_name` as input trigger zone and point another node for animation via `animation_node` Where node name is name of node from GUI scene. You can use `node_name` as input trigger zone and point another node for animation via `animation_node`
### Usecase
_fill example usecases_
### Notes ### Notes
- Button callback have next params: (self, params, button_instance) - Button callback have next params: (self, params, button_instance)
- **self** - Druid self context - **self** - Druid self context
@ -146,6 +149,7 @@ Key is value from druid const: const.SIDE.X (or just "x") or const.SIDE.Y (or ju
- Progress bar can fill only by vertical or horizontal size. If you want make diagonal progress bar, just rotate node in GUI scene - Progress bar can fill only by vertical or horizontal size. If you want make diagonal progress bar, just rotate node in GUI scene
- If you have glitchy or dark texture bug with progress bar, try to disable mipmaps in your texture profiles - If you have glitchy or dark texture bug with progress bar, try to disable mipmaps in your texture profiles
## Slider ## Slider
[Slider API here](https://insality.github.io/druid/modules/druid.slider.html) [Slider API here](https://insality.github.io/druid/modules/druid.slider.html)
@ -161,11 +165,12 @@ Pin node (node_name in params) should be placed in zero position (initial). It w
- You can setup points of interests on slider via `slider:set_steps`. If steps are exist, slider values will be only from this steps (notched slider) - You can setup points of interests on slider via `slider:set_steps`. If steps are exist, slider values will be only from this steps (notched slider)
- For now, start pos and end pos should be on vertical or horizontal line (their x or y value should be equal) - For now, start pos and end pos should be on vertical or horizontal line (their x or y value should be equal)
## Input ## Input
[Input API here](https://insality.github.io/druid/modules/druid.input.html) [Input API here](https://insality.github.io/druid/modules/druid.input.html)
### Overview ### Overview
Basic Druid text input component (unimplemented) Basic Druid text input component
### Setup ### Setup
Create input component with druid: `input = druid:new_input(button_node_name, text_node_name, keyboard_type)` Create input component with druid: `input = druid:new_input(button_node_name, text_node_name, keyboard_type)`
@ -194,6 +199,7 @@ Create checkbox component with druid: `checkbox = druid:new_checkbox(node, callb
- Checkbox uses button to handle click - Checkbox uses button to handle click
- You can setup another node to handle input with click_node arg in component init: `druid:new_checkbox(node, callback, [click_node])` - You can setup another node to handle input with click_node arg in component init: `druid:new_checkbox(node, callback, [click_node])`
## Checkbox group ## Checkbox group
[Checkbox group API here](https://insality.github.io/druid/modules/druid.checkbox_group.html) [Checkbox group API here](https://insality.github.io/druid/modules/druid.checkbox_group.html)
@ -222,6 +228,7 @@ Create radio_group component with druid: `group = druid:new_radio_group(nodes[],
- You can get/set radio_group state with `group:set_state()` and `group:get_state()` - You can get/set radio_group state with `group:set_state()` and `group:get_state()`
- Only different from checkbox_group: on click another checkboxes in this group will be unchecked - Only different from checkbox_group: on click another checkboxes in this group will be unchecked
## Timer ## Timer
[Timer API here](https://insality.github.io/druid/modules/druid.timer.html) [Timer API here](https://insality.github.io/druid/modules/druid.timer.html)
@ -236,21 +243,46 @@ Create timer component with druid: `timer = druid:new_timer(text_node, from_seco
- Timer will setup text node with current timer value - Timer will setup text node with current timer value
- Timer uses update function to handle time - Timer uses update function to handle time
## Grid
[Grid API here](https://insality.github.io/druid/modules/druid.grid.html) ## Static Grid
[Static Grid API here](https://insality.github.io/druid/modules/druid.static_grid.html)
### Overview ### Overview
Component for manage node positions. Very simple implementation for nodes with equal size Component for manage node positions. Static grid have constant node size, so it possible to calculate node positions before placement. Nodes can be placed with gaps. Static grid can shift elements on add/remove functions.
### Setup ### Setup
Create component with druid: `grid = druid:new_grid(parent_node, prefab_node, max_in_row_elements)` Create component with druid: `grid = druid:new_static_grid(parent_node, prefab_node, max_in_row_elements)`
### Notes ### Notes
- Grid on _adding elements_ will setup parent to _parent_node_ - On _add node_ grid will set node parent to _parent_node_
- You can get array of position of every element for setup points of interest in scroll component - You can get array of position of every element for setup points of interest in scroll component
- You can get size of all elements for setup size in scroll component - You can get size of all elements for setup size in scroll component
- You can adjust anchor and border between elements - You can also bind the grid to the scroll component for auto resize scroll content size
- _Prefab node_ in component init used to get grid item size - Pivot of parent_node matter for node placement
- _Prefab node_ used to get node size and anchor
- You can point *position_function* for animations with _static_grid:set_position_function(node, pos)_ callback. Default - *gui.set_position()*
## Dynamic Grid
[Dynamic Grid API here](https://insality.github.io/druid/modules/druid.dynamic_grid.html)
### Overview
Component for manage node positions with different node sizes. Unlike Static Grid, Dynamic Grid can place nodes only in one row or in one column. Dynamic Grid can't have gaps between elements - you will get error, if try spawn element far away from others. Dynamic Grid should have __West__, __East__, __South__ or __North__ pivot (vertical or horizontal element placement)
### Setup
Create component with druid: `grid = druid:new_dynamic_grid(parent_node)`
Check the _parent_node_ have correct pivot point. You will get the error otherwise.
### Notes
- On _add node_ grid will set node parent to _parent_node_
- You can get array of position of every element for setup points of interest in scroll component
- You can get size of all elements for setup size in scroll component
- You can also bind the grid to the scroll component for auto resize scroll content size
- Pivot of parent_node matter for node placement
- You can point *position_function* for animations with _static_grid:set_position_function(node, pos)_ callback. Default - *gui.set_position()*
- First node placed at Grid pivot point. Other nodes placed nearby of other nodes.
- On *add/remove* nodes always shifted. You can point the shift side in this functions (*is_shift_left* boolean argument)
## Hover ## Hover
[Hover API here](https://insality.github.io/druid/modules/druid.hover.html) [Hover API here](https://insality.github.io/druid/modules/druid.hover.html)