Add new examples

.defignore

@@ -0,0 +1 @@
+/dist

druid/druid.atlas

@@ -0,0 +1,22 @@
+images {
+  image: "/druid/images/empty.png"
+}
+images {
+  image: "/druid/images/panels/rect_round2_width1.png"
+}
+images {
+  image: "/druid/images/panels/ui_circle_8.png"
+}
+images {
+  image: "/druid/images/panels/ui_circle_16.png"
+}
+images {
+  image: "/druid/images/panels/ui_circle_32.png"
+}
+images {
+  image: "/druid/images/panels/ui_circle_64.png"
+}
+images {
+  image: "/druid/images/pixel.png"
+}
+extrude_borders: 2

druid/fonts/text_bold.font

@@ -0,0 +1,10 @@
+font: "/druid/fonts/Roboto-Bold.ttf"
+material: "/builtins/fonts/font-df.material"
+size: 40
+outline_alpha: 1.0
+outline_width: 2.0
+shadow_alpha: 1.0
+shadow_blur: 2
+output_format: TYPE_DISTANCE_FIELD
+render_mode: MODE_MULTI_LAYER
+characters: " !\"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~\302\241\302\277\303\200\303\202\303\206\303\207\303\210\303\211\303\212\303\213\303\216\303\217\303\224\303\231\303\233\303\234\303\240\303\241\303\242\303\243\303\244\303\246\303\247\303\250\303\251\303\252\303\253\303\255\303\256\303\257\303\261\303\263\303\264\303\271\303\273\303\274\303\277\305\222\305\223\305\270\320\201\320\220\320\221\320\222\320\223\320\224\320\225\320\226\320\227\320\230\320\231\320\232\320\233\320\234\320\235\320\236\320\237\320\240\320\241\320\242\320\243\320\244\320\245\320\246\320\247\320\250\320\251\320\252\320\253\320\254\320\255\320\256\320\257\320\260\320\261\320\262\320\263\320\264\320\265\320\266\320\267\320\270\320\271\320\272\320\273\320\274\320\275\320\276\320\277\321\200\321\201\321\202\321\203\321\204\321\205\321\206\321\207\321\210\321\211\321\212\321\213\321\214\321\215\321\216\321\217\321\221\343\200\202\343\201\202\343\201\213\343\201\214\343\201\215\343\201\223\343\201\227\343\201\231\343\201\233\343\201\237\343\201\244\343\201\247\343\201\250\343\201\252\343\201\253\343\201\256\343\201\257\343\201\276\343\202\212\343\202\213\343\202\222\343\202\223\343\202\241\343\202\242\343\202\243\343\202\244\343\202\246\343\202\255\343\202\257\343\202\260\343\202\262\343\202\263\343\202\267\343\202\270\343\202\271\343\202\273\343\202\277\343\203\203\343\203\206\343\203\207\343\203\210\343\203\211\343\203\213\343\203\215\343\203\221\343\203\224\343\203\225\343\203\226\343\203\227\343\203\231\343\203\234\343\203\235\343\203\240\343\203\241\343\203\242\343\203\243\343\203\245\343\203\247\343\203\251\343\203\252\343\203\253\343\203\254\343\203\255\343\203\263\343\203\274\344\270\200\344\270\207\344\270\252\344\270\255\344\271\260\344\272\213\344\273\230\344\273\243\344\273\266\344\275\240\344\275\277\344\276\213\344\277\241\345\205\203\345\205\245\345\205\267\345\206\205\345\207\272\345\207\273\345\210\206\345\210\227\345\211\252\345\212\233\345\212\237\345\212\250\345\215\225\345\217\226\345\217\243\345\220\210\345\231\250\345\235\227\345\236\202\345\237\272\345\240\261\345\255\230\345\261\236\345\270\246\345\271\263\346\200\247\346\201\257\346\203\205\346\211\213\346\212\236\346\213\251\346\214\201\346\214\211\346\215\256\346\225\260\346\226\207\346\227\245\346\230\257\346\234\200\346\234\211\346\234\254\346\236\220\346\237\204\346\237\245\346\243\222\346\250\241\346\251\237\346\255\244\346\260\264\346\261\275\346\262\241\346\265\213\346\266\210\346\267\267\347\202\271\347\224\250\347\224\273\347\231\276\347\232\204\347\233\264\347\234\213\347\240\201\347\241\256\347\242\272\347\244\272\347\252\227\347\256\200\347\273\204\347\276\216\350\203\275\350\241\250\350\243\201\350\250\200\350\252\215\350\252\236\350\256\244\350\257\225\350\257\255\350\263\274\350\264\255\350\273\212\350\275\246\350\276\223\350\277\231\351\200\211\351\201\270\351\222\256\351\253\230\352\260\200\352\260\204\352\262\214\352\262\240\352\263\240\352\265\254\352\265\255\352\270\260\352\271\214\353\212\224\353\212\245\353\213\210\353\213\244\353\213\250\353\213\254\353\213\271\353\214\200\353\215\260\353\220\234\353\223\210\353\223\234\353\224\251\353\236\214\353\237\254\353\240\214\353\240\245\353\241\234\353\241\235\353\245\274\353\246\254\353\246\255\353\247\214\353\247\244\353\251\224\353\252\250\353\252\251\353\260\261\353\262\204\353\262\244\353\263\264\353\263\270\353\270\224\354\202\254\354\204\234\354\204\240\354\204\261\354\205\230\354\206\214\354\206\215\354\210\230\354\212\244\354\212\265\354\213\234\354\213\240\354\225\240\354\226\264\354\226\270\354\227\206\354\227\220\354\230\210\354\232\224\354\232\251\354\235\200\354\235\204\354\235\230\354\235\264\354\235\270\354\235\274\354\236\204\354\236\205\354\236\210\354\240\225\354\247\200\354\247\201\354\247\234\354\260\250\354\260\275\354\265\234\354\266\234\354\267\250\354\275\224\355\201\264\355\203\235\355\204\260\355\205\214\355\212\270\355\212\274\355\214\214\355\214\250\355\214\254\355\217\211\355\217\254\355\224\204\355\225\221\355\225\230\355\225\234\355\225\250\355\231\225\357\274\201\357\274\237"

