Compare commits
41 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
5688707b62 | ||
|
133e07704b | ||
|
f9a46c167f | ||
|
cd2315bb0a | ||
|
7b381f1708 | ||
|
2cfc6e477e | ||
|
0539746519 | ||
|
8815ca8896 | ||
|
55bcea7878 | ||
|
07e847497c | ||
|
8ff7cd1015 | ||
|
4f9274c359 | ||
|
0ab794f86c | ||
|
4cd5c55155 | ||
|
179ac5c068 | ||
|
48bd0da429 | ||
|
9dd3a029ad | ||
|
d24107550a | ||
|
7821c031dd | ||
|
017138b5ff | ||
|
7c22032004 | ||
|
696622b42b | ||
|
959f367dd7 | ||
|
a451c3b117 | ||
|
a0e5abeffd | ||
|
ed39091a8e | ||
|
d650c2393b | ||
|
7b2578c0ef | ||
|
6367e66203 | ||
|
59d7635cf8 | ||
|
a86d826ae1 | ||
|
bdf9de239d | ||
|
d2d4ffcad4 | ||
|
278a61b99d | ||
|
f769f80b10 | ||
|
21d61a60e0 | ||
|
05af3801d7 | ||
|
d67ab56d51 | ||
|
84d2f3bf17 | ||
|
672d221019 | ||
|
a7e62e3df0 |
168
README.md
@@ -1,29 +1,56 @@
|
||||
|
||||
|
||||
|
||||
[](https://insality.github.io/druid/)
|
||||
|
||||
**Druid** - powerful defold component UI library. Use basic druid components or make your own game-specific components to make amazing GUI in your games.
|
||||
[](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.
|
||||
|
||||
|
||||
## Setup
|
||||
|
||||
### Dependency
|
||||
|
||||
You can use the druid extension in your own project by adding this project as a [Defold library dependency](https://www.defold.com/manuals/libraries/). Open your game.project file and in the dependencies field under project add:
|
||||
You can use the **Druid** extension in your own project by adding this project as a [Defold library dependency](https://www.defold.com/manuals/libraries/). Open your game.project file and in the dependencies field under project add:
|
||||
|
||||
> [https://github.com/Insality/druid/archive/master.zip](https://github.com/Insality/druid/archive/master.zip)
|
||||
|
||||
Or point to the ZIP file of a [specific release](https://github.com/Insality/druid/releases).
|
||||
|
||||
### Input bindings
|
||||
|
||||
### Code
|
||||
For **Druid** to work requires next input bindings:
|
||||
|
||||
Adjust druid settings, if needed:
|
||||
- Mouse trigger - `Button 1` -> `touch` _For basic input components_
|
||||
- Key trigger - `Backspace` -> `back` _For back_handler component_
|
||||
- Key trigger - `Back` -> `back` _For back_handler component, Android back button_
|
||||
|
||||

|
||||
|
||||
|
||||
### 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)"`
|
||||
|
||||
If you not need this behaviour, you can disable it by settings `druid.no_auto_input` field in _game.project_:
|
||||
```
|
||||
[druid]
|
||||
no_auto_input = 1
|
||||
```
|
||||
|
||||
### Code [optional]
|
||||
|
||||
Adjust **Druid** settings, if needed:
|
||||
```lua
|
||||
local druid = require("druid.druid")
|
||||
|
||||
-- Used for button component and custom components
|
||||
-- Callback should play sound by name
|
||||
druid.set_sound_function(callback)
|
||||
|
||||
-- Used for lang_text component
|
||||
-- Callback should return localized string by locale id
|
||||
druid.set_text_function(callback)
|
||||
|
||||
-- Used for change default druid style
|
||||
@@ -33,69 +60,123 @@ druid.set_default_style(your_style)
|
||||
|
||||
## Components
|
||||
|
||||
Druid provides next basic components:
|
||||
- **Button** - Basic game button
|
||||
**Druid** provides next basic components:
|
||||
|
||||
- **Text** - Wrap on text node with text size adjusting
|
||||
- **[Button](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#button)** - Basic Druid input component
|
||||
|
||||
- **Blocker** - Block input in node zone
|
||||
- **[Text](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#text)** - Basic Druid text component
|
||||
|
||||
- **Back Handler** - Handle back button (Android, backspace)
|
||||
- **[Lang text](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#lang-text)** - Wrap on Text component to handle localization
|
||||
|
||||
- **Lang text** - Text component with handle localization system
|
||||
- **[Scroll](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#scroll)** - Basic Druid scroll component
|
||||
|
||||
- **Timer** - Run timer on text node
|
||||
- **[Progress](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#progress)** - Basic Druid progress bar component
|
||||
|
||||
- **Progress** - Basic progress bar
|
||||
- **[Slider](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#slider)** - Basic Druid slider component
|
||||
|
||||
- **Scroll** - Basic scroll component
|
||||
- **[Input](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#input)** - Basic Druid text input component (unimplemented)
|
||||
|
||||
- **Grid** - Component for manage node positions
|
||||
- **[Checkbox](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox)** - Basic Druid checkbox component
|
||||
|
||||
- **Slider** - Basic slider component
|
||||
- **[Checkbox group](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox-group)** - Several checkboxes in one group
|
||||
|
||||
- **Checkbox** - Basic checkbox 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
|
||||
|
||||
- **Checkbox group** - Several checkboxes in one group
|
||||
- **[Blocker](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#blocker)** - Block input in node zone component
|
||||
|
||||
- **Radio group** - Several checkboxes in one group with single choice
|
||||
- **[Back Handler](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#back-handler)** - Handle back button (Android back, backspace)
|
||||
|
||||
- **Hover** - Trigger component for check node hover state
|
||||
- **[Timer](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#timer)** - Handle timer work on gui text node
|
||||
|
||||
- **Input** - Component to process user text input
|
||||
- **[Grid](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#grid)** - Component for manage node positions
|
||||
|
||||
Full info see on _components.md_
|
||||
- **[Hover](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#hover)** - System Druid component, handle hover node state
|
||||
|
||||
Full info see on _[components.md](https://github.com/Insality/druid/blob/master/docs_md/01-components.md)_
|
||||
|
||||
|
||||
## Creating components
|
||||
## Basic usage
|
||||
|
||||
For using **Druid**, first you should create Druid instance to spawn components. Pass to new Druid instance main engine functions: *update*, *on_message* and *on_input*
|
||||
|
||||
All **Druid** components as arguments can apply node name string, you can don't do `gui.get_node()` before
|
||||
|
||||
All **Druid** and component methods calling with `:` like `self.druid:new_button()`
|
||||
|
||||
Any components creating via druid:
|
||||
```lua
|
||||
local druid = require("druid.druid")
|
||||
|
||||
local function button_callback(self)
|
||||
print("Button was clicked!")
|
||||
end
|
||||
|
||||
local function init(self)
|
||||
self.druid = druid.new(self)
|
||||
local button = self.druid:new_button(node_name, callback)
|
||||
local text = self.druid:new_text(node_text_name)
|
||||
self.druid:new_button("button_node_name", button_callback)
|
||||
end
|
||||
|
||||
function on_input(self, action_id, action)
|
||||
return self.druid:on_input(action_id, action)
|
||||
end
|
||||
```
|
||||
|
||||
## Druid Events
|
||||
|
||||
Any **Druid** components as callbacks uses [Druid Events](https://insality.github.io/druid/modules/druid_event.html). In component API ([button example](https://insality.github.io/druid/modules/druid.button.html#Events)) pointed list of component events. You can manually subscribe on this events by next API:
|
||||
|
||||
- **event:subscribe**(callback)
|
||||
|
||||
- **event:unsubscribe**(callback)
|
||||
|
||||
- **event:clear**()
|
||||
|
||||
Any events can handle several callbacks, if needed.
|
||||
|
||||
|
||||
## Druid lifecycle
|
||||
|
||||
Here is full druid lifecycle setup in your ***.gui_script** file:
|
||||
```lua
|
||||
local druid = require("druid.druid")
|
||||
|
||||
function init(self)
|
||||
self.druid = druid.new(self)
|
||||
end
|
||||
|
||||
function final(self)
|
||||
self.druid:final()
|
||||
end
|
||||
|
||||
function update(self, dt)
|
||||
self.druid:update(dt)
|
||||
end
|
||||
|
||||
function on_input(self, action_id, action)
|
||||
return self.druid:on_input(action_id, action)
|
||||
end
|
||||
|
||||
function on_message(self, message_id, message, sender)
|
||||
self.druid:on_message(message_id, message, sender)
|
||||
end
|
||||
|
||||
function on_input(self, action_id, action)
|
||||
self.druid:on_input(action_id, action)
|
||||
end
|
||||
```
|
||||
|
||||
- *on_input* used for almost all basic druid components
|
||||
- *update* used for progress bar, scroll and timer base components
|
||||
- *on_message* used for specific druid events, like language change or layout change (TODO: in future)
|
||||
- *final* used for custom components, what have to do several action before destroy
|
||||
|
||||
Recommended is fully integrate al druid lifecycles functions
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
- Druid input goes as stack. Last created button will checked first. So create your GUI from back
|
||||
- Don't forget about `return` in `on_input`: `return self.druid:on_input()`. It need, if you have more than 1 acquire inputs (several druid, other input system, etc)
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
See the [example folder](https://github.com/insality/druid/tree/develop/example/kenney) for examples of how to use Druid
|
||||
See the [example folder](https://github.com/Insality/druid/tree/develop/example) for examples of how to use **Druid**
|
||||
|
||||
See the [druid-assets repository](https://github.com/insality/druid-assets) for examples of how to create custom components and styles
|
||||
|
||||
@@ -104,13 +185,13 @@ Try the [HTML5 version](https://insality.github.io/druid/druid/) of the example
|
||||
|
||||
## Documentation
|
||||
|
||||
To learn druid better, read next documentation:
|
||||
- Druid components
|
||||
- Create custom components
|
||||
- Druid asset store
|
||||
- Druid Styles
|
||||
To learn **Druid** better, read next documentation:
|
||||
- [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)
|
||||
- [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)
|
||||
|
||||
Full druid documentation you can find here:
|
||||
Full **Druid** documentation you can find here:
|
||||
https://insality.github.io/druid/
|
||||
|
||||
|
||||
@@ -119,25 +200,14 @@ https://insality.github.io/druid/
|
||||
_Will fill later_
|
||||
|
||||
|
||||
## Future plans
|
||||
|
||||
- Basic input component
|
||||
|
||||
- Add on_layout_change support (to keep gui data between layout change)
|
||||
|
||||
- Add on_change_language support (call single function to update all druid instance)
|
||||
|
||||
- Better documentation and examples
|
||||
|
||||
- Add more comfortable gamepad support for GUI (ability to select button with DPAD and other stuff)
|
||||
|
||||
|
||||
## License
|
||||
|
||||
Original created by [AGulev](https://github.com/AGulev)
|
||||
|
||||
Developed and supporting by [Insality](https://github.com/Insality)
|
||||
|
||||
Assets from [Kenney](http://www.kenney.nl/)
|
||||
|
||||
MIT License
|
||||
|
||||
|
||||
|
@@ -1,38 +0,0 @@
|
||||
Simple to-do for Druid Alpha 0.2.0
|
||||
|
||||
|
||||
-- High
|
||||
+ remove button event and match_event from druid
|
||||
+ add hover component
|
||||
+ add druid events/triggers? better callback system
|
||||
+ better name for locale component? lang? lang_text?
|
||||
+ better name for slider component? Slider is ok
|
||||
+ Druid store assets - separate repository with rich components (progress_rich migrate)
|
||||
+ refactor on_swipe. To on_scroll? Add input priority
|
||||
+ separate custom data and predefined fields in components? Every component have their fields and events
|
||||
+ How to set custom sprites for button states?
|
||||
+ add druid settings (add auto_focus input and other stuff) (to game.project)
|
||||
|
||||
+ button add key trigger
|
||||
+ button and hover click restriction zone?
|
||||
+ button polish, actions
|
||||
+ better scroll size management, check different cases. So implicit now
|
||||
+ better callbacks for every components
|
||||
|
||||
- unify component api (get/set/to and other general stuff)
|
||||
- better grid + scroll management
|
||||
- better default style, add template for custom style
|
||||
- compare with gooey
|
||||
- add docs for all components
|
||||
- add docs folder for every component with gifs? Solutions
|
||||
- remove component autoremove all children component
|
||||
|
||||
|
||||
-- Low
|
||||
- add input_text component for alpha release
|
||||
- add code template and example for user components
|
||||
- custom input settings (name of touch, text, etc)
|
||||
- add good examples with template and/or nodes (basic component no use any of them)
|
||||
- try use final druid in real project (FI uses custom druid) (use in 4321?)
|
||||
- ability to relocalize all locale text nodes
|
||||
- ability to control buttons via controller. Select it by cursor (d-pad)
|
@@ -1 +1 @@
|
||||
{"content":[{"name":"game.projectc","size":2584,"pieces":[{"name":"game.projectc0","offset":0}]},{"name":"game.arci","size":4608,"pieces":[{"name":"game.arci0","offset":0}]},{"name":"game.arcd","size":274093,"pieces":[{"name":"game.arcd0","offset":0}]},{"name":"game.dmanifest","size":9895,"pieces":[{"name":"game.dmanifest0","offset":0}]},{"name":"game.public.der","size":162,"pieces":[{"name":"game.public.der0","offset":0}]}]}
|
||||
{"content":[{"name":"game.projectc","size":2713,"pieces":[{"name":"game.projectc0","offset":0}]},{"name":"game.arci","size":4688,"pieces":[{"name":"game.arci0","offset":0}]},{"name":"game.arcd","size":264687,"pieces":[{"name":"game.arcd0","offset":0}]},{"name":"game.dmanifest","size":10104,"pieces":[{"name":"game.dmanifest0","offset":0}]},{"name":"game.public.der","size":162,"pieces":[{"name":"game.public.der0","offset":0}]}]}
|
@@ -43,7 +43,7 @@ default_texture_mag_filter = linear
|
||||
max_draw_calls = 1024
|
||||
max_characters = 8192
|
||||
max_debug_vertices = 10000
|
||||
texture_profiles = /builtins/graphics/default.texture_profiles
|
||||
texture_profiles = /example/custom.texture_profiles
|
||||
|
||||
[sound]
|
||||
gain = 1
|
||||
@@ -61,7 +61,7 @@ repeat_delay = 0.5
|
||||
repeat_interval = 0.2
|
||||
gamepads = /builtins/input/default.gamepadsc
|
||||
game_binding = /input/game.input_bindingc
|
||||
use_accelerometer = 1
|
||||
use_accelerometer = 0
|
||||
|
||||
[sprite]
|
||||
max_count = 128
|
||||
@@ -114,13 +114,15 @@ bundle_identifier = example.unnamed
|
||||
|
||||
[html5]
|
||||
custom_heap_size = 0
|
||||
heap_size = 256
|
||||
heap_size = 64
|
||||
htmlfile = /builtins/manifests/web/engine_template.html
|
||||
cssfile = /builtins/manifests/web/light_theme.css
|
||||
archive_location_prefix = archive
|
||||
show_fullscreen_button = 1
|
||||
show_made_with_defold = 1
|
||||
scale_mode = downscale_fit
|
||||
show_fullscreen_button = 0
|
||||
show_made_with_defold = 0
|
||||
scale_mode = fit
|
||||
engine_arguments = --verify-graphics-calls=false
|
||||
splash_image = /media/druid_logo.png
|
||||
|
||||
[particle_fx]
|
||||
max_count = 64
|
||||
@@ -153,5 +155,8 @@ max_count = 16
|
||||
max_tile_count = 2048
|
||||
|
||||
[druid]
|
||||
autofocus = 1
|
||||
no_auto_input = 0
|
||||
|
||||
[native_extension]
|
||||
app_manifest = /example/game.appmanifest
|
||||
|
||||
|
BIN
docs/druid/druid_logo.png
Normal file
After Width: | Height: | Size: 6.7 KiB |
@@ -76,29 +76,6 @@
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' baseProfile='full' width='16' height='16' viewBox='0 0 16 16' version='1.1' xml:space='preserve'%3E%3Ctitle%3Eic-16-fullscreen%3C/title%3E%3Cg id='ic-16-fullscreen' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M3,11.5 C3,11.776 3.224,12 3.5,12 L12.5,12 C12.776,12 13,11.776 13,11.5 L13,4.5 C13,4.224 12.776,4 12.5,4 L3.5,4 C3.224,4 3,4.224 3,4.5 L3,11.5 Z M14,11 L14,13 L12,13 C11.724,13 11.5,13.224 11.5,13.5 C11.5,13.776 11.724,14 12,14 L14.5,14 C14.776,14 15,13.776 15,13.5 L15,11 C15,10.724 14.776,10.5 14.5,10.5 C14.224,10.5 14,10.724 14,11 Z M12,2 C11.724,2 11.5,2.224 11.5,2.5 C11.5,2.776 11.724,3 12,3 L14,3 L14,5 C14,5.276 14.224,5.5 14.5,5.5 C14.776,5.5 15,5.276 15,5 L15,2.5 C15,2.224 14.776,2 14.5,2 L12,2 Z M2,13 L2,11 C2,10.724 1.776,10.5 1.5,10.5 C1.224,10.5 1,10.724 1,11 L1,13.5 C1,13.776 1.224,14 1.5,14 L4,14 C4.276,14 4.5,13.776 4.5,13.5 C4.5,13.224 4.276,13 4,13 L2,13 Z M1,2.5 C1,2.224 1.224,2 1.5,2 L4,2 C4.276,2 4.5,2.224 4.5,2.5 C4.5,2.776 4.276,3 4,3 L2,3 L2,5 C2,5.276 1.776,5.5 1.5,5.5 C1.224,5.5 1,5.276 1,5 L1,2.5 Z ' id='fill_1' fill='%23006fff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
border-color: transparent;
|
||||
float: left;
|
||||
color: #006fff;
|
||||
padding-left: 50%;
|
||||
padding: 0px 0px 0px 20px;
|
||||
cursor:pointer;
|
||||
background-position: left bottom;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.link {
|
||||
text-align: right;
|
||||
color: #4e5258;
|
||||
margin-right: 2px;
|
||||
}
|
||||
a {
|
||||
font-weight: 600;
|
||||
color: #006fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link, .button {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
@@ -144,8 +121,6 @@
|
||||
<div id="app-container" class="canvas-app-container">
|
||||
<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="600" height="900"></canvas>
|
||||
<div class="buttons-background">
|
||||
<div class="button" onclick="Module.toggleFullscreen();">Fullscreen</div>
|
||||
<div class="link">Made with <a href="https://defold.com/" target="_blank">Defold</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
@@ -156,8 +131,8 @@
|
||||
archive_location_filter: function( path ) {
|
||||
return ("archive" + path + "");
|
||||
},
|
||||
engine_arguments: [],
|
||||
custom_heap_size: 268435456,
|
||||
engine_arguments: ["--verify-graphics-calls=false",],
|
||||
custom_heap_size: 67108864,
|
||||
disable_context_menu: true
|
||||
}
|
||||
|
||||
@@ -177,8 +152,6 @@
|
||||
|
||||
var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
|
||||
var buttonHeight = 0;
|
||||
buttonHeight = 42;
|
||||
buttonHeight = 42;
|
||||
// Resize on init, screen resize and orientation change
|
||||
function resize_game_canvas() {
|
||||
// Hack for iOS when exit from Fullscreen mode
|
||||
@@ -195,29 +168,23 @@
|
||||
var targetRatio = width / height;
|
||||
var actualRatio = innerWidth / innerHeight;
|
||||
|
||||
//Downscale fit
|
||||
if (innerWidth < width || innerHeight < height) {
|
||||
if (actualRatio > targetRatio) {
|
||||
width = innerHeight * targetRatio;
|
||||
height = innerHeight;
|
||||
app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
|
||||
app_container.style.marginTop = "0px";
|
||||
}
|
||||
else {
|
||||
width = innerWidth;
|
||||
height = innerWidth / targetRatio;
|
||||
app_container.style.marginLeft = "0px";
|
||||
app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
|
||||
}
|
||||
|
||||
|
||||
//Fit
|
||||
if (actualRatio > targetRatio) {
|
||||
width = innerHeight * targetRatio;
|
||||
height = innerHeight;
|
||||
app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
|
||||
app_container.style.marginTop = "0px";
|
||||
}
|
||||
else {
|
||||
app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
|
||||
width = innerWidth;
|
||||
height = innerWidth / targetRatio;
|
||||
app_container.style.marginLeft = "0px";
|
||||
app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
app_container.style.width = width + "px";
|
||||
app_container.style.height = height + buttonHeight + "px";
|
||||
game_canvas.width = width;
|
||||
|
@@ -54,7 +54,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -185,7 +185,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -61,7 +61,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -117,6 +117,10 @@
|
||||
<td class="summary">Get current component interests</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name" nowrap><a href="#get_node">get_node(node_or_name)</a></td>
|
||||
<td class="summary">Get node for component by name.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name" nowrap><a href="#get_druid">get_druid()</a></td>
|
||||
<td class="summary">Return druid with context of calling component.</td>
|
||||
</tr>
|
||||
@@ -320,6 +324,36 @@
|
||||
|
||||
|
||||
|
||||
</dd>
|
||||
<dt>
|
||||
<a name = "get_node"></a>
|
||||
<strong>get_node(node_or_name)</strong>
|
||||
</dt>
|
||||
<dd>
|
||||
Get node for component by name.
|
||||
If component has nodes, node<em>or</em>name should be string
|
||||
It auto pick node by template name or from nodes by clone<em>tree
|
||||
if they was setup via component:set</em>nodes, component:set_template
|
||||
|
||||
|
||||
<h3>Parameters:</h3>
|
||||
<ul>
|
||||
<li><span class="parameter">node_or_name</span>
|
||||
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a> or <span class="type">node</span></span>
|
||||
Node name or node itself
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Returns:</h3>
|
||||
<ol>
|
||||
|
||||
<span class="types"><span class="type">node</span></span>
|
||||
Gui node
|
||||
</ol>
|
||||
|
||||
|
||||
|
||||
|
||||
</dd>
|
||||
<dt>
|
||||
<a name = "get_druid"></a>
|
||||
@@ -406,7 +440,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -215,7 +215,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -234,7 +234,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -84,7 +84,7 @@
|
||||
<h2><a href="#Functions">Functions</a></h2>
|
||||
<table class="function_list">
|
||||
<tr>
|
||||
<td class="name" nowrap><a href="#init">init(node, callback[, params[, anim_node[, event]]])</a></td>
|
||||
<td class="name" nowrap><a href="#init">init(node, callback[, params[, anim_node]])</a></td>
|
||||
<td class="summary">Component init function</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -133,7 +133,7 @@
|
||||
<dl class="function">
|
||||
<dt>
|
||||
<a name = "init"></a>
|
||||
<strong>init(node, callback[, params[, anim_node[, event]]])</strong>
|
||||
<strong>init(node, callback[, params[, anim_node]])</strong>
|
||||
</dt>
|
||||
<dd>
|
||||
Component init function
|
||||
@@ -159,11 +159,6 @@
|
||||
Button anim node (node, if not provided)
|
||||
(<em>optional</em>)
|
||||
</li>
|
||||
<li><span class="parameter">event</span>
|
||||
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
|
||||
Button react event, const.ACTION_TOUCH by default
|
||||
(<em>optional</em>)
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
@@ -291,19 +286,23 @@
|
||||
<ul>
|
||||
<li><span class="parameter">on_click</span>
|
||||
<span class="types"><span class="type">druid_event</span></span>
|
||||
On release button callback
|
||||
(self, params, button_instance) On release button callback
|
||||
</li>
|
||||
<li><span class="parameter">on_repeated_click</span>
|
||||
<span class="types"><span class="type">druid_event</span></span>
|
||||
On repeated action button callback
|
||||
(self, params, button<em>instance, click</em>amount) On repeated action button callback
|
||||
</li>
|
||||
<li><span class="parameter">on_long_click</span>
|
||||
<span class="types"><span class="type">druid_event</span></span>
|
||||
On long tap button callback
|
||||
(self, params, button_instance, time) On long tap button callback
|
||||
</li>
|
||||
<li><span class="parameter">on_double_click</span>
|
||||
<span class="types"><span class="type">druid_event</span></span>
|
||||
On double tap button callback
|
||||
(self, params, button<em>instance, click</em>amount) On double tap button callback
|
||||
</li>
|
||||
<li><span class="parameter">on_hold_callback</span>
|
||||
<span class="types"><span class="type">druid_event</span></span>
|
||||
(self, params, button<em>instance, time) On button hold before long</em>click callback
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -331,7 +330,7 @@
|
||||
Animation node
|
||||
(<em>default</em> node)
|
||||
</li>
|
||||
<li><span class="parameter">scale_from</span>
|
||||
<li><span class="parameter">start_scale</span>
|
||||
<span class="types"><span class="type">vector3</span></span>
|
||||
Initial scale of anim_node
|
||||
</li>
|
||||
@@ -405,7 +404,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -277,7 +277,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -88,7 +88,7 @@
|
||||
<td class="summary">Component init function</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name" nowrap><a href="#set_state">set_state(state)</a></td>
|
||||
<td class="name" nowrap><a href="#set_state">set_state(indexes)</a></td>
|
||||
<td class="summary">Set checkbox group state</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -147,7 +147,7 @@
|
||||
</dd>
|
||||
<dt>
|
||||
<a name = "set_state"></a>
|
||||
<strong>set_state(state)</strong>
|
||||
<strong>set_state(indexes)</strong>
|
||||
</dt>
|
||||
<dd>
|
||||
Set checkbox group state
|
||||
@@ -155,7 +155,7 @@
|
||||
|
||||
<h3>Parameters:</h3>
|
||||
<ul>
|
||||
<li><span class="parameter">state</span>
|
||||
<li><span class="parameter">indexes</span>
|
||||
<span class="types"><span class="type">bool[]</span></span>
|
||||
Array of checkbox state
|
||||
</li>
|
||||
@@ -239,7 +239,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -370,7 +370,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -61,7 +61,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -236,7 +236,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -211,7 +211,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -61,7 +61,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -181,7 +181,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -57,7 +57,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -86,7 +86,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -240,7 +240,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -82,7 +82,7 @@
|
||||
<h2><a href="#Functions">Functions</a></h2>
|
||||
<table class="function_list">
|
||||
<tr>
|
||||
<td class="name" nowrap><a href="#init">init(node, key, init_value)</a></td>
|
||||
<td class="name" nowrap><a href="#init">init(node, key[, init_value=1])</a></td>
|
||||
<td class="summary">Component init function</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -135,7 +135,7 @@
|
||||
<dl class="function">
|
||||
<dt>
|
||||
<a name = "init"></a>
|
||||
<strong>init(node, key, init_value)</strong>
|
||||
<strong>init(node, key[, init_value=1])</strong>
|
||||
</dt>
|
||||
<dd>
|
||||
Component init function
|
||||
@@ -154,6 +154,7 @@
|
||||
<li><span class="parameter">init_value</span>
|
||||
<span class="types"><span class="type">number</span></span>
|
||||
Initial value of progress bar
|
||||
(<em>default</em> 1)
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -378,7 +379,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -88,7 +88,7 @@
|
||||
<td class="summary">Component init function</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name" nowrap><a href="#set_state">set_state(state)</a></td>
|
||||
<td class="name" nowrap><a href="#set_state">set_state(index)</a></td>
|
||||
<td class="summary">Set radio group state</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -147,7 +147,7 @@
|
||||
</dd>
|
||||
<dt>
|
||||
<a name = "set_state"></a>
|
||||
<strong>set_state(state)</strong>
|
||||
<strong>set_state(index)</strong>
|
||||
</dt>
|
||||
<dd>
|
||||
Set radio group state
|
||||
@@ -155,9 +155,9 @@
|
||||
|
||||
<h3>Parameters:</h3>
|
||||
<ul>
|
||||
<li><span class="parameter">state</span>
|
||||
<span class="types"><span class="type">bool[]</span></span>
|
||||
Array of checkbox state
|
||||
<li><span class="parameter">index</span>
|
||||
<span class="types"><span class="type">number</span></span>
|
||||
Index in radio group
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -178,8 +178,8 @@
|
||||
<h3>Returns:</h3>
|
||||
<ol>
|
||||
|
||||
<span class="types"><span class="type">bool[]</span></span>
|
||||
Array if checkboxes state
|
||||
<span class="types"><span class="type">number</span></span>
|
||||
Index in radio group
|
||||
</ol>
|
||||
|
||||
|
||||
@@ -239,7 +239,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -389,7 +389,7 @@
|
||||
</li>
|
||||
<li><span class="parameter">on_point_scroll</span>
|
||||
<span class="types"><span class="type">druid_event</span></span>
|
||||
On scroll<em>to</em>index function callbck
|
||||
On scroll<em>to</em>index function callback
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -507,7 +507,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -91,6 +91,10 @@
|
||||
<td class="name" nowrap><a href="#set">set(value[, is_silent])</a></td>
|
||||
<td class="summary">Set value for slider</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name" nowrap><a href="#set_steps">set_steps(steps)</a></td>
|
||||
<td class="summary">Set slider steps.</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h2><a href="#Tables">Tables</a></h2>
|
||||
<table class="function_list">
|
||||
@@ -166,6 +170,32 @@
|
||||
|
||||
|
||||
|
||||
</dd>
|
||||
<dt>
|
||||
<a name = "set_steps"></a>
|
||||
<strong>set_steps(steps)</strong>
|
||||
</dt>
|
||||
<dd>
|
||||
Set slider steps. Pin node will
|
||||
apply closest step position
|
||||
|
||||
|
||||
<h3>Parameters:</h3>
|
||||
<ul>
|
||||
<li><span class="parameter">steps</span>
|
||||
<span class="types"><span class="type">number[]</span></span>
|
||||
Array of steps
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>Usage:</h3>
|
||||
<ul>
|
||||
<pre class="example">slider:set_steps({<span class="number">0</span>, <span class="number">0.2</span>, <span class="number">0.6</span>, <span class="number">1</span>})</pre>
|
||||
</ul>
|
||||
|
||||
</dd>
|
||||
</dl>
|
||||
<h2 class="section-header "><a name="Tables"></a>Tables</h2>
|
||||
@@ -248,7 +278,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -142,7 +142,7 @@
|
||||
</li>
|
||||
<li><span class="parameter">value</span>
|
||||
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
|
||||
Initial text
|
||||
Initial text. Default value is node text from GUI scene.
|
||||
(<em>optional</em>)
|
||||
</li>
|
||||
<li><span class="parameter">no_adjust</span>
|
||||
@@ -352,7 +352,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -267,31 +267,17 @@
|
||||
<span class="types"><span class="type">node</span></span>
|
||||
Trigger node
|
||||
</li>
|
||||
<li><span class="parameter">anim_node</span>
|
||||
<span class="types"><span class="type">node</span></span>
|
||||
Animation node
|
||||
(<em>default</em> node)
|
||||
<li><span class="parameter">from</span>
|
||||
<span class="types"><span class="type">number</span></span>
|
||||
Initial timer value
|
||||
</li>
|
||||
<li><span class="parameter">scale_from</span>
|
||||
<span class="types"><span class="type">vector3</span></span>
|
||||
Initial scale of anim_node
|
||||
<li><span class="parameter">target</span>
|
||||
<span class="types"><span class="type">number</span></span>
|
||||
Target timer value
|
||||
</li>
|
||||
<li><span class="parameter">pos</span>
|
||||
<span class="types"><span class="type">vector3</span></span>
|
||||
Initial pos of anim_node
|
||||
</li>
|
||||
<li><span class="parameter">params</span>
|
||||
<span class="types"><span class="type">any</span></span>
|
||||
Params to click callbacks
|
||||
</li>
|
||||
<li><span class="parameter">hover</span>
|
||||
<span class="types"><span class="type">druid.hover</span></span>
|
||||
Druid hover logic component
|
||||
</li>
|
||||
<li><span class="parameter">click_zone</span>
|
||||
<span class="types"><span class="type">node</span></span>
|
||||
Restriction zone
|
||||
(<em>optional</em>)
|
||||
<li><span class="parameter">value</span>
|
||||
<span class="types"><span class="type">number</span></span>
|
||||
Current timer value
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -307,7 +293,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -61,7 +61,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -239,7 +239,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -61,7 +61,7 @@
|
||||
</ul>
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -107,6 +107,10 @@
|
||||
<td class="summary">Create new druid component</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name" nowrap><a href="#druid:final">druid:final()</a></td>
|
||||
<td class="summary">Call on final function on gui_script.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name" nowrap><a href="#druid:remove">druid:remove(component)</a></td>
|
||||
<td class="summary">Remove component from druid instance.</td>
|
||||
</tr>
|
||||
@@ -240,6 +244,21 @@
|
||||
|
||||
|
||||
|
||||
</dd>
|
||||
<dt>
|
||||
<a name = "druid:final"></a>
|
||||
<strong>druid:final()</strong>
|
||||
</dt>
|
||||
<dd>
|
||||
Call on final function on gui<em>script. It will call on</em>remove
|
||||
on all druid components
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dd>
|
||||
<dt>
|
||||
<a name = "druid:remove"></a>
|
||||
@@ -750,7 +769,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -36,23 +36,23 @@
|
||||
<li><a href="#Text">Text </a></li>
|
||||
<li><a href="#Blocker">Blocker </a></li>
|
||||
<li><a href="#Back_Handler">Back Handler </a></li>
|
||||
<li><a href="#Locale">Locale </a></li>
|
||||
<li><a href="#Timer">Timer </a></li>
|
||||
<li><a href="#Progress">Progress </a></li>
|
||||
<li><a href="#Lang_text">Lang text </a></li>
|
||||
<li><a href="#Scroll">Scroll </a></li>
|
||||
<li><a href="#Grid">Grid </a></li>
|
||||
<li><a href="#Progress">Progress </a></li>
|
||||
<li><a href="#Slider">Slider </a></li>
|
||||
<li><a href="#Input">Input </a></li>
|
||||
<li><a href="#Checkbox">Checkbox </a></li>
|
||||
<li><a href="#Checkbox_group">Checkbox group </a></li>
|
||||
<li><a href="#Radio_group">Radio group </a></li>
|
||||
<li><a href="#Timer">Timer </a></li>
|
||||
<li><a href="#Grid">Grid </a></li>
|
||||
<li><a href="#Hover">Hover </a></li>
|
||||
<li><a href="#Input">Input </a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><strong>Druid components</strong></li>
|
||||
<li><strong>01-components</strong></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -88,74 +88,293 @@
|
||||
<div id="content">
|
||||
|
||||
|
||||
|
||||
|
||||
<h1>Druid components</h1>
|
||||
|
||||
|
||||
<p><a name="Button"></a></p>
|
||||
<h2>Button</h2>
|
||||
<p>Basic game button</p>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.button.html">Button API here</a></p>
|
||||
|
||||
<h3>Overview</h3>
|
||||
<p>Basic Druid input component. Handle input on node and provide different callbacks on touch events.</p>
|
||||
|
||||
<h3>Setup</h3>
|
||||
<p>Create button with druid: <code>button = druid:new_button(node_name, callback, [params], [animation_node])</code>
|
||||
Where node name is name of node from GUI scene. You can use <code>node_name</code> as input trigger zone and point another node for animation via <code>animation_node</code></p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<p>- Button callback have next params: (self, params, button_instance)</p>
|
||||
|
||||
<pre>
|
||||
- **self** - Druid self context
|
||||
- **params** - Additional params, specified on button creating
|
||||
- **button_instance** - button itself
|
||||
</pre>
|
||||
|
||||
<p>- You can set <em>params</em> on button callback on button creating: <code>druid:new_button("node_name", callback, params)</code>. This <em>params</em> will pass in callback as second argument
|
||||
- Button have next events:</p>
|
||||
|
||||
<pre>
|
||||
- **on_click** - basic button callback
|
||||
- **on_repeated_click** - repeated click callback, <span class="keyword">while</span> holding the button, don<span class="string">'t trigger if callback is empty
|
||||
- **on_long_click** - callback on long button tap, don'</span>t trigger <span class="keyword">if</span> callback is empty
|
||||
- **on_hold_click** - hold callback, before long_click trigger, don<span class="string">'t trigger if callback is empty
|
||||
- **on_double_click** - different callback, if tap button 2+ in row, don'</span>t trigger <span class="keyword">if</span> callback is empty
|
||||
</pre>
|
||||
|
||||
<p>- If button have double click event and it is triggered, usual callback will be not invoked
|
||||
- If you have stencil on buttons and you don't want trigger them outside of stencil node, you can use <a href="../modules/druid.button.html#set_click_zone">button:set_click_zone</a> to restrict button click zone
|
||||
- Button can have key trigger to use then by key: <a href="../modules/druid.button.html#set_key_trigger">button:set_key_trigger</a>
|
||||
- Animation node can be used for example to animate small icon on big panel. Node name of trigger zone will be <code>big panel</code> and animation node will be <code>small icon</code></p>
|
||||
|
||||
|
||||
<p><a name="Text"></a></p>
|
||||
<h2>Text</h2>
|
||||
<p>Wrap on text node with text size adjusting</p>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.text.html">Text API here</a></p>
|
||||
|
||||
<h3>Overview</h3>
|
||||
<p>Basic Druid text component. Text components by default have the text size adjusting.</p>
|
||||
|
||||
<h3>Setup</h3>
|
||||
<p>Create text node with druid: <code>text = druid:new_text(node_name, [initial_value], [is_disable_size_adjust])</code></p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<p>- Text component by default have auto adjust text sizing. Text never will be bigger, than text node size, which you can setup in GUI scene. It can be disabled on component creating by settings argument <code>is_no_adjust</code> to <em>true</em></p>
|
||||
|
||||
<p><img src="../media/text_autosize.png" alt=""/></p>
|
||||
|
||||
<ul>
|
||||
<li>Text pivot can be changed with <a href="../modules/druid.text.html#set_pivot">text:set_pivot</a>, and text will save their position inside their text size box:</li>
|
||||
</ul>
|
||||
|
||||
<p><img src="../media/text_anchor.gif" alt=""/></p>
|
||||
|
||||
|
||||
<p><a name="Blocker"></a></p>
|
||||
<h2>Blocker</h2>
|
||||
<p>Block input in node zone</p>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.button.html">Blocker API here</a></p>
|
||||
|
||||
<h3>Overview</h3>
|
||||
<p>Druid component for block input. Use it to block input in special zone.</p>
|
||||
|
||||
<h3>Setup</h3>
|
||||
<p>Create blocker component with druid: <code>druid:new_blocker(node_name)</code></p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<p>Explanation:
|
||||
<img src="../media/blocker_scheme.png" alt=""/></p>
|
||||
|
||||
<p>Blue zone is <strong>button</strong> with close_window callback</p>
|
||||
|
||||
<p>Yellow zone is blocker with window content</p>
|
||||
|
||||
<p>So you can do the safe zones, when you have the big buttons</p>
|
||||
|
||||
|
||||
<p><a name="Back_Handler"></a></p>
|
||||
<h2>Back Handler</h2>
|
||||
<p>Handle back button (Android, backspace)</p>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.back_handler.html">Back handler API here</a></p>
|
||||
|
||||
<p><a name="Locale"></a></p>
|
||||
<h2>Locale</h2>
|
||||
<p>Text component with handle localization system</p>
|
||||
<h3>Overview</h3>
|
||||
<p>Component to handle back button. It handle Android back button and Backspace key. Key triggers in <code>input.binding</code> should be setup for correct working.</p>
|
||||
|
||||
<p><a name="Timer"></a></p>
|
||||
<h2>Timer</h2>
|
||||
<p>Run timer on text node</p>
|
||||
<h3>Setup</h3>
|
||||
<p>Setup callback with <code>druid:new_back_handler(callback)</code></p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
|
||||
|
||||
<p><a name="Lang_text"></a></p>
|
||||
<h2>Lang text</h2>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.lang_text.html">Lang text API here</a></p>
|
||||
|
||||
<h3>Overview</h3>
|
||||
<p>Wrap on Text component to handle localization. It uses druid get<em>text</em>function to set text by it's id</p>
|
||||
|
||||
<h3>Setup</h3>
|
||||
<p>Create lang text component with druid <code>text = druid:new_lang_text(node_name, locale_id)</code></p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
|
||||
<p><a name="Progress"></a></p>
|
||||
<h2>Progress</h2>
|
||||
<p>Basic progress bar</p>
|
||||
|
||||
<p><a name="Scroll"></a></p>
|
||||
<h2>Scroll</h2>
|
||||
<p>Basic scroll component</p>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.scroll.html">Scroll API here</a></p>
|
||||
|
||||
<p><a name="Grid"></a></p>
|
||||
<h2>Grid</h2>
|
||||
<p>Component for manage node positions</p>
|
||||
<h3>Overview</h3>
|
||||
<p>Basic Druid scroll component. Handle all scrolling stuff in druid GUI</p>
|
||||
|
||||
<h3>Setup</h3>
|
||||
<p>Create scroll component with druid: <code>scroll = druid:new_scroll(scroll_parent, scroll_input)</code>.</p>
|
||||
|
||||
<p><em>Scroll parent</em> - is dynamic part. This node will change position by scroll system</p>
|
||||
|
||||
<p><em>Scroll input</em> - is static part. It capturing user input and recognize scrolling touches</p>
|
||||
|
||||
<p>Initial scroll size will be equal to <em>scroll parent</em> node size. The initial view box will be equal to <em>scroll input</em> node size</p>
|
||||
|
||||
<p>Usually, Place static input zone part, and as children add scroll parent part:
|
||||
<img src="../media/scroll_scheme.png" alt=""/>
|
||||
<img src="../media/scroll_outline.png" alt=""/></p>
|
||||
|
||||
<p>*Here scroll<em>content</em>zone below input zone, in game content zone be able to scroll left until end*</p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<p>- Scroll by default style have inertion and "back moving". It can be adjust via scroll <a href="https://insality.github.io/druid/modules/druid.scroll.html#Style">style settings</a>
|
||||
- You can setup "points of interest". Scroll always will be centered on closes point of interest. It is able to create slider without inertion and points of interest on each scroll element.
|
||||
- Scroll have next events:</p>
|
||||
|
||||
<pre>
|
||||
- *on_scroll* On scroll move callback
|
||||
- *on_scroll_to* On scroll_to <span class="keyword">function</span> callback
|
||||
- *on_point_scroll* On scroll_to_index <span class="keyword">function</span> callback
|
||||
</pre>
|
||||
|
||||
<p>- You can adjust scroll content size by <code>scroll:set_border(node_size)</code>. It will setup new size to content node.</p>
|
||||
|
||||
|
||||
<p><a name="Progress"></a></p>
|
||||
<h2>Progress</h2>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.progress.html">Progress API here</a></p>
|
||||
|
||||
<h3>Overview</h3>
|
||||
<p>Basic Druid progress bar component</p>
|
||||
|
||||
<h3>Setup</h3>
|
||||
<p>Create progress bar component with druid: <code>progress = druid:new_progress(node_name, key, init_value)</code></p>
|
||||
|
||||
<p>Node name should have maximum node size, so in GUI scene, node_name should be fully filled.
|
||||
Key is value from druid const: const.SIDE.X (or just "x") or const.SIDE.Y (or just "y")</p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<p>- Progress correct working with 9slice nodes, it trying to set size by <em>set</em>size_ first, if it is not possible, it set up sizing via <em>set</em>scale_
|
||||
- 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</p>
|
||||
|
||||
<p><a name="Slider"></a></p>
|
||||
<h2>Slider</h2>
|
||||
<p>Basic slider component</p>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.slider.html">Slider API here</a></p>
|
||||
|
||||
<p><a name="Checkbox"></a></p>
|
||||
<h2>Checkbox</h2>
|
||||
<p>Basic checkbox component</p>
|
||||
<h3>Overview</h3>
|
||||
<p>Basic Druid slider component</p>
|
||||
|
||||
<p><a name="Checkbox_group"></a></p>
|
||||
<h2>Checkbox group</h2>
|
||||
<p>Several checkboxes in one group</p>
|
||||
<h3>Setup</h3>
|
||||
<p>Create slider component with druid: <code>slider = druid:new_slider(node_name, end_pos, callback)</code></p>
|
||||
|
||||
<p><a name="Radio_group"></a></p>
|
||||
<h2>Radio group</h2>
|
||||
<p>Several checkboxes in one group with single choice</p>
|
||||
<p>Pin node (node_name in params) should be placed in zero position (initial). It will be available to mode Pin node between start pos and end pos. </p>
|
||||
|
||||
<p><a name="Hover"></a></p>
|
||||
<h2>Hover</h2>
|
||||
<p>Trigger component for check node hover state</p>
|
||||
<h3>Notes</h3>
|
||||
<p>- You can setup points of interests on slider via <a href="../modules/druid.slider.html#set_steps">slider:set_steps</a>. 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)</p>
|
||||
|
||||
<p><a name="Input"></a></p>
|
||||
<h2>Input</h2>
|
||||
<p>Component to process user text input</p>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.input.html">Input API here</a></p>
|
||||
|
||||
<h3>Overview</h3>
|
||||
<p>Basic Druid text input component (unimplemented)</p>
|
||||
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h3>Notes</h3>
|
||||
|
||||
|
||||
<p><a name="Checkbox"></a></p>
|
||||
<h2>Checkbox</h2>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.checkbox.html">Checkbox API here</a></p>
|
||||
|
||||
<h3>Overview</h3>
|
||||
<p>Basic Druid checkbox component.</p>
|
||||
|
||||
<h3>Setup</h3>
|
||||
<p>Create checkbox component with druid: <code>checkbox = druid:new_checkbox(node, callback)</code></p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<p>- Checkbox uses button to handle click
|
||||
- You can setup another node to handle input with click_node arg in component init: <code>druid:new_checkbox(node, callback, [click_node])</code></p>
|
||||
|
||||
<p><a name="Checkbox_group"></a></p>
|
||||
<h2>Checkbox group</h2>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.checkbox_group.html">Checkbox group API here</a></p>
|
||||
|
||||
<h3>Overview</h3>
|
||||
<p>Several checkboxes in one group</p>
|
||||
|
||||
<h3>Setup</h3>
|
||||
<p>Create checkbox_group component with druid: <code>group = druid:new_checkbox_group(nodes[], callback)</code></p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<p>- Callback arguments: <code>function(self, checkbox_index)</code>. Index is equals in <em>nodes[]</em> array in component constructor
|
||||
- You can get/set checkbox_group state with <code>group:set_state()</code> and <code>group:get_state()</code></p>
|
||||
|
||||
|
||||
<p><a name="Radio_group"></a></p>
|
||||
<h2>Radio group</h2>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.radio_group.html">Radio group API here</a></p>
|
||||
|
||||
<h3>Overview</h3>
|
||||
<p>Several checkboxes in one group with single choice</p>
|
||||
|
||||
<h3>Setup</h3>
|
||||
<p>Create radio_group component with druid: <code>group = druid:new_radio_group(nodes[], callback)</code></p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<p>- Callback arguments: <code>function(self, checkbox_index)</code>. Index is equals in <em>nodes[]</em> array in component constructor
|
||||
- You can get/set radio_group state with <code>group:set_state()</code> and <code>group:get_state()</code>
|
||||
- Only different from checkbox_group: on click another checkboxes in this group will be unchecked</p>
|
||||
|
||||
<p><a name="Timer"></a></p>
|
||||
<h2>Timer</h2>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.timer.html">Timer API here</a></p>
|
||||
|
||||
<h3>Overview</h3>
|
||||
<p>Handle timer work on gui text node</p>
|
||||
|
||||
<h3>Setup</h3>
|
||||
<p>Create timer component with druid: <code>timer = druid:new_timer(text_node, from_seconds, to_seconds, callback)</code></p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<p>- Timer fires callback, when timer value equals to <em>to</em>seconds_
|
||||
- Timer will setup text node with current timer value
|
||||
- Timer uses update function to handle time</p>
|
||||
|
||||
<p><a name="Grid"></a></p>
|
||||
<h2>Grid</h2>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.grid.html">Grid API here</a></p>
|
||||
|
||||
<h3>Overview</h3>
|
||||
<p>Component for manage node positions. Very simple implementation for nodes with equal size</p>
|
||||
|
||||
<h3>Setup</h3>
|
||||
<p>Create grid component with druid: <code>grid = druid:new_grid(parent_node, prefab_node, max_in_row_elements)</code></p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<p>- Grid on <em>adding elements</em> will setup parent to <em>parent</em>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 adjust anchor and border between elements
|
||||
- <em>Prefab node</em> in component init used to get grid item size</p>
|
||||
|
||||
<p><a name="Hover"></a></p>
|
||||
<h2>Hover</h2>
|
||||
<p><a href="https://insality.github.io/druid/modules/druid.hover.html">Hover API here</a></p>
|
||||
|
||||
<h3>Overview</h3>
|
||||
<p>System Druid component, handle hover node state</p>
|
||||
|
||||
<h3>Setup</h3>
|
||||
<p>Create grid component with druid: <code>hover = druid:new_hover(node, callback)</code></p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
|
||||
|
||||
</div> <!-- id="content" -->
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -35,12 +35,13 @@
|
||||
<li><a href="#Overview">Overview </a></li>
|
||||
<li><a href="#Custom_components">Custom components </a></li>
|
||||
<li><a href="#Best_practice_on_custom_components">Best practice on custom components </a></li>
|
||||
<li><a href="#Power_of_using_templates">Power of using templates </a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><strong>Creating custom components</strong></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -80,18 +81,22 @@
|
||||
|
||||
<p><a name="Overview"></a></p>
|
||||
<h2>Overview</h2>
|
||||
<p>Druid allows you to create your custom components from druid basic components or other custom components</p>
|
||||
|
||||
<p>Druid allows you to create your custom components from druid basic components or other custom components.</p>
|
||||
|
||||
<p>Every component is the children of Basic Druid component. Read the [basic component API here].(https://insality.github.io/druid/modules/component.html), Methods of basic components you can call via self:{method_name}</p>
|
||||
|
||||
|
||||
<p><a name="Custom_components"></a></p>
|
||||
<h2>Custom components</h2>
|
||||
|
||||
<p>Basic custom component template looks like this:</p>
|
||||
|
||||
<pre>
|
||||
<span class="keyword">local</span> const = <span class="global">require</span>(<span class="string">"druid.const"</span>)
|
||||
<span class="keyword">local</span> component = <span class="global">require</span>(<span class="string">"druid.component"</span>)
|
||||
|
||||
<span class="keyword">local</span> M = component.create(<span class="string">"your_component"</span>)
|
||||
<span class="keyword">local</span> M = component.create(<span class="string">"my_component"</span>)
|
||||
|
||||
<span class="comment">-- Component constructor
|
||||
</span><span class="keyword">function</span> M.init(self, ...)
|
||||
@@ -117,6 +122,15 @@
|
||||
</span><span class="keyword">function</span> M.on_layout_change(self)
|
||||
<span class="keyword">end</span>
|
||||
|
||||
<span class="comment">-- Call, if input was capturing before this component
|
||||
</span><span class="comment">-- Example: scroll is start scrolling, so you need unhover button
|
||||
</span><span class="keyword">function</span> M.on_input_interrupt(self)
|
||||
<span class="keyword">end</span>
|
||||
|
||||
<span class="comment">-- Call on component remove or on druid:final
|
||||
</span><span class="keyword">function</span> M.on_remove(self)
|
||||
<span class="keyword">end</span>
|
||||
|
||||
<span class="keyword">return</span> M
|
||||
</pre>
|
||||
|
||||
@@ -128,12 +142,32 @@
|
||||
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
|
||||
<span class="keyword">local</span> my_component = <span class="global">require</span>(<span class="string">"my.amazing.component"</span>)
|
||||
|
||||
<span class="keyword">local</span> <span class="keyword">function</span> init(self)
|
||||
<span class="keyword">function</span> init(self)
|
||||
druid.register(<span class="string">"my_component"</span>, my_component)
|
||||
<span class="keyword">end</span>
|
||||
</pre>
|
||||
|
||||
|
||||
<p>Registering make new function with "new<em>{component</em>name}". In our example it will be: <code>druid:new_my_component()</code>.</p>
|
||||
|
||||
<p>Or you can create component without registering with <code>druid:create(my_component_module)</code></p>
|
||||
|
||||
<p>As component registered, you can create your component with next code:</p>
|
||||
|
||||
<pre>
|
||||
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
|
||||
<span class="keyword">local</span> my_component = <span class="global">require</span>(<span class="string">"my.amazing.component"</span>)
|
||||
|
||||
<span class="keyword">function</span> init(self)
|
||||
self.druid = druid.new(self)
|
||||
|
||||
<span class="keyword">local</span> my_component = self.druid:new_my_component(...)
|
||||
<span class="comment">-- or --
|
||||
</span> <span class="keyword">local</span> my_component = self.druid:create(my_component, ...)
|
||||
<span class="keyword">end</span>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3>Interest</h3>
|
||||
<p>Interest - is a way to indicate what events your component will respond to.
|
||||
There is next interests in druid:
|
||||
@@ -150,7 +184,7 @@ There is next interests in druid:
|
||||
|
||||
<p><a name="Best_practice_on_custom_components"></a></p>
|
||||
<h2>Best practice on custom components</h2>
|
||||
<p>On each component recomended describe component scheme in next way:</p>
|
||||
<p>On each component recommended describe component scheme in next way:</p>
|
||||
|
||||
|
||||
<pre>
|
||||
@@ -160,9 +194,9 @@ There is next interests in druid:
|
||||
<span class="keyword">local</span> M = component.create(<span class="string">"your_component"</span>)
|
||||
|
||||
<span class="keyword">local</span> SCHEME = {
|
||||
ROOT = <span class="string">"/root"</span>,
|
||||
ITEM = <span class="string">"/item"</span>,
|
||||
TITLE = <span class="string">"/title"</span>
|
||||
ROOT = <span class="string">"root"</span>,
|
||||
ITEM = <span class="string">"item"</span>,
|
||||
TITLE = <span class="string">"title"</span>
|
||||
}
|
||||
|
||||
<span class="keyword">function</span> M.init(self, template_name, node_table)
|
||||
@@ -189,11 +223,17 @@ There is next interests in druid:
|
||||
|
||||
|
||||
|
||||
<p><a name="Power_of_using_templates"></a></p>
|
||||
<h2>Power of using templates</h2>
|
||||
|
||||
<p>You can use one component, but creating and customizing templates for them. Templates only requires to match the component scheme.</p>
|
||||
|
||||
|
||||
</div> <!-- id="content" -->
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -40,7 +40,7 @@
|
||||
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><strong>Styles</strong></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -138,7 +138,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -38,7 +38,7 @@
|
||||
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><strong>Druid assets</strong></li>
|
||||
@@ -80,7 +80,7 @@
|
||||
<h2>Overview</h2>
|
||||
<p>I've created <a href="https://github.com/Insality/druid-assets">druid-assets repository</a> to make a <em>marketplace</em> with custom styles and components.</p>
|
||||
|
||||
<p>Any of druid users can push their own components and styles to share it with the other users</p>
|
||||
<p>Any of Druid users can push their own components and styles to share it with the other users</p>
|
||||
|
||||
<p>Also, this marketplace is great example to how you can create your custom components</p>
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -38,7 +38,7 @@
|
||||
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -80,14 +80,14 @@
|
||||
<h2>Overview</h2>
|
||||
<p>See the <a href="https://github.com/Insality/druid/tree/develop/example/kenney">example folder</a> for examples of how to use Druid</p>
|
||||
|
||||
<p>Try the HTML5 version of the example app</p>
|
||||
<p>Try the <a href="https://insality.github.io/druid/druid/">HTML5 version</a> of the example app</p>
|
||||
|
||||
|
||||
</div> <!-- id="content" -->
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -34,11 +34,13 @@
|
||||
<ul>
|
||||
<li><a href="#Setup">Setup </a></li>
|
||||
<li><a href="#Components">Components </a></li>
|
||||
<li><a href="#Creating_components">Creating components </a></li>
|
||||
<li><a href="#Basic_usage">Basic usage </a></li>
|
||||
<li><a href="#Druid_Events">Druid Events </a></li>
|
||||
<li><a href="#Druid_lifecycle">Druid lifecycle </a></li>
|
||||
<li><a href="#Features">Features </a></li>
|
||||
<li><a href="#Examples">Examples </a></li>
|
||||
<li><a href="#Documentation">Documentation </a></li>
|
||||
<li><a href="#Games_powered_by_Druid">Games powered by Druid </a></li>
|
||||
<li><a href="#Future_plans">Future plans </a></li>
|
||||
<li><a href="#License">License </a></li>
|
||||
<li><a href="#Issues_and_suggestions">Issues and suggestions </a></li>
|
||||
</ul>
|
||||
@@ -46,7 +48,7 @@
|
||||
|
||||
<h2>Topics</h2>
|
||||
<ul class="">
|
||||
<li><a href="../topics/01-components.md.html">Druid components</a></li>
|
||||
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
||||
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
||||
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
||||
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
||||
@@ -83,7 +85,9 @@
|
||||
|
||||
<a href="https://insality.github.io/druid/"><img src="media/druid_logo.png" alt=""/></a></p>
|
||||
|
||||
<p><strong>Druid</strong> - powerful defold component UI library. Use basic druid components or make your own game-specific components to make amazing GUI in your games.</p>
|
||||
<p><a href="https://github.com/Insality/druid/releases"><img src="https://img.shields.io/github/v/release/insality/druid" alt="GitHub release (latest by date)"/></a></p>
|
||||
|
||||
<p><strong>Druid</strong> - powerful defold component UI library. Use basic <strong>Druid</strong> components or make your own game-specific components to make amazing GUI in your games.</p>
|
||||
|
||||
|
||||
<p><a name="Setup"></a></p>
|
||||
@@ -91,7 +95,7 @@
|
||||
|
||||
<h3>Dependency</h3>
|
||||
|
||||
<p>You can use the druid extension in your own project by adding this project as a <a href="https://www.defold.com/manuals/libraries/">Defold library dependency</a>. Open your game.project file and in the dependencies field under project add:</p>
|
||||
<p>You can use the <strong>Druid</strong> extension in your own project by adding this project as a <a href="https://www.defold.com/manuals/libraries/">Defold library dependency</a>. Open your game.project file and in the dependencies field under project add:</p>
|
||||
|
||||
<blockquote>
|
||||
<p><a href="https://github.com/Insality/druid/archive/master.zip">https://github.com/Insality/druid/archive/master.zip</a></p>
|
||||
@@ -99,18 +103,42 @@
|
||||
|
||||
<p>Or point to the ZIP file of a <a href="https://github.com/Insality/druid/releases">specific release</a>.</p>
|
||||
|
||||
<h3>Input bindings</h3>
|
||||
|
||||
<h3>Code</h3>
|
||||
<p>For <strong>Druid</strong> to work requires next input bindings:</p>
|
||||
|
||||
<p>Adjust druid settings, if needed:</p>
|
||||
<ul>
|
||||
<li>Mouse trigger - <code>Button 1</code> -> <code>touch</code> <em>For basic input components</em></li>
|
||||
<li>Key trigger - <code>Backspace</code> -> <code>back</code> <em>For back</em>handler component_</li>
|
||||
<li>Key trigger - <code>Back</code> -> <code>back</code> <em>For back</em>handler component, Android back button_</li>
|
||||
</ul>
|
||||
|
||||
<p><img src="media/input_binding.png" alt=""/></p>
|
||||
|
||||
|
||||
<h3>Input capturing [optional]</h3>
|
||||
|
||||
<p>By default, <strong>Druid</strong> will auto-capture input focus, if any input component will be created. So you don't need to call <code>msg.post(".", "acquire_input_focus)"</code></p>
|
||||
|
||||
<p>If you not need this behaviour, you can disable it by settings <code>druid.no_auto_input</code> field in <em>game.project</em>:</p>
|
||||
<pre><code> [druid]
|
||||
no_auto_input = 1
|
||||
</code></pre>
|
||||
|
||||
|
||||
<h3>Code [optional]</h3>
|
||||
|
||||
<p>Adjust <strong>Druid</strong> settings, if needed:</p>
|
||||
|
||||
<pre>
|
||||
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
|
||||
|
||||
<span class="comment">-- Used for button component and custom components
|
||||
</span><span class="comment">-- Callback should play sound by name
|
||||
</span>druid.set_sound_function(callback)
|
||||
|
||||
<span class="comment">-- Used for lang_text component
|
||||
</span><span class="comment">-- Callback should return localized string by locale id
|
||||
</span>druid.set_text_function(callback)
|
||||
|
||||
<span class="comment">-- Used for change default druid style
|
||||
@@ -122,78 +150,140 @@
|
||||
<p><a name="Components"></a></p>
|
||||
<h2>Components</h2>
|
||||
|
||||
<p>Druid provides next basic components:
|
||||
- <strong>Button</strong> - Basic game button</p>
|
||||
<p><strong>Druid</strong> provides next basic components:</p>
|
||||
|
||||
<ul>
|
||||
<li><p><strong>Text</strong> - Wrap on text node with text size adjusting</p></li>
|
||||
<li><p><strong>Blocker</strong> - Block input in node zone</p></li>
|
||||
<li><p><strong>Back Handler</strong> - Handle back button (Android, backspace)</p></li>
|
||||
<li><p><strong>Lang text</strong> - Text component with handle localization system</p></li>
|
||||
<li><p><strong>Timer</strong> - Run timer on text node</p></li>
|
||||
<li><p><strong>Progress</strong> - Basic progress bar</p></li>
|
||||
<li><p><strong>Scroll</strong> - Basic scroll component</p></li>
|
||||
<li><p><strong>Grid</strong> - Component for manage node positions</p></li>
|
||||
<li><p><strong>Slider</strong> - Basic slider component</p></li>
|
||||
<li><p><strong>Checkbox</strong> - Basic checkbox component</p></li>
|
||||
<li><p><strong>Checkbox group</strong> - Several checkboxes in one group</p></li>
|
||||
<li><p><strong>Radio group</strong> - Several checkboxes in one group with single choice</p></li>
|
||||
<li><p><strong>Hover</strong> - Trigger component for check node hover state</p></li>
|
||||
<li><p><strong>Input</strong> - Component to process user text input</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#button">Button</a></strong> - Basic Druid input component</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#text">Text</a></strong> - Basic Druid text component</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#lang-text">Lang text</a></strong> - Wrap on Text component to handle localization</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#scroll">Scroll</a></strong> - Basic Druid scroll component</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#progress">Progress</a></strong> - Basic Druid progress bar component</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#slider">Slider</a></strong> - Basic Druid slider component</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#input">Input</a></strong> - Basic Druid text input component (unimplemented)</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox">Checkbox</a></strong> - Basic Druid checkbox component</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox-group">Checkbox group</a></strong> - Several checkboxes in one group</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#radio-group">Radio group</a></strong> - Several checkboxes in one group with single choice</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#blocker">Blocker</a></strong> - Block input in node zone component</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#back-handler">Back Handler</a></strong> - Handle back button (Android back, backspace)</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#timer">Timer</a></strong> - Handle timer work on gui text node</p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#grid">Grid</a></strong> - Component for manage node positions </p></li>
|
||||
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#hover">Hover</a></strong> - System Druid component, handle hover node state</p></li>
|
||||
</ul>
|
||||
|
||||
<p>Full info see on <em>components.md</em></p>
|
||||
<p>Full info see on <em><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md">components.md</a></em></p>
|
||||
|
||||
|
||||
<p><a name="Creating_components"></a></p>
|
||||
<h2>Creating components</h2>
|
||||
<p><a name="Basic_usage"></a></p>
|
||||
<h2>Basic usage</h2>
|
||||
|
||||
<p>For using <strong>Druid</strong>, first you should create Druid instance to spawn components. Pass to new Druid instance main engine functions: <em>update</em>, *on<em>message* and *on</em>input*</p>
|
||||
|
||||
<p>All <strong>Druid</strong> components as arguments can apply node name string, you can don't do <code>gui.get_node()</code> before</p>
|
||||
|
||||
<p>All <strong>Druid</strong> and component methods calling with <code>:</code> like <code>self.druid:new_button()</code></p>
|
||||
|
||||
<p>Any components creating via druid:</p>
|
||||
|
||||
<pre>
|
||||
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
|
||||
|
||||
<span class="keyword">local</span> <span class="keyword">function</span> button_callback(self)
|
||||
<span class="global">print</span>(<span class="string">"Button was clicked!"</span>)
|
||||
<span class="keyword">end</span>
|
||||
|
||||
<span class="keyword">local</span> <span class="keyword">function</span> init(self)
|
||||
self.druid = druid.new(self)
|
||||
<span class="keyword">local</span> button = self.druid:new_button(node_name, callback)
|
||||
<span class="keyword">local</span> text = self.druid:new_text(node_text_name)
|
||||
self.druid:new_button(<span class="string">"button_node_name"</span>, button_callback)
|
||||
<span class="keyword">end</span>
|
||||
|
||||
<span class="keyword">function</span> on_input(self, action_id, action)
|
||||
<span class="keyword">return</span> self.druid:on_input(action_id, action)
|
||||
<span class="keyword">end</span>
|
||||
</pre>
|
||||
|
||||
|
||||
<p><a name="Druid_Events"></a></p>
|
||||
<h2>Druid Events</h2>
|
||||
|
||||
<p>Any <strong>Druid</strong> components as callbacks uses <a href="https://insality.github.io/druid/modules/druid_event.html">Druid Events</a>. In component API (<a href="https://insality.github.io/druid/modules/druid.button.html#Events">button example</a>) pointed list of component events. You can manually subscribe on this events by next API:</p>
|
||||
|
||||
<ul>
|
||||
<li><p><strong>event:subscribe</strong>(callback)</p></li>
|
||||
<li><p><strong>event:unsubscribe</strong>(callback)</p></li>
|
||||
<li><p><strong>event:clear</strong>()</p></li>
|
||||
</ul>
|
||||
|
||||
<p>Any events can handle several callbacks, if needed.</p>
|
||||
|
||||
|
||||
<p><a name="Druid_lifecycle"></a></p>
|
||||
<h2>Druid lifecycle</h2>
|
||||
|
||||
<p>Here is full druid lifecycle setup in your <strong>*.gui_script</strong> file:</p>
|
||||
|
||||
<pre>
|
||||
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
|
||||
|
||||
<span class="keyword">function</span> init(self)
|
||||
self.druid = druid.new(self)
|
||||
<span class="keyword">end</span>
|
||||
|
||||
<span class="keyword">function</span> final(self)
|
||||
self.druid:final()
|
||||
<span class="keyword">end</span>
|
||||
|
||||
<span class="keyword">function</span> update(self, dt)
|
||||
self.druid:update(dt)
|
||||
<span class="keyword">end</span>
|
||||
|
||||
<span class="keyword">function</span> on_input(self, action_id, action)
|
||||
<span class="keyword">return</span> self.druid:on_input(action_id, action)
|
||||
<span class="keyword">end</span>
|
||||
|
||||
<span class="keyword">function</span> on_message(self, message_id, message, sender)
|
||||
self.druid:on_message(message_id, message, sender)
|
||||
<span class="keyword">end</span>
|
||||
|
||||
<span class="keyword">function</span> on_input(self, action_id, action)
|
||||
self.druid:on_input(action_id, action)
|
||||
<span class="keyword">end</span>
|
||||
</pre>
|
||||
|
||||
|
||||
<ul>
|
||||
<li>*on_input* used for almost all basic druid components</li>
|
||||
<li><em>update</em> used for progress bar, scroll and timer base components</li>
|
||||
<li>*on_message* used for specific druid events, like language change or layout change (TODO: in future)</li>
|
||||
<li><em>final</em> used for custom components, what have to do several action before destroy</li>
|
||||
</ul>
|
||||
|
||||
<p>Recommended is fully integrate al druid lifecycles functions</p>
|
||||
|
||||
|
||||
<p><a name="Features"></a></p>
|
||||
<h2>Features</h2>
|
||||
|
||||
<ul>
|
||||
<li>Druid input goes as stack. Last created button will checked first. So create your GUI from back</li>
|
||||
<li>Don't forget about <code>return</code> in <code>on_input</code>: <code>return self.druid:on_input()</code>. It need, if you have more than 1 acquire inputs (several druid, other input system, etc)</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<p><a name="Examples"></a></p>
|
||||
<h2>Examples</h2>
|
||||
|
||||
<p>See the <a href="https://github.com/insality/druid/tree/develop/example/kenney">example folder</a> for examples of how to use Druid</p>
|
||||
<p>See the <a href="https://github.com/Insality/druid/tree/develop/example">example folder</a> for examples of how to use <strong>Druid</strong></p>
|
||||
|
||||
<p>See the <a href="https://github.com/insality/druid-assets">druid-assets repository</a> for examples of how to create custom components and styles</p>
|
||||
|
||||
<p>Try the HTML5 version of the example app</p>
|
||||
<p>Try the <a href="https://insality.github.io/druid/druid/">HTML5 version</a> of the example app</p>
|
||||
|
||||
|
||||
<p><a name="Documentation"></a></p>
|
||||
<h2>Documentation</h2>
|
||||
|
||||
<p>To learn druid better, read next documentation:
|
||||
- Druid components
|
||||
- Create custom components
|
||||
- Druid asset store
|
||||
- Druid Styles</p>
|
||||
<p>To learn <strong>Druid</strong> better, read next documentation:
|
||||
- <a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md">Druid components</a>
|
||||
- <a href="https://github.com/Insality/druid/blob/master/docs_md/02-creating_custom_components.md">Create custom components</a>
|
||||
- <a href="https://github.com/Insality/druid/blob/master/docs_md/03-styles.md">Druid styles</a>
|
||||
- <a href="https://github.com/Insality/druid/blob/master/docs_md/04-druid_assets.md">Druid asset store</a></p>
|
||||
|
||||
<p>Full druid documentation you can find here:
|
||||
<p>Full <strong>Druid</strong> documentation you can find here:
|
||||
https://insality.github.io/druid/</p>
|
||||
|
||||
|
||||
@@ -203,25 +293,15 @@ https://insality.github.io/druid/</p>
|
||||
<p><em>Will fill later</em></p>
|
||||
|
||||
|
||||
<p><a name="Future_plans"></a></p>
|
||||
<h2>Future plans</h2>
|
||||
|
||||
<ul>
|
||||
<li><p>Basic input component</p></li>
|
||||
<li><p>Add on<em>layout</em>change support (to keep gui data between layout change)</p></li>
|
||||
<li><p>Add on<em>change</em>language support (call single function to update all druid instance)</p></li>
|
||||
<li><p>Better documentation and examples</p></li>
|
||||
<li><p>Add more comfortable gamepad support for GUI (ability to select button with DPAD and other stuff)</p></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<p><a name="License"></a></p>
|
||||
<h2>License</h2>
|
||||
|
||||
<p>Original idea by <a href="https://github.com/AGulev">AGulev</a></p>
|
||||
<p>Original created by <a href="https://github.com/AGulev">AGulev</a></p>
|
||||
|
||||
<p>Developed and supporting by <a href="https://github.com/Insality">Insality</a></p>
|
||||
|
||||
<p>Assets from <a href="http://www.kenney.nl/">Kenney</a></p>
|
||||
|
||||
<p>MIT License</p>
|
||||
|
||||
|
||||
@@ -234,7 +314,7 @@ https://insality.github.io/druid/</p>
|
||||
</div> <!-- id="main" -->
|
||||
<div id="about">
|
||||
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
||||
<i style="float:right;">Last updated 2020-03-21 23:23:01 </i>
|
||||
<i style="float:right;">Last updated 2020-04-13 19:36:00 </i>
|
||||
</div> <!-- id="about" -->
|
||||
</div> <!-- id="container" -->
|
||||
</body>
|
||||
|
@@ -1,46 +1,251 @@
|
||||
|
||||
|
||||
# Druid components
|
||||
|
||||
|
||||
## Button
|
||||
Basic game button
|
||||
[Button API here](https://insality.github.io/druid/modules/druid.button.html)
|
||||
|
||||
### Overview
|
||||
Basic Druid input component. Handle input on node and provide different callbacks on touch events.
|
||||
|
||||
### Setup
|
||||
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`
|
||||
|
||||
### Notes
|
||||
- Button callback have next params: (self, params, button_instance)
|
||||
- **self** - Druid self context
|
||||
- **params** - Additional params, specified on button creating
|
||||
- **button_instance** - button itself
|
||||
- You can set _params_ on button callback on button creating: `druid:new_button("node_name", callback, params)`. This _params_ will pass in callback as second argument
|
||||
- Button have next events:
|
||||
- **on_click** - basic button callback
|
||||
- **on_repeated_click** - repeated click callback, while holding the button, don't trigger if callback is empty
|
||||
- **on_long_click** - callback on long button tap, don't trigger if callback is empty
|
||||
- **on_hold_click** - hold callback, before long_click trigger, don't trigger if callback is empty
|
||||
- **on_double_click** - different callback, if tap button 2+ in row, don't trigger if callback is empty
|
||||
- If button have double click event and it is triggered, usual callback will be not invoked
|
||||
- If you have stencil on buttons and you don't want trigger them outside of stencil node, you can use `button:set_click_zone` to restrict button click zone
|
||||
- Button can have key trigger to use then by key: `button:set_key_trigger`
|
||||
- Animation node can be used for example to animate small icon on big panel. Node name of trigger zone will be `big panel` and animation node will be `small icon`
|
||||
|
||||
|
||||
## Text
|
||||
Wrap on text node with text size adjusting
|
||||
[Text API here](https://insality.github.io/druid/modules/druid.text.html)
|
||||
|
||||
### Overview
|
||||
Basic Druid text component. Text components by default have the text size adjusting.
|
||||
|
||||
### Setup
|
||||
Create text node with druid: `text = druid:new_text(node_name, [initial_value], [is_disable_size_adjust])`
|
||||
|
||||
### Notes
|
||||
- Text component by default have auto adjust text sizing. Text never will be bigger, than text node size, which you can setup in GUI scene. It can be disabled on component creating by settings argument `is_no_adjust` to _true_
|
||||
|
||||

|
||||
|
||||
- Text pivot can be changed with `text:set_pivot`, and text will save their position inside their text size box:
|
||||
|
||||

|
||||
|
||||
|
||||
## Blocker
|
||||
Block input in node zone
|
||||
[Blocker API here](https://insality.github.io/druid/modules/druid.button.html)
|
||||
|
||||
### Overview
|
||||
Druid component for block input. Use it to block input in special zone.
|
||||
|
||||
### Setup
|
||||
Create blocker component with druid: `druid:new_blocker(node_name)`
|
||||
|
||||
### Notes
|
||||
Explanation:
|
||||

|
||||
|
||||
Blue zone is **button** with close_window callback
|
||||
|
||||
Yellow zone is blocker with window content
|
||||
|
||||
So you can do the safe zones, when you have the big buttons
|
||||
|
||||
|
||||
## Back Handler
|
||||
Handle back button (Android, backspace)
|
||||
[Back handler API here](https://insality.github.io/druid/modules/druid.back_handler.html)
|
||||
|
||||
## Locale
|
||||
Text component with handle localization system
|
||||
### Overview
|
||||
Component to handle back button. It handle Android back button and Backspace key. Key triggers in `input.binding` should be setup for correct working.
|
||||
|
||||
## Timer
|
||||
Run timer on text node
|
||||
### Setup
|
||||
Setup callback with `druid:new_back_handler(callback)`
|
||||
|
||||
### Notes
|
||||
|
||||
|
||||
## Lang text
|
||||
[Lang text API here](https://insality.github.io/druid/modules/druid.lang_text.html)
|
||||
|
||||
### Overview
|
||||
Wrap on Text component to handle localization. It uses druid get_text_function to set text by it's id
|
||||
|
||||
### Setup
|
||||
Create lang text component with druid `text = druid:new_lang_text(node_name, locale_id)`
|
||||
|
||||
### Notes
|
||||
|
||||
## Progress
|
||||
Basic progress bar
|
||||
|
||||
## Scroll
|
||||
Basic scroll component
|
||||
[Scroll API here](https://insality.github.io/druid/modules/druid.scroll.html)
|
||||
|
||||
## Grid
|
||||
Component for manage node positions
|
||||
### Overview
|
||||
Basic Druid scroll component. Handle all scrolling stuff in druid GUI
|
||||
|
||||
### Setup
|
||||
Create scroll component with druid: `scroll = druid:new_scroll(scroll_parent, scroll_input)`.
|
||||
|
||||
_Scroll parent_ - is dynamic part. This node will change position by scroll system
|
||||
|
||||
_Scroll input_ - is static part. It capturing user input and recognize scrolling touches
|
||||
|
||||
Initial scroll size will be equal to _scroll parent_ node size. The initial view box will be equal to _scroll input_ node size
|
||||
|
||||
Usually, Place static input zone part, and as children add scroll parent part:
|
||||

|
||||

|
||||
|
||||
*Here scroll_content_zone below input zone, in game content zone be able to scroll left until end*
|
||||
|
||||
### Notes
|
||||
- Scroll by default style have inertion and "back moving". It can be adjust via scroll [style settings](https://insality.github.io/druid/modules/druid.scroll.html#Style)
|
||||
- You can setup "points of interest". Scroll always will be centered on closes point of interest. It is able to create slider without inertion and points of interest on each scroll element.
|
||||
- Scroll have next events:
|
||||
- *on_scroll* On scroll move callback
|
||||
- *on_scroll_to* On scroll_to function callback
|
||||
- *on_point_scroll* On scroll_to_index function callback
|
||||
- You can adjust scroll content size by `scroll:set_border(node_size)`. It will setup new size to content node.
|
||||
|
||||
|
||||
## Progress
|
||||
[Progress API here](https://insality.github.io/druid/modules/druid.progress.html)
|
||||
|
||||
### Overview
|
||||
Basic Druid progress bar component
|
||||
|
||||
### Setup
|
||||
Create progress bar component with druid: `progress = druid:new_progress(node_name, key, init_value)`
|
||||
|
||||
Node name should have maximum node size, so in GUI scene, node_name should be fully filled.
|
||||
Key is value from druid const: const.SIDE.X (or just "x") or const.SIDE.Y (or just "y")
|
||||
|
||||
### Notes
|
||||
- Progress correct working with 9slice nodes, it trying to set size by _set_size_ first, if it is not possible, it set up sizing via _set_scale_
|
||||
- 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
|
||||
|
||||
## Slider
|
||||
Basic slider component
|
||||
[Slider API here](https://insality.github.io/druid/modules/druid.slider.html)
|
||||
|
||||
## Checkbox
|
||||
Basic checkbox component
|
||||
### Overview
|
||||
Basic Druid slider component
|
||||
|
||||
## Checkbox group
|
||||
Several checkboxes in one group
|
||||
### Setup
|
||||
Create slider component with druid: `slider = druid:new_slider(node_name, end_pos, callback)`
|
||||
|
||||
## Radio group
|
||||
Several checkboxes in one group with single choice
|
||||
Pin node (node_name in params) should be placed in zero position (initial). It will be available to mode Pin node between start pos and end pos.
|
||||
|
||||
## Hover
|
||||
Trigger component for check node hover state
|
||||
### Notes
|
||||
- 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)
|
||||
|
||||
## Input
|
||||
Component to process user text input
|
||||
[Input API here](https://insality.github.io/druid/modules/druid.input.html)
|
||||
|
||||
### Overview
|
||||
Basic Druid text input component (unimplemented)
|
||||
|
||||
### Setup
|
||||
|
||||
### Notes
|
||||
|
||||
|
||||
## Checkbox
|
||||
[Checkbox API here](https://insality.github.io/druid/modules/druid.checkbox.html)
|
||||
|
||||
### Overview
|
||||
Basic Druid checkbox component.
|
||||
|
||||
### Setup
|
||||
Create checkbox component with druid: `checkbox = druid:new_checkbox(node, callback)`
|
||||
|
||||
### Notes
|
||||
- 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])`
|
||||
|
||||
## Checkbox group
|
||||
[Checkbox group API here](https://insality.github.io/druid/modules/druid.checkbox_group.html)
|
||||
|
||||
### Overview
|
||||
Several checkboxes in one group
|
||||
|
||||
### Setup
|
||||
Create checkbox_group component with druid: `group = druid:new_checkbox_group(nodes[], callback)`
|
||||
|
||||
### Notes
|
||||
- Callback arguments: `function(self, checkbox_index)`. Index is equals in _nodes[]_ array in component constructor
|
||||
- You can get/set checkbox_group state with `group:set_state()` and `group:get_state()`
|
||||
|
||||
|
||||
## Radio group
|
||||
[Radio group API here](https://insality.github.io/druid/modules/druid.radio_group.html)
|
||||
|
||||
### Overview
|
||||
Several checkboxes in one group with single choice
|
||||
|
||||
### Setup
|
||||
Create radio_group component with druid: `group = druid:new_radio_group(nodes[], callback)`
|
||||
|
||||
### Notes
|
||||
- Callback arguments: `function(self, checkbox_index)`. Index is equals in _nodes[]_ array in component constructor
|
||||
- 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
|
||||
|
||||
## Timer
|
||||
[Timer API here](https://insality.github.io/druid/modules/druid.timer.html)
|
||||
|
||||
### Overview
|
||||
Handle timer work on gui text node
|
||||
|
||||
### Setup
|
||||
Create timer component with druid: `timer = druid:new_timer(text_node, from_seconds, to_seconds, callback)`
|
||||
|
||||
### Notes
|
||||
- Timer fires callback, when timer value equals to _to_seconds_
|
||||
- Timer will setup text node with current timer value
|
||||
- Timer uses update function to handle time
|
||||
|
||||
## Grid
|
||||
[Grid API here](https://insality.github.io/druid/modules/druid.grid.html)
|
||||
|
||||
### Overview
|
||||
Component for manage node positions. Very simple implementation for nodes with equal size
|
||||
|
||||
### Setup
|
||||
Create grid component with druid: `grid = druid:new_grid(parent_node, prefab_node, max_in_row_elements)`
|
||||
|
||||
### Notes
|
||||
- Grid on _adding elements_ will setup 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 adjust anchor and border between elements
|
||||
- _Prefab node_ in component init used to get grid item size
|
||||
|
||||
## Hover
|
||||
[Hover API here](https://insality.github.io/druid/modules/druid.hover.html)
|
||||
|
||||
### Overview
|
||||
System Druid component, handle hover node state
|
||||
|
||||
### Setup
|
||||
Create grid component with druid: `hover = druid:new_hover(node, callback)`
|
||||
|
||||
### Notes
|
@@ -1,16 +1,20 @@
|
||||
# Creating custom components
|
||||
|
||||
## Overview
|
||||
Druid allows you to create your custom components from druid basic components or other custom components
|
||||
|
||||
Druid allows you to create your custom components from druid basic components or other custom components.
|
||||
|
||||
Every component is the children of Basic Druid component. Read the [basic component API here].(https://insality.github.io/druid/modules/component.html), Methods of basic components you can call via self:{method_name}
|
||||
|
||||
|
||||
## Custom components
|
||||
|
||||
Basic custom component template looks like this:
|
||||
```lua
|
||||
local const = require("druid.const")
|
||||
local component = require("druid.component")
|
||||
|
||||
local M = component.create("your_component")
|
||||
local M = component.create("my_component")
|
||||
|
||||
-- Component constructor
|
||||
function M.init(self, ...)
|
||||
@@ -36,6 +40,15 @@ end
|
||||
function M.on_layout_change(self)
|
||||
end
|
||||
|
||||
-- Call, if input was capturing before this component
|
||||
-- Example: scroll is start scrolling, so you need unhover button
|
||||
function M.on_input_interrupt(self)
|
||||
end
|
||||
|
||||
-- Call on component remove or on druid:final
|
||||
function M.on_remove(self)
|
||||
end
|
||||
|
||||
return M
|
||||
```
|
||||
|
||||
@@ -45,11 +58,29 @@ Add your custom component to druid via `druid.register`
|
||||
local druid = require("druid.druid")
|
||||
local my_component = require("my.amazing.component")
|
||||
|
||||
local function init(self)
|
||||
function init(self)
|
||||
druid.register("my_component", my_component)
|
||||
end
|
||||
```
|
||||
|
||||
Registering make new function with "new_{component_name}". In our example it will be: `druid:new_my_component()`.
|
||||
|
||||
Or you can create component without registering with `druid:create(my_component_module)`
|
||||
|
||||
As component registered, you can create your component with next code:
|
||||
```lua
|
||||
local druid = require("druid.druid")
|
||||
local my_component = require("my.amazing.component")
|
||||
|
||||
function init(self)
|
||||
self.druid = druid.new(self)
|
||||
|
||||
local my_component = self.druid:new_my_component(...)
|
||||
-- or --
|
||||
local my_component = self.druid:create(my_component, ...)
|
||||
end
|
||||
```
|
||||
|
||||
### Interest
|
||||
Interest - is a way to indicate what events your component will respond to.
|
||||
There is next interests in druid:
|
||||
@@ -67,7 +98,7 @@ There is next interests in druid:
|
||||
|
||||
|
||||
## Best practice on custom components
|
||||
On each component recomended describe component scheme in next way:
|
||||
On each component recommended describe component scheme in next way:
|
||||
|
||||
```lua
|
||||
-- Component module
|
||||
@@ -76,9 +107,9 @@ local component = require("druid.component")
|
||||
local M = component.create("your_component")
|
||||
|
||||
local SCHEME = {
|
||||
ROOT = "/root",
|
||||
ITEM = "/item",
|
||||
TITLE = "/title"
|
||||
ROOT = "root",
|
||||
ITEM = "item",
|
||||
TITLE = "title"
|
||||
}
|
||||
|
||||
function M.init(self, template_name, node_table)
|
||||
@@ -102,4 +133,9 @@ function M.init(self, template_name, node_table)
|
||||
local my_style = self:get_style()
|
||||
end
|
||||
|
||||
```
|
||||
```
|
||||
|
||||
|
||||
## Power of using templates
|
||||
|
||||
You can use one component, but creating and customizing templates for them. Templates only requires to match the component scheme.
|
@@ -3,6 +3,6 @@
|
||||
## Overview
|
||||
I've created [druid-assets repository](https://github.com/Insality/druid-assets) to make a _marketplace_ with custom styles and components.
|
||||
|
||||
Any of druid users can push their own components and styles to share it with the other users
|
||||
Any of Druid users can push their own components and styles to share it with the other users
|
||||
|
||||
Also, this marketplace is great example to how you can create your custom components
|
@@ -3,16 +3,17 @@
|
||||
|
||||
--- Component events
|
||||
-- @table Events
|
||||
-- @tfield druid_event on_click On release button callback
|
||||
-- @tfield druid_event on_repeated_click On repeated action button callback
|
||||
-- @tfield druid_event on_long_click On long tap button callback
|
||||
-- @tfield druid_event on_double_click On double tap button callback
|
||||
-- @tfield druid_event on_click (self, params, button_instance) On release button callback
|
||||
-- @tfield druid_event on_repeated_click (self, params, button_instance, click_amount) On repeated action button callback
|
||||
-- @tfield druid_event on_long_click (self, params, button_instance, time) On long tap button callback
|
||||
-- @tfield druid_event on_double_click (self, params, button_instance, click_amount) On double tap button callback
|
||||
-- @tfield druid_event on_hold_callback (self, params, button_instance, time) On button hold before long_click callback
|
||||
|
||||
--- Component fields
|
||||
-- @table Fields
|
||||
-- @tfield node node Trigger node
|
||||
-- @tfield[opt=node] node anim_node Animation node
|
||||
-- @tfield vector3 scale_from Initial scale of anim_node
|
||||
-- @tfield vector3 start_scale Initial scale of anim_node
|
||||
-- @tfield vector3 pos Initial pos of anim_node
|
||||
-- @tfield any params Params to click callbacks
|
||||
-- @tfield druid.hover hover Druid hover logic component
|
||||
@@ -145,14 +146,12 @@ end
|
||||
-- @tparam function callback Button callback
|
||||
-- @tparam[opt] table params Button callback params
|
||||
-- @tparam[opt] node anim_node Button anim node (node, if not provided)
|
||||
-- @tparam[opt] string event Button react event, const.ACTION_TOUCH by default
|
||||
function M.init(self, node, callback, params, anim_node, event)
|
||||
function M.init(self, node, callback, params, anim_node)
|
||||
self.druid = self:get_druid()
|
||||
self.node = self:get_node(node)
|
||||
|
||||
self.anim_node = anim_node and helper:get_node(anim_node) or self.node
|
||||
-- TODO: rename to start_scale
|
||||
self.scale_from = gui.get_scale(self.anim_node)
|
||||
self.start_scale = gui.get_scale(self.anim_node)
|
||||
self.params = params
|
||||
self.hover = self.druid:new_hover(node, on_button_hover)
|
||||
self.click_zone = nil
|
||||
|
@@ -39,7 +39,7 @@ end
|
||||
|
||||
--- Set checkbox group state
|
||||
-- @function checkbox_group:set_state
|
||||
-- @tparam bool[] state Array of checkbox state
|
||||
-- @tparam bool[] indexes Array of checkbox state
|
||||
function M.set_state(self, indexes)
|
||||
for i = 1, #indexes do
|
||||
if self.checkboxes[i] then
|
||||
|
@@ -74,7 +74,7 @@ end
|
||||
-- @function progress:init
|
||||
-- @tparam string|node node Progress bar fill node or node name
|
||||
-- @tparam string key Progress bar direction: const.SIDE.X or const.SIDE.Y
|
||||
-- @tparam number init_value Initial value of progress bar
|
||||
-- @tparam[opt=1] number init_value Initial value of progress bar
|
||||
function M.init(self, node, key, init_value)
|
||||
assert(key == const.SIDE.X or const.SIDE.Y, "Progress bar key should be 'x' or 'y'")
|
||||
|
||||
|
@@ -48,7 +48,7 @@ end
|
||||
|
||||
--- Set radio group state
|
||||
-- @function radio_group:set_state
|
||||
-- @tparam bool[] state Array of checkbox state
|
||||
-- @tparam number index Index in radio group
|
||||
function M.set_state(self, index)
|
||||
on_checkbox_click(self, index)
|
||||
end
|
||||
@@ -56,7 +56,7 @@ end
|
||||
|
||||
--- Return radio group state
|
||||
-- @function radio_group:get_state
|
||||
-- @treturn bool[] Array if checkboxes state
|
||||
-- @treturn number Index in radio group
|
||||
function M.get_state(self)
|
||||
local result = -1
|
||||
|
||||
|
@@ -11,7 +11,7 @@
|
||||
-- @table Events
|
||||
-- @tfield druid_event on_scroll On scroll move callback
|
||||
-- @tfield druid_event on_scroll_to On scroll_to function callback
|
||||
-- @tfield druid_event on_point_scroll On scroll_to_index function callbck
|
||||
-- @tfield druid_event on_point_scroll On scroll_to_index function callback
|
||||
|
||||
--- Component fields
|
||||
-- @table Fields
|
||||
|
@@ -30,6 +30,12 @@ local function on_change_value(self)
|
||||
end
|
||||
|
||||
|
||||
local function set_position(self, value)
|
||||
value = helper.clamp(value, 0, 1)
|
||||
gui.set_position(self.node, self.start_pos + self.dist * value)
|
||||
end
|
||||
|
||||
|
||||
--- Component init function
|
||||
-- @function slider:init
|
||||
-- @tparam node node Gui pin node
|
||||
@@ -76,9 +82,8 @@ function M.on_input(self, action_id, action)
|
||||
self.target_pos.x = helper.clamp(self.pos.x, self.start_pos.x, self.end_pos.x)
|
||||
self.target_pos.y = helper.clamp(self.pos.y, self.start_pos.y, self.end_pos.y)
|
||||
|
||||
gui.set_position(self.node, self.target_pos)
|
||||
|
||||
if prev_x ~= self.target_pos.x or prev_y ~= self.target_pos.y then
|
||||
local prev_value = self.value
|
||||
|
||||
if self.dist.x > 0 then
|
||||
self.value = (self.target_pos.x - self.start_pos.x) / self.dist.x
|
||||
@@ -88,8 +93,27 @@ function M.on_input(self, action_id, action)
|
||||
self.value = (self.target_pos.y - self.start_pos.y) / self.dist.y
|
||||
end
|
||||
|
||||
on_change_value(self)
|
||||
if self.steps then
|
||||
local closest_dist = 1000
|
||||
local closest = nil
|
||||
for i = 1, #self.steps do
|
||||
local dist = math.abs(self.value - self.steps[i])
|
||||
if dist < closest_dist then
|
||||
closest = self.steps[i]
|
||||
closest_dist = dist
|
||||
end
|
||||
end
|
||||
if closest then
|
||||
self.value = closest
|
||||
end
|
||||
end
|
||||
|
||||
if prev_value ~= self.value then
|
||||
on_change_value(self)
|
||||
end
|
||||
end
|
||||
|
||||
set_position(self, self.value)
|
||||
end
|
||||
|
||||
if action.released then
|
||||
@@ -106,8 +130,7 @@ end
|
||||
-- @tparam[opt] bool is_silent Don't trigger event if true
|
||||
function M.set(self, value, is_silent)
|
||||
value = helper.clamp(value, 0, 1)
|
||||
|
||||
gui.set_position(self.node, self.start_pos + self.dist * value)
|
||||
set_position(self, value)
|
||||
self.value = value
|
||||
if not is_silent then
|
||||
on_change_value(self)
|
||||
@@ -115,4 +138,14 @@ function M.set(self, value, is_silent)
|
||||
end
|
||||
|
||||
|
||||
--- Set slider steps. Pin node will
|
||||
-- apply closest step position
|
||||
-- @function slider:set_steps
|
||||
-- @tparam number[] steps Array of steps
|
||||
-- @usage slider:set_steps({0, 0.2, 0.6, 1})
|
||||
function M.set_steps(self, steps)
|
||||
self.steps = steps
|
||||
end
|
||||
|
||||
|
||||
return M
|
||||
|
@@ -67,7 +67,7 @@ end
|
||||
--- Component init function
|
||||
-- @function text:init
|
||||
-- @tparam node node Gui text node
|
||||
-- @tparam[opt] string value Initial text
|
||||
-- @tparam[opt] string value Initial text. Default value is node text from GUI scene.
|
||||
-- @tparam[opt] bool no_adjust If true, text will be not auto-adjust size
|
||||
function M.init(self, node, value, no_adjust)
|
||||
self.node = self:get_node(node)
|
||||
@@ -85,10 +85,10 @@ function M.init(self, node, value, no_adjust)
|
||||
self.color = gui.get_color(self.node)
|
||||
|
||||
self.on_set_text = Event()
|
||||
self.on_update_text_scale = Event()
|
||||
self.on_set_pivot = Event()
|
||||
self.on_update_text_scale = Event()
|
||||
|
||||
self:set_to(value or 0)
|
||||
self:set_to(value or gui.get_text(self.node))
|
||||
return self
|
||||
end
|
||||
|
||||
|
@@ -12,12 +12,9 @@
|
||||
--- Component fields
|
||||
-- @table Fields
|
||||
-- @tfield node node Trigger node
|
||||
-- @tfield[opt=node] node anim_node Animation node
|
||||
-- @tfield vector3 scale_from Initial scale of anim_node
|
||||
-- @tfield vector3 pos Initial pos of anim_node
|
||||
-- @tfield any params Params to click callbacks
|
||||
-- @tfield druid.hover hover Druid hover logic component
|
||||
-- @tfield[opt] node click_zone Restriction zone
|
||||
-- @tfield number from Initial timer value
|
||||
-- @tfield number target Target timer value
|
||||
-- @tfield number value Current timer value
|
||||
|
||||
local Event = require("druid.event")
|
||||
local const = require("druid.const")
|
||||
|
@@ -86,14 +86,21 @@ function Component.get_interests(self)
|
||||
end
|
||||
|
||||
|
||||
-- TODO: Определиться с get_node и node
|
||||
-- get_node - берет ноду по ноде или строке
|
||||
-- node - может брать ноду у компонента по схеме (если есть
|
||||
-- template или таблица нод после gui.clone_tree)
|
||||
--- Get node for component by name.
|
||||
-- If component has nodes, node_or_name should be string
|
||||
-- It auto pick node by template name or from nodes by clone_tree
|
||||
-- if they was setup via component:set_nodes, component:set_template
|
||||
-- @function component:get_node
|
||||
-- @tparam string|node node_or_name Node name or node itself
|
||||
-- @treturn node Gui node
|
||||
function Component.get_node(self, node_or_name)
|
||||
local template_name = self:get_template() or const.EMPTY_STRING
|
||||
local nodes = self:get_nodes()
|
||||
|
||||
if template_name ~= const.EMPTY_STRING then
|
||||
template_name = template_name .. "/"
|
||||
end
|
||||
|
||||
if nodes then
|
||||
assert(type(node_or_name) == "strings", "You should pass node name instead of node")
|
||||
return nodes[template_name .. node_or_name]
|
||||
|
@@ -18,6 +18,8 @@ local const = require("druid.const")
|
||||
local druid_instance = require("druid.system.druid_instance")
|
||||
local settings = require("druid.system.settings")
|
||||
|
||||
local default_style = require("druid.styles.default.style")
|
||||
|
||||
local M = {}
|
||||
|
||||
|
||||
@@ -29,13 +31,10 @@ local M = {}
|
||||
-- @tparam table module lua table with component
|
||||
function M.register(name, module)
|
||||
-- TODO: Find better solution to creating elements?
|
||||
-- Possibly: druid.new(druid.BUTTON, etc?)
|
||||
-- Current way is very implicit
|
||||
druid_instance["new_" .. name] = function(self, ...)
|
||||
return druid_instance.create(self, module, ...)
|
||||
end
|
||||
|
||||
-- print("Register component", name)
|
||||
end
|
||||
|
||||
|
||||
@@ -45,6 +44,9 @@ end
|
||||
-- @tparam[opt] table style Druid style module
|
||||
-- @treturn druid_instance Druid instance
|
||||
function M.new(context, style)
|
||||
if settings.default_style == nil then
|
||||
M.set_default_style(default_style)
|
||||
end
|
||||
return druid_instance(context, style)
|
||||
end
|
||||
|
||||
|
@@ -5,7 +5,7 @@ local function scale_to(self, node, to, callback, time, delay, easing)
|
||||
easing = easing or gui.EASING_INSINE
|
||||
time = time or M.SCALE_ANIMATION_TIME
|
||||
delay = delay or 0
|
||||
time = time or 0.25
|
||||
time = time or 0.10
|
||||
gui.animate(node, gui.PROP_SCALE, to, easing, time, delay,
|
||||
function()
|
||||
if callback then
|
||||
@@ -24,7 +24,7 @@ end
|
||||
function M.tap_scale_animation(self, node, target_scale)
|
||||
scale_to(self, node, target_scale,
|
||||
function()
|
||||
M.back_scale_animation(self, node, self.scale_from)
|
||||
M.back_scale_animation(self, node, self.start_scale)
|
||||
end
|
||||
)
|
||||
end
|
||||
|
@@ -5,9 +5,9 @@ local M = {}
|
||||
|
||||
|
||||
M["button"] = {
|
||||
HOVER_SCALE = vmath.vector3(-0.025, -0.025, 1),
|
||||
HOVER_TIME = 0.05,
|
||||
SCALE_CHANGE = vmath.vector3(-0.05, -0.05, 1),
|
||||
HOVER_SCALE = vmath.vector3(0.02, 0.02, 1),
|
||||
HOVER_TIME = 0.04,
|
||||
SCALE_CHANGE = vmath.vector3(0.035, 0.035, 1),
|
||||
BTN_SOUND = "click",
|
||||
BTN_SOUND_DISABLED = "click",
|
||||
DISABLED_COLOR = vmath.vector4(0, 0, 0, 1),
|
||||
@@ -18,14 +18,14 @@ M["button"] = {
|
||||
IS_HOVER = true,
|
||||
|
||||
on_hover = function(self, node, state)
|
||||
local scale_to = self.scale_from + M.button.HOVER_SCALE
|
||||
local scale_to = self.start_scale + M.button.HOVER_SCALE
|
||||
|
||||
local target_scale = state and scale_to or self.scale_from
|
||||
local target_scale = state and scale_to or self.start_scale
|
||||
anims.hover_scale(self, target_scale, M.button.HOVER_TIME)
|
||||
end,
|
||||
|
||||
on_click = function(self, node)
|
||||
local scale_to = self.scale_from + M.button.SCALE_CHANGE
|
||||
local scale_to = self.start_scale + M.button.SCALE_CHANGE
|
||||
anims.tap_scale_animation(self, node, scale_to)
|
||||
settings.play_sound(M.button.BTN_SOUND)
|
||||
end,
|
||||
|
@@ -43,7 +43,7 @@ local Druid = class("druid.druid_instance")
|
||||
|
||||
|
||||
local function input_init(self)
|
||||
if not sys.get_config("druid.auto_focus") == "1" then
|
||||
if sys.get_config("druid.no_auto_input") == "1" then
|
||||
return
|
||||
end
|
||||
|
||||
@@ -128,12 +128,27 @@ function Druid.create(self, component, ...)
|
||||
end
|
||||
|
||||
|
||||
--- Call on final function on gui_script. It will call on_remove
|
||||
-- on all druid components
|
||||
-- @function druid:final
|
||||
function Druid.final(self)
|
||||
local components = self.components[const.ALL]
|
||||
|
||||
for i = #components, 1, -1 do
|
||||
if components[i].on_remove then
|
||||
components[i]:on_remove()
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
--- Remove component from druid instance.
|
||||
-- Component `on_remove` function will be invoked, if exist.
|
||||
-- @function druid:remove
|
||||
-- @tparam Component component Component instance
|
||||
function Druid.remove(self, component)
|
||||
local all_components = self.components[const.ALL]
|
||||
|
||||
for i = #all_components, 1, -1 do
|
||||
if all_components[i] == component then
|
||||
if component.on_remove then
|
||||
@@ -204,9 +219,11 @@ function Druid.on_message(self, message_id, message, sender)
|
||||
end
|
||||
end
|
||||
else
|
||||
local components = self.components[const.ON_MESSAGE] or const.EMPTY_TABLE
|
||||
for i = 1, #components do
|
||||
components[i]:on_message(message_id, message, sender)
|
||||
local components = self.components[const.ON_MESSAGE]
|
||||
if components then
|
||||
for i = 1, #components do
|
||||
components[i]:on_message(message_id, message, sender)
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
@@ -7,12 +7,14 @@ local main_page = require("example.page.main")
|
||||
local text_page = require("example.page.texts")
|
||||
local button_page = require("example.page.button")
|
||||
local scroll_page = require("example.page.scroll")
|
||||
local slider_page = require("example.page.slider")
|
||||
|
||||
local pages = {
|
||||
"main_page",
|
||||
"texts_page",
|
||||
"button_page",
|
||||
"scroll_page",
|
||||
"slider_page",
|
||||
}
|
||||
|
||||
local function on_control_button(self, delta)
|
||||
@@ -47,6 +49,7 @@ function init(self)
|
||||
text_page.setup_page(self)
|
||||
button_page.setup_page(self)
|
||||
scroll_page.setup_page(self)
|
||||
slider_page.setup_page(self)
|
||||
|
||||
-- Refresh state
|
||||
on_control_button(self, 0)
|
||||
|
@@ -7,6 +7,7 @@ local en = {
|
||||
texts_page = "Text page",
|
||||
button_page = "Button page",
|
||||
scroll_page = "Scroll page",
|
||||
slider_page = "Slider page",
|
||||
ui_section_button = "Button",
|
||||
ui_section_text = "Text",
|
||||
ui_section_timer = "Timer",
|
||||
@@ -23,6 +24,7 @@ local ru = {
|
||||
texts_page = "Текст",
|
||||
button_page = "Кнопки",
|
||||
scroll_page = "Скролл",
|
||||
slider_page = "Слайдеры",
|
||||
ui_section_button = "Кнопка",
|
||||
ui_section_text = "Текст",
|
||||
ui_section_timer = "Таймер",
|
||||
@@ -48,4 +50,4 @@ function M.toggle_locale()
|
||||
msg.post("/gui#main", const.ON_CHANGE_LANGUAGE)
|
||||
end
|
||||
|
||||
return M
|
||||
return M
|
||||
|
@@ -39,6 +39,15 @@ end
|
||||
function M.setup_page(self)
|
||||
self.druid:new_scroll("scroll_page_content", "scroll_page")
|
||||
self.druid:new_scroll("simple_scroll_content", "simple_scroll_input")
|
||||
|
||||
-- scroll contain scrolls:
|
||||
-- parent first
|
||||
self.druid:new_scroll("children_scroll_content", "children_scroll")
|
||||
-- chilren next
|
||||
self.druid:new_scroll("children_scroll_content_1", "children_scroll_1")
|
||||
self.druid:new_scroll("children_scroll_content_2", "children_scroll_2")
|
||||
self.druid:new_scroll("children_scroll_content_3", "children_scroll_3")
|
||||
|
||||
init_grid(self)
|
||||
end
|
||||
|
||||
|
20
example/page/slider.lua
Normal file
@@ -0,0 +1,20 @@
|
||||
local M = {}
|
||||
|
||||
|
||||
function M.setup_page(self)
|
||||
local slider = self.druid:new_slider("slider_simple_pin", vmath.vector3(95, 0, 0), function(_, value)
|
||||
gui.set_text(gui.get_node("slider_simple_text"), math.ceil(value * 100) .. "%")
|
||||
end)
|
||||
|
||||
slider:set(0.2)
|
||||
|
||||
local slider_notched = self.druid:new_slider("slider_notched_pin", vmath.vector3(95, 0, 0), function(_, value)
|
||||
gui.set_text(gui.get_node("slider_notched_text"), math.ceil(value * 100) .. "%")
|
||||
end)
|
||||
|
||||
slider_notched:set_steps({0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1})
|
||||
slider_notched:set(0.2)
|
||||
end
|
||||
|
||||
|
||||
return M
|
@@ -13,9 +13,9 @@ local pivots = {
|
||||
}
|
||||
|
||||
local function setup_texts(self)
|
||||
self.druid:new_text("text_inline", "Simple inline text")
|
||||
self.druid:new_text("text_multiline", "Simple multiline text with smth")
|
||||
local anchoring = self.druid:new_text("text_anchoring", "Anchoring")
|
||||
self.druid:new_text("text_inline")
|
||||
self.druid:new_text("text_multiline")
|
||||
local anchoring = self.druid:new_text("text_anchoring")
|
||||
self.druid:new_text("text_no_adjust", "Without adjust size", true)
|
||||
self.druid:new_lang_text("text_locale", "ui_text_example")
|
||||
|
||||
|
@@ -10,6 +10,7 @@ height = 900
|
||||
|
||||
[project]
|
||||
title = druid
|
||||
version = 0.2.0
|
||||
|
||||
[library]
|
||||
include_dirs = druid
|
||||
@@ -19,7 +20,7 @@ gamepads = /builtins/input/default.gamepadsc
|
||||
use_accelerometer = 0
|
||||
|
||||
[druid]
|
||||
autofocus = 1
|
||||
no_auto_input = 0
|
||||
|
||||
[html5]
|
||||
engine_arguments = --verify-graphics-calls=false
|
||||
|
BIN
media/blocker_scheme.png
Normal file
After Width: | Height: | Size: 8.7 KiB |
BIN
media/input_binding.png
Normal file
After Width: | Height: | Size: 22 KiB |
BIN
media/scroll_outline.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
media/scroll_scheme.png
Normal file
After Width: | Height: | Size: 21 KiB |
BIN
media/text_anchor.gif
Normal file
After Width: | Height: | Size: 59 KiB |
BIN
media/text_autosize.png
Normal file
After Width: | Height: | Size: 14 KiB |