mirror of
https://github.com/Insality/druid.git
synced 2025-06-27 10:27:47 +02:00
Update
This commit is contained in:
parent
b30cf9109e
commit
a2bb93a03b
@ -1,5 +1,12 @@
|
||||
# Creating Custom Components
|
||||
|
||||
# Deprecated
|
||||
Custom compomnents from 1.1 release are deprecated. Now we have a new way to create custom components - widgets.
|
||||
|
||||
Custom components are will exists for more system things like basic components. You don't have to migrate to widgets.
|
||||
|
||||
Read more about widgets in [widgets.md](widgets.md)
|
||||
|
||||
## Overview
|
||||
|
||||
Druid offers the flexibility to create custom components that contain your own logic, as well as other Druid basic components or custom components. While Druid provides a set of predefined components like buttons and scrolls, it goes beyond that and provides a way to handle all your GUI elements in a more abstract manner. Custom components are a powerful way to separate logic and create higher levels of abstraction in your code.
|
||||
@ -43,8 +50,6 @@ function init(self)
|
||||
-- We pass a GUI template "template_name" and skip nodes due it already on the scene
|
||||
self.my_component = self.druid:new(my_component, "template_name")
|
||||
self.my_component:hello() -- Hello from custom component
|
||||
|
||||
|
||||
end
|
||||
|
||||
```
|
||||
|
@ -1 +0,0 @@
|
||||
|
@ -1,5 +0,0 @@
|
||||
# Druid Editor Scripts
|
||||
|
||||
## Auto Layers setup
|
||||
|
||||
## Create Druid Widget
|
@ -1,10 +1,111 @@
|
||||
# Widgets
|
||||
|
||||
What are widgets
|
||||
What are difference from custom components
|
||||
Using Druid Widgets
|
||||
Creating your own widgets (it's a new default way to use druid!)
|
||||
Best practices
|
||||
Make reusable widgets
|
||||
Binding Widget to Game Objects
|
||||
Testing you widgets separately
|
||||
|
||||
## What is widget
|
||||
Before widget, there are a "custom components". Widgets goes to replace custom components. Basically, it's totally the same thing, only the difference to initialize it.
|
||||
|
||||
Let's see at basic custom component template:
|
||||
```lua
|
||||
local component = require("druid.component")
|
||||
|
||||
local M = component.create("my_component")
|
||||
|
||||
function M:init(template, nodes, output_string)
|
||||
self:set_template(template)
|
||||
self:set_nodes(nodes)
|
||||
self.druid = self:get_druid()
|
||||
|
||||
self.druid:new_button("button_node_name", print, output_string)
|
||||
end
|
||||
```
|
||||
|
||||
So the basic components we created with `druid:new()` function.
|
||||
|
||||
```lua
|
||||
local my_component = druid:new("my_component", template, nodes, "Hello world!")
|
||||
```
|
||||
|
||||
Now, let's see how to do it with widgets:
|
||||
```lua
|
||||
---@type my_widget: druid.widget
|
||||
local M = {}
|
||||
|
||||
function M:init(output_string)
|
||||
self.druid:new_button("button_node_name", print, output_string)
|
||||
end
|
||||
|
||||
return M
|
||||
```
|
||||
|
||||
That's all! The same thing, but no any boilerplate code, just a lua table. The druid instance, the templates and nodes are already created.
|
||||
|
||||
And you can create your own widgets like this:
|
||||
```lua
|
||||
local druid = require("druid.druid")
|
||||
local my_widget = require("widgets.my_widget.my_widget")
|
||||
|
||||
function init(self)
|
||||
self.druid = druid.new(self)
|
||||
self.my_widget = self.druid:new_widget(my_widget, template, nodes, "Hello world!")
|
||||
end
|
||||
```
|
||||
|
||||
So now the creation of "custom components" called as widgets is much easier and cleaner.
|
||||
|
||||
|
||||
## Create a new widget
|
||||
|
||||
Let's start from beginning. Widgets usually consist from 2 parts:
|
||||
1. GUI scene
|
||||
2. Widget lua module
|
||||
|
||||
Make a GUI scene of your widget (user portrait avatar panel, shop window, game panel menu, etc). Make it as you wish, but recomment to add a one `root` node with `name` `root` and make all your nodes as children of this node. This will make much easier to work with the widget.
|
||||
|
||||
Let's create a new widget by creating a new file nearby the our GUI scene file.
|
||||
|
||||
```lua
|
||||
-- my_widget.lua
|
||||
local M = {}
|
||||
|
||||
function M:init()
|
||||
self.root = self:get_node("root")
|
||||
self.button = self.druid:new_button("button_open", self.open_widget, self)
|
||||
end
|
||||
|
||||
function M:open_widget()
|
||||
print("Open widget pressed")
|
||||
end
|
||||
|
||||
return M
|
||||
```
|
||||
|
||||
that's a basic about creation. Now we have a widget, where we ask for the root node and use node "button_open" as a button.
|
||||
|
||||
Now, let's create a widget inside you game scene.
|
||||
|
||||
Place a widget (GUI template) on your main scene. Then you need to import druid and create a new widget instance over this GUI template placed on the scene.
|
||||
|
||||
```lua
|
||||
local druid = require("druid.druid")
|
||||
local my_widget = require("widgets.my_widget.my_widget")
|
||||
|
||||
function init(self)
|
||||
self.druid = druid.new(self)
|
||||
self.my_widget = self.druid:new_widget(my_widget, "my_widget")
|
||||
|
||||
-- In case we want to clone it and use several times we can pass the nodes table
|
||||
local array_of_widgets = {}
|
||||
for index = 1, 10 do
|
||||
local nodes = gui.clone_tree(self.my_widget.root)
|
||||
local widget = self.druid:new_widget(my_widget, "my_widget", nodes)
|
||||
table.insert(array_of_widgets, widget)
|
||||
end
|
||||
end
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user