druid/fonts/text_regular.font

@@ -0,0 +1,8 @@
+font: "/druid/fonts/Roboto-Regular.ttf"
+material: "/builtins/fonts/font-df.material"
+size: 40
+outline_alpha: 1.0
+outline_width: 2.0
+output_format: TYPE_DISTANCE_FIELD
+render_mode: MODE_MULTI_LAYER
+characters: " !\"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~\302\241\302\277\303\200\303\202\303\206\303\207\303\210\303\211\303\212\303\213\303\216\303\217\303\224\303\231\303\233\303\234\303\240\303\241\303\242\303\243\303\244\303\246\303\247\303\250\303\251\303\252\303\253\303\255\303\256\303\257\303\261\303\263\303\264\303\271\303\273\303\274\303\277\305\222\305\223\305\270\320\201\320\220\320\221\320\222\320\223\320\224\320\225\320\226\320\227\320\230\320\231\320\232\320\233\320\234\320\235\320\236\320\237\320\240\320\241\320\242\320\243\320\244\320\245\320\246\320\247\320\250\320\251\320\252\320\253\320\254\320\255\320\256\320\257\320\260\320\261\320\262\320\263\320\264\320\265\320\266\320\267\320\270\320\271\320\272\320\273\320\274\320\275\320\276\320\277\321\200\321\201\321\202\321\203\321\204\321\205\321\206\321\207\321\210\321\211\321\212\321\213\321\214\321\215\321\216\321\217\321\221\343\200\202\343\201\202\343\201\213\343\201\214\343\201\215\343\201\223\343\201\227\343\201\231\343\201\233\343\201\237\343\201\244\343\201\247\343\201\250\343\201\252\343\201\253\343\201\256\343\201\257\343\201\276\343\202\212\343\202\213\343\202\222\343\202\223\343\202\241\343\202\242\343\202\243\343\202\244\343\202\246\343\202\255\343\202\257\343\202\260\343\202\262\343\202\263\343\202\267\343\202\270\343\202\271\343\202\273\343\202\277\343\203\203\343\203\206\343\203\207\343\203\210\343\203\211\343\203\213\343\203\215\343\203\221\343\203\224\343\203\225\343\203\226\343\203\227\343\203\231\343\203\234\343\203\235\343\203\240\343\203\241\343\203\242\343\203\243\343\203\245\343\203\247\343\203\251\343\203\252\343\203\253\343\203\254\343\203\255\343\203\263\343\203\274\344\270\200\344\270\207\344\270\252\344\270\255\344\271\260\344\272\213\344\273\230\344\273\243\344\273\266\344\275\240\344\275\277\344\276\213\344\277\241\345\205\203\345\205\245\345\205\267\345\206\205\345\207\272\345\207\273\345\210\206\345\210\227\345\211\252\345\212\233\345\212\237\345\212\250\345\215\225\345\217\226\345\217\243\345\220\210\345\231\250\345\235\227\345\236\202\345\237\272\345\240\261\345\255\230\345\261\236\345\270\246\345\271\263\346\200\247\346\201\257\346\203\205\346\211\213\346\212\236\346\213\251\346\214\201\346\214\211\346\215\256\346\225\260\346\226\207\346\227\245\346\230\257\346\234\200\346\234\211\346\234\254\346\236\220\346\237\204\346\237\245\346\243\222\346\250\241\346\251\237\346\255\244\346\260\264\346\261\275\346\262\241\346\265\213\346\266\210\346\267\267\347\202\271\347\224\250\347\224\273\347\231\276\347\232\204\347\233\264\347\234\213\347\240\201\347\241\256\347\242\272\347\244\272\347\252\227\347\256\200\347\273\204\347\276\216\350\203\275\350\241\250\350\243\201\350\250\200\350\252\215\350\252\236\350\256\244\350\257\225\350\257\255\350\263\274\350\264\255\350\273\212\350\275\246\350\276\223\350\277\231\351\200\211\351\201\270\351\222\256\351\253\230\352\260\200\352\260\204\352\262\214\352\262\240\352\263\240\352\265\254\352\265\255\352\270\260\352\271\214\353\212\224\353\212\245\353\213\210\353\213\244\353\213\250\353\213\254\353\213\271\353\214\200\353\215\260\353\220\234\353\223\210\353\223\234\353\224\251\353\236\214\353\237\254\353\240\214\353\240\245\353\241\234\353\241\235\353\245\274\353\246\254\353\246\255\353\247\214\353\247\244\353\251\224\353\252\250\353\252\251\353\260\261\353\262\204\353\262\244\353\263\264\353\263\270\353\270\224\354\202\254\354\204\234\354\204\240\354\204\261\354\205\230\354\206\214\354\206\215\354\210\230\354\212\244\354\212\265\354\213\234\354\213\240\354\225\240\354\226\264\354\226\270\354\227\206\354\227\220\354\230\210\354\232\224\354\232\251\354\235\200\354\235\204\354\235\230\354\235\264\354\235\270\354\235\274\354\236\204\354\236\205\354\236\210\354\240\225\354\247\200\354\247\201\354\247\234\354\260\250\354\260\275\354\265\234\354\266\234\354\267\250\354\275\224\355\201\264\355\203\235\355\204\260\355\205\214\355\212\270\355\212\274\355\214\214\355\214\250\355\214\254\355\217\211\355\217\254\355\224\204\355\225\221\355\225\230\355\225\234\355\225\250\355\231\225\357\274\201\357\274\237"

