diff --git a/docs_md/02-creating_custom_components.md b/docs_md/02-creating_custom_components.md index bdb1ea9..bc69516 100644 --- a/docs_md/02-creating_custom_components.md +++ b/docs_md/02-creating_custom_components.md @@ -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 ``` diff --git a/docs_md/creating_gui_layout.md b/docs_md/creating_gui_layout.md deleted file mode 100644 index 8b13789..0000000 --- a/docs_md/creating_gui_layout.md +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs_md/druid_editor_scripts.md b/docs_md/druid_editor_scripts.md deleted file mode 100644 index c1e9674..0000000 --- a/docs_md/druid_editor_scripts.md +++ /dev/null @@ -1,5 +0,0 @@ -# Druid Editor Scripts - -## Auto Layers setup - -## Create Druid Widget diff --git a/docs_md/widgets.md b/docs_md/widgets.md index ab5f91c..2fb3acb 100644 --- a/docs_md/widgets.md +++ b/docs_md/widgets.md @@ -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 +``` + + + + + +