example/examples/basic/checkbox/checkbox.gui

@@ -0,0 +1,77 @@
+fonts {
+  name: "text_bold"
+  font: "/example/assets/fonts/text_bold.font"
+}
+textures {
+  name: "druid"
+  texture: "/example/assets/druid.atlas"
+}
+nodes {
+  size {
+    x: 70.0
+    y: 70.0
+  }
+  type: TYPE_BOX
+  id: "root"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+  visible: false
+}
+nodes {
+  size {
+    x: 40.0
+    y: 40.0
+  }
+  color {
+    x: 0.463
+    y: 0.475
+    z: 0.49
+  }
+  type: TYPE_BOX
+  texture: "druid/rect_round2_width1"
+  id: "button"
+  parent: "root"
+  inherit_alpha: true
+  slice9 {
+    x: 4.0
+    y: 4.0
+    z: 4.0
+    w: 4.0
+  }
+}
+nodes {
+  color {
+    x: 0.722
+    y: 0.741
+    z: 0.761
+  }
+  type: TYPE_BOX
+  texture: "druid/icon_check"
+  id: "icon"
+  parent: "button"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    y: -20.0
+  }
+  size {
+    x: 40.0
+    y: 4.0
+  }
+  color {
+    x: 0.894
+    y: 0.506
+    z: 0.333
+  }
+  type: TYPE_BOX
+  texture: "druid/pixel"
+  id: "selected"
+  pivot: PIVOT_S
+  adjust_mode: ADJUST_MODE_STRETCH
+  parent: "button"
+  inherit_alpha: true
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT

example/examples/basic/checkbox/checkbox.lua

@@ -0,0 +1,50 @@
+local component = require("druid.component")
+local event = require("druid.event")
+
+---@class checkbox: druid.base_component
+---@field druid druid_instance
+---@field button druid.button
+local M = component.create("checkbox")
+
+
+---@param template string
+---@param nodes table<hash, node>
+function M:init(template, nodes)
+	self.druid = self:get_druid(template, nodes)
+
+	self.button = self.druid:new_button("root", self.on_checkbox_click) -- Button to handle checkbox
+	self.icon = self:get_node("icon") -- Checkbox icon to hide/show
+	self.selected = self:get_node("selected") -- Selected effect to show when checkbox is changed
+	gui.set_alpha(self.selected, 0)
+
+	self:set_state(false)
+
+	self.on_state_changed = event.create()
+end
+
+
+function M:on_checkbox_click()
+	self:set_state(not self.is_enabled)
+	self.on_state_changed:trigger(self.is_enabled)
+end
+
+
+function M:set_state(is_enabled)
+	if self.is_enabled == is_enabled then
+		return
+	end
+
+	self.is_enabled = is_enabled
+	gui.set_enabled(self.icon, self.is_enabled)
+
+	gui.set_alpha(self.selected, 1)
+	gui.animate(self.selected, "color.w", 0, gui.EASING_INSINE, 0.16)
+end
+
+
+function M:get_state()
+	return self.is_enabled
+end
+
+
+return M

example/examples/basic/checkbox_group/checkbox_group.gui

@@ -0,0 +1,120 @@
+fonts {
+  name: "text_bold"
+  font: "/example/assets/fonts/text_bold.font"
+}
+textures {
+  name: "druid"
+  texture: "/example/assets/druid.atlas"
+}
+nodes {
+  size {
+    x: 200.0
+    y: 100.0
+  }
+  type: TYPE_BOX
+  id: "root"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+  visible: false
+}
+nodes {
+  position {
+    x: -100.0
+  }
+  type: TYPE_TEMPLATE
+  id: "checkbox_1"
+  parent: "root"
+  inherit_alpha: true
+  template: "/example/examples/basic/checkbox/checkbox.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_1/root"
+  parent: "checkbox_1"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_1/button"
+  parent: "checkbox_1/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_1/icon"
+  parent: "checkbox_1/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_1/selected"
+  parent: "checkbox_1/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "checkbox_2"
+  parent: "root"
+  inherit_alpha: true
+  template: "/example/examples/basic/checkbox/checkbox.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_2/root"
+  parent: "checkbox_2"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_2/button"
+  parent: "checkbox_2/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_2/icon"
+  parent: "checkbox_2/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_2/selected"
+  parent: "checkbox_2/button"
+  template_node_child: true
+}
+nodes {
+  position {
+    x: 100.0
+  }
+  type: TYPE_TEMPLATE
+  id: "checkbox_3"
+  parent: "root"
+  inherit_alpha: true
+  template: "/example/examples/basic/checkbox/checkbox.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_3/root"
+  parent: "checkbox_3"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_3/button"
+  parent: "checkbox_3/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_3/icon"
+  parent: "checkbox_3/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_3/selected"
+  parent: "checkbox_3/button"
+  template_node_child: true
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT

example/examples/basic/checkbox_group/checkbox_group.lua

@@ -0,0 +1,39 @@
+local event = require("druid.event")
+local component = require("druid.component")
+
+-- Require checkbox component from checkbox example
+local checkbox = require("example.examples.basic.checkbox.checkbox")
+
+---@class checkbox_group: druid.base_component
+---@field druid druid_instance
+---@field button druid.button
+local M = component.create("checkbox_group")
+
+
+---@param template string
+---@param nodes table<hash, node>
+function M:init(template, nodes)
+	self.druid = self:get_druid(template, nodes)
+
+	self.checkbox_1 = self.druid:new(checkbox, "checkbox_1")
+	self.checkbox_2 = self.druid:new(checkbox, "checkbox_2")
+	self.checkbox_3 = self.druid:new(checkbox, "checkbox_3")
+
+	self.checkbox_1.on_state_changed:subscribe(self.on_checkbox_click, self)
+	self.checkbox_2.on_state_changed:subscribe(self.on_checkbox_click, self)
+	self.checkbox_3.on_state_changed:subscribe(self.on_checkbox_click, self)
+
+	self.on_state_changed = event.create()
+end
+
+
+function M:on_checkbox_click()
+	print("Checkbox 1: ", self.checkbox_1:get_state())
+	print("Checkbox 2: ", self.checkbox_2:get_state())
+	print("Checkbox 3: ", self.checkbox_3:get_state())
+
+	self.on_state_changed:trigger(self.checkbox_1:get_state(), self.checkbox_2:get_state(), self.checkbox_3:get_state())
+end
+
+
+return M