Update example with new brand one

example/examples/gamepad/examples_list.lua

@@ -0,0 +1,72 @@
+local M = {}
+
+---@return druid.example.data[]
+function M.get_examples()
+	---@type druid.example.data[]
+	return {
+		{
+			name_id = "ui_example_gamepad_tester",
+			information_text_id = "ui_example_gamepad_tester_description",
+			template = "gamepad_tester",
+			root = "gamepad_tester/root",
+			code_url = "example/examples/gamepad/gamepad_tester/gamepad_tester.lua",
+			component_class = require("example.examples.gamepad.gamepad_tester.gamepad_tester"),
+			on_create = function(instance, output_list)
+				---@cast instance gamepad_tester
+				instance.button_left.on_click:subscribe(function()
+					output_list:add_log_text("Button Left Clicked")
+				end)
+				instance.button_right.on_click:subscribe(function()
+					output_list:add_log_text("Button Right Clicked")
+				end)
+				instance.button_up.on_click:subscribe(function()
+					output_list:add_log_text("Button Up Clicked")
+				end)
+				instance.button_down.on_click:subscribe(function()
+					output_list:add_log_text("Button Down Clicked")
+				end)
+				instance.button_a.on_click:subscribe(function()
+					output_list:add_log_text("Button A Clicked")
+				end)
+				instance.button_b.on_click:subscribe(function()
+					output_list:add_log_text("Button B Clicked")
+				end)
+				instance.button_x.on_click:subscribe(function()
+					output_list:add_log_text("Button X Clicked")
+				end)
+				instance.button_y.on_click:subscribe(function()
+					output_list:add_log_text("Button Y Clicked")
+				end)
+				instance.button_back.on_click:subscribe(function()
+					output_list:add_log_text("Button Back Clicked")
+				end)
+				instance.button_start.on_click:subscribe(function()
+					output_list:add_log_text("Button Start Clicked")
+				end)
+				instance.button_l1.on_click:subscribe(function()
+					output_list:add_log_text("Button L1 Clicked")
+				end)
+				instance.button_r1.on_click:subscribe(function()
+					output_list:add_log_text("Button R1 Clicked")
+				end)
+				instance.button_stick_left.on_click:subscribe(function()
+					output_list:add_log_text("Button Stick Left Clicked")
+				end)
+				instance.button_stick_right.on_click:subscribe(function()
+					output_list:add_log_text("Button Stick Right Clicked")
+				end)
+			end,
+		},
+
+		{
+			name_id = "ui_example_on_screen_control",
+			information_text_id = "ui_example_on_screen_control_description",
+			template = "on_screen_control",
+			root = "on_screen_control/root",
+			code_url = "example/examples/gamepad/on_screen_control/on_screen_control.lua",
+			component_class = require("example.examples.gamepad.on_screen_control.on_screen_control"),
+		}
+	}
+end
+
+return M

example/examples/gamepad/gamepad_tester/gamepad_tester.gui

@@ -0,0 +1,725 @@
+textures {
+  name: "druid"
+  texture: "/example/assets/druid.atlas"
+}
+nodes {
+  size {
+    x: 1000.0
+    y: 1000.0
+  }
+  type: TYPE_BOX
+  texture: "druid/empty"
+  id: "root"
+  inherit_alpha: true
+  visible: false
+}
+nodes {
+  size {
+    x: 200.0
+    y: 100.0
+  }
+  type: TYPE_BOX
+  texture: "druid/empty"
+  id: "gamepad"
+  parent: "root"
+  inherit_alpha: true
+  visible: false
+}
+nodes {
+  position {
+    x: -200.0
+    y: -300.0
+  }
+  type: TYPE_TEMPLATE
+  id: "stick_left"
+  parent: "gamepad"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_stick.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_left/root"
+  parent: "stick_left"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_PIE
+  id: "stick_left/background_mask"
+  parent: "stick_left/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_left/background"
+  parent: "stick_left/background_mask"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_left/stick_root"
+  parent: "stick_left/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_left/stick_shadow"
+  parent: "stick_left/stick_root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_left/stick"
+  parent: "stick_left/stick_root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_left/dot_1"
+  parent: "stick_left/stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_left/dot_2"
+  parent: "stick_left/stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_left/dot_3"
+  parent: "stick_left/stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_left/dot_4"
+  parent: "stick_left/stick"
+  template_node_child: true
+}
+nodes {
+  position {
+    x: 200.0
+    y: -300.0
+  }
+  type: TYPE_TEMPLATE
+  id: "stick_right"
+  parent: "gamepad"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_stick.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_right/root"
+  parent: "stick_right"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_PIE
+  id: "stick_right/background_mask"
+  parent: "stick_right/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_right/background"
+  parent: "stick_right/background_mask"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_right/stick_root"
+  parent: "stick_right/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_right/stick_shadow"
+  parent: "stick_right/stick_root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_right/stick"
+  parent: "stick_right/stick_root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_right/dot_1"
+  parent: "stick_right/stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_right/dot_2"
+  parent: "stick_right/stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_right/dot_3"
+  parent: "stick_right/stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "stick_right/dot_4"
+  parent: "stick_right/stick"
+  template_node_child: true
+}
+nodes {
+  position {
+    x: -330.0
+    y: 24.0
+  }
+  size {
+    x: 290.0
+    y: 290.0
+  }
+  type: TYPE_BOX
+  texture: "druid/empty"
+  id: "dpad"
+  parent: "gamepad"
+  inherit_alpha: true
+  visible: false
+}
+nodes {
+  position {
+    x: -100.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_left"
+  parent: "dpad"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_left/button"
+  parent: "button_left"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "button_left/text"
+  parent: "button_left/button"
+  overridden_fields: 45
+  overridden_fields: 46
+  template_node_child: true
+  enabled: false
+  visible: false
+}
+nodes {
+  rotation {
+    z: 180.0
+  }
+  type: TYPE_BOX
+  id: "button_left/icon"
+  parent: "button_left/button"
+  overridden_fields: 2
+  template_node_child: true
+}
+nodes {
+  position {
+    y: 100.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_up"
+  parent: "dpad"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_up/button"
+  parent: "button_up"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "button_up/text"
+  parent: "button_up/button"
+  overridden_fields: 45
+  overridden_fields: 46
+  template_node_child: true
+  enabled: false
+  visible: false
+}
+nodes {
+  rotation {
+    z: 90.0
+  }
+  type: TYPE_BOX
+  id: "button_up/icon"
+  parent: "button_up/button"
+  overridden_fields: 2
+  template_node_child: true
+}
+nodes {
+  position {
+    x: 100.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_right"
+  parent: "dpad"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_right/button"
+  parent: "button_right"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "button_right/text"
+  parent: "button_right/button"
+  overridden_fields: 45
+  overridden_fields: 46
+  template_node_child: true
+  enabled: false
+  visible: false
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_right/icon"
+  parent: "button_right/button"
+  template_node_child: true
+}
+nodes {
+  position {
+    y: -100.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_down"
+  parent: "dpad"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_down/button"
+  parent: "button_down"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "button_down/text"
+  parent: "button_down/button"
+  overridden_fields: 45
+  overridden_fields: 46
+  template_node_child: true
+  enabled: false
+  visible: false
+}
+nodes {
+  rotation {
+    z: -90.0
+  }
+  type: TYPE_BOX
+  id: "button_down/icon"
+  parent: "button_down/button"
+  overridden_fields: 2
+  template_node_child: true
+}
+nodes {
+  position {
+    x: 330.0
+    y: 24.0
+  }
+  size {
+    x: 290.0
+    y: 290.0
+  }
+  type: TYPE_BOX
+  texture: "druid/empty"
+  id: "buttons"
+  parent: "gamepad"
+  inherit_alpha: true
+  visible: false
+}
+nodes {
+  position {
+    x: -100.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_x"
+  parent: "buttons"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_x/button"
+  parent: "button_x"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "button_x/text"
+  parent: "button_x/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_x/icon"
+  parent: "button_x/button"
+  overridden_fields: 45
+  template_node_child: true
+  enabled: false
+}
+nodes {
+  position {
+    y: 100.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_y"
+  parent: "buttons"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_y/button"
+  parent: "button_y"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  text: "Y"
+  id: "button_y/text"
+  parent: "button_y/button"
+  overridden_fields: 8
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_y/icon"
+  parent: "button_y/button"
+  overridden_fields: 45
+  template_node_child: true
+  enabled: false
+}
+nodes {
+  position {
+    x: 100.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_b"
+  parent: "buttons"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_b/button"
+  parent: "button_b"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  text: "B"
+  id: "button_b/text"
+  parent: "button_b/button"
+  overridden_fields: 8
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_b/icon"
+  parent: "button_b/button"
+  overridden_fields: 45
+  template_node_child: true
+  enabled: false
+}
+nodes {
+  position {
+    y: -100.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_a"
+  parent: "buttons"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_a/button"
+  parent: "button_a"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  text: "A"
+  id: "button_a/text"
+  parent: "button_a/button"
+  overridden_fields: 8
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_a/icon"
+  parent: "button_a/button"
+  overridden_fields: 45
+  template_node_child: true
+  enabled: false
+}
+nodes {
+  position {
+    y: 160.0
+  }
+  size {
+    x: 290.0
+    y: 290.0
+  }
+  type: TYPE_BOX
+  texture: "druid/empty"
+  id: "buttons_system"
+  parent: "gamepad"
+  inherit_alpha: true
+  visible: false
+}
+nodes {
+  position {
+    x: -110.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_back"
+  parent: "buttons_system"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui"
+}
+nodes {
+  size {
+    x: 180.0
+    y: 90.0
+  }
+  type: TYPE_BOX
+  id: "button_back/button"
+  parent: "button_back"
+  overridden_fields: 4
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  text: "Back"
+  id: "button_back/text"
+  parent: "button_back/button"
+  overridden_fields: 8
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_back/icon"
+  parent: "button_back/button"
+  overridden_fields: 45
+  template_node_child: true
+  enabled: false
+}
+nodes {
+  position {
+    x: 110.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_start"
+  parent: "buttons_system"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui"
+}
+nodes {
+  size {
+    x: 180.0
+    y: 90.0
+  }
+  type: TYPE_BOX
+  id: "button_start/button"
+  parent: "button_start"
+  overridden_fields: 4
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  text: "Start"
+  id: "button_start/text"
+  parent: "button_start/button"
+  overridden_fields: 8
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_start/icon"
+  parent: "button_start/button"
+  overridden_fields: 45
+  template_node_child: true
+  enabled: false
+}
+nodes {
+  position {
+    x: -330.0
+    y: 360.0
+  }
+  size {
+    x: 200.0
+    y: 200.0
+  }
+  type: TYPE_BOX
+  texture: "druid/empty"
+  id: "button_left_bump"
+  parent: "gamepad"
+  inherit_alpha: true
+  visible: false
+}
+nodes {
+  position {
+    x: -3.0
+    y: -57.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_l1"
+  parent: "button_left_bump"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui"
+}
+nodes {
+  size {
+    x: 180.0
+    y: 90.0
+  }
+  type: TYPE_BOX
+  id: "button_l1/button"
+  parent: "button_l1"
+  overridden_fields: 4
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  text: "L1"
+  id: "button_l1/text"
+  parent: "button_l1/button"
+  overridden_fields: 8
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_l1/icon"
+  parent: "button_l1/button"
+  overridden_fields: 45
+  template_node_child: true
+  enabled: false
+}
+nodes {
+  position {
+    y: 60.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_l2"
+  parent: "button_left_bump"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_trigger.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_l2/button"
+  parent: "button_l2"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_l2/fill"
+  parent: "button_l2/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  text: "L2"
+  id: "button_l2/text"
+  parent: "button_l2/button"
+  overridden_fields: 8
+  template_node_child: true
+}
+nodes {
+  position {
+    x: 330.0
+    y: 360.0
+  }
+  size {
+    x: 200.0
+    y: 200.0
+  }
+  type: TYPE_BOX
+  texture: "druid/empty"
+  id: "button_right_bump"
+  parent: "gamepad"
+  inherit_alpha: true
+  visible: false
+}
+nodes {
+  position {
+    y: -60.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_r1"
+  parent: "button_right_bump"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui"
+}
+nodes {
+  size {
+    x: 180.0
+    y: 90.0
+  }
+  type: TYPE_BOX
+  id: "button_r1/button"
+  parent: "button_r1"
+  overridden_fields: 4
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  text: "R1"
+  id: "button_r1/text"
+  parent: "button_r1/button"
+  overridden_fields: 8
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_r1/icon"
+  parent: "button_r1/button"
+  overridden_fields: 45
+  template_node_child: true
+  enabled: false
+}
+nodes {
+  position {
+    y: 60.0
+  }
+  type: TYPE_TEMPLATE
+  id: "button_r2"
+  parent: "button_right_bump"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_trigger.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_r2/button"
+  parent: "button_r2"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_r2/fill"
+  parent: "button_r2/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  text: "R2"
+  id: "button_r2/text"
+  parent: "button_r2/button"
+  overridden_fields: 8
+  template_node_child: true
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT

example/examples/gamepad/gamepad_tester/gamepad_tester.lua

@@ -0,0 +1,87 @@
+local component = require("druid.component")
+local progress = require("druid.extended.progress")
+
+---@class gamepad_tester: druid.base_component
+---@field root node
+---@field buttons druid.button
+---@field buttons_system druid.button
+---@field button_left_bump druid.button
+---@field button_right_bump druid.button
+---@field druid druid_instance
+local M = component.create("gamepad_tester")
+
+local STICK_DISTANCE = 50
+
+---@param template string
+---@param nodes table<hash, node>
+function M:init(template, nodes)
+	self.druid = self:get_druid(template, nodes)
+
+	self.root = self:get_node("root")
+
+	self.button_left = self.druid:new_button("button_left/button"):set_key_trigger("gamepad_lpad_left")
+	self.button_right = self.druid:new_button("button_right/button"):set_key_trigger("gamepad_lpad_right")
+	self.button_up = self.druid:new_button("button_up/button"):set_key_trigger("gamepad_lpad_up")
+	self.button_down = self.druid:new_button("button_down/button"):set_key_trigger("gamepad_lpad_down")
+
+	self.button_x = self.druid:new_button("button_x/button"):set_key_trigger("gamepad_rpad_left")
+	self.button_b = self.druid:new_button("button_b/button"):set_key_trigger("gamepad_rpad_right")
+	self.button_y = self.druid:new_button("button_y/button"):set_key_trigger("gamepad_rpad_up")
+	self.button_a = self.druid:new_button("button_a/button"):set_key_trigger("gamepad_rpad_down")
+
+	self.button_l1 = self.druid:new_button("button_l1/button"):set_key_trigger("gamepad_lshoulder")
+	self.button_r1 = self.druid:new_button("button_r1/button"):set_key_trigger("gamepad_rshoulder")
+
+	self.button_stick_left = self.druid:new_button("stick_left/root"):set_key_trigger("gamepad_lstick_click")
+	self.button_stick_right = self.druid:new_button("stick_right/root"):set_key_trigger("gamepad_rstick_click")
+
+	self.button_start = self.druid:new_button("button_start/button"):set_key_trigger("gamepad_start")
+	self.button_back = self.druid:new_button("button_back/button"):set_key_trigger("gamepad_back")
+
+	self.trigger_l2 = self.druid:new(progress, "button_l2/fill", "x", 0) --[[@as druid.progress]]
+	self.trigger_r2 = self.druid:new(progress, "button_r2/fill", "x", 0) --[[@as druid.progress]]
+
+	self.stick_left = self:get_node("stick_left/stick_root")
+	self.stick_right = self:get_node("stick_right/stick_root")
+end
+
+
+function M:on_input(action_id, action)
+	if action_id == hash("gamepad_ltrigger") then
+		self.trigger_l2:set_to(action.value)
+	end
+	if action_id == hash("gamepad_rtrigger") then
+		self.trigger_r2:set_to(action.value)
+	end
+
+	-- Left Stick
+	if action_id == hash("gamepad_lstick_left") then
+		gui.set(self.stick_left, "position.x", -action.value * STICK_DISTANCE)
+	end
+	if action_id == hash("gamepad_lstick_right") then
+		gui.set(self.stick_left, "position.x", action.value * STICK_DISTANCE)
+	end
+	if action_id == hash("gamepad_lstick_up") then
+		gui.set(self.stick_left, "position.y", action.value * STICK_DISTANCE)
+	end
+	if action_id == hash("gamepad_lstick_down") then
+		gui.set(self.stick_left, "position.y", -action.value * STICK_DISTANCE)
+	end
+
+	-- Right Stick
+	if action_id == hash("gamepad_rstick_left") then
+		gui.set(self.stick_right, "position.x", -action.value * STICK_DISTANCE)
+	end
+	if action_id == hash("gamepad_rstick_right") then
+		gui.set(self.stick_right, "position.x", action.value * STICK_DISTANCE)
+	end
+	if action_id == hash("gamepad_rstick_up") then
+		gui.set(self.stick_right, "position.y", action.value * STICK_DISTANCE)
+	end
+	if action_id == hash("gamepad_rstick_down") then
+		gui.set(self.stick_right, "position.y", -action.value * STICK_DISTANCE)
+	end
+end
+
+
+return M

example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui

@@ -0,0 +1,202 @@
+script: ""
+fonts {
+  name: "text_bold"
+  font: "/example/assets/fonts/text_bold.font"
+}
+textures {
+  name: "druid"
+  texture: "/example/assets/druid.atlas"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 90.0
+    y: 90.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.31
+    y: 0.318
+    z: 0.322
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: "druid/ui_circle_32"
+  id: "button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+  enabled: true
+  visible: true
+  material: ""
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.5
+    y: 1.5
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 40.0
+    y: 40.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.941
+    y: 0.984
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "X"
+  font: "text_bold"
+  id: "text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "button"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+  material: ""
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.941
+    y: 0.984
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: "druid/icon_arrow"
+  id: "icon"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "button"
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+  custom_type: 0
+  enabled: true
+  visible: true
+  material: ""
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/examples/gamepad/gamepad_tester/templates/gamepad_stick.gui

@@ -0,0 +1,191 @@
+fonts {
+  name: "text_bold"
+  font: "/example/assets/fonts/text_bold.font"
+}
+textures {
+  name: "druid"
+  texture: "/example/assets/druid.atlas"
+}
+nodes {
+  size {
+    x: 12.0
+    y: 12.0
+  }
+  color {
+    x: 0.31
+    y: 0.318
+    z: 0.322
+  }
+  type: TYPE_BOX
+  texture: "druid/empty"
+  id: "root"
+  inherit_alpha: true
+}
+nodes {
+  size {
+    x: 256.0
+    y: 256.0
+  }
+  type: TYPE_PIE
+  id: "background_mask"
+  parent: "root"
+  inherit_alpha: true
+  perimeterVertices: 64
+  clipping_mode: CLIPPING_MODE_STENCIL
+  clipping_visible: false
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  size {
+    x: 256.0
+    y: 256.0
+  }
+  color {
+    x: 0.31
+    y: 0.318
+    z: 0.322
+  }
+  type: TYPE_BOX
+  texture: "druid/pixel"
+  id: "background"
+  parent: "background_mask"
+  inherit_alpha: true
+  slice9 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+}
+nodes {
+  type: TYPE_BOX
+  texture: "druid/empty"
+  id: "stick_root"
+  parent: "root"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+  visible: false
+}
+nodes {
+  scale {
+    x: 2.0
+    y: 2.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  type: TYPE_BOX
+  texture: "druid/ui_circle_64_blur_8"
+  id: "stick_shadow"
+  parent: "stick_root"
+  inherit_alpha: true
+  alpha: 0.25
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  scale {
+    x: 2.0
+    y: 2.0
+  }
+  color {
+    x: 0.463
+    y: 0.475
+    z: 0.49
+  }
+  type: TYPE_BOX
+  texture: "druid/ui_circle_64"
+  id: "stick"
+  parent: "stick_root"
+  inherit_alpha: true
+  slice9 {
+    x: 32.0
+    y: 32.0
+    z: 32.0
+    w: 32.0
+  }
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: -22.0
+  }
+  scale {
+    x: 0.5
+    y: 0.5
+  }
+  color {
+    x: 0.31
+    y: 0.318
+    z: 0.322
+  }
+  type: TYPE_BOX
+  texture: "druid/ui_circle_16"
+  id: "dot_1"
+  parent: "stick"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    y: 22.0
+  }
+  scale {
+    x: 0.5
+    y: 0.5
+  }
+  color {
+    x: 0.31
+    y: 0.318
+    z: 0.322
+  }
+  type: TYPE_BOX
+  texture: "druid/ui_circle_16"
+  id: "dot_2"
+  parent: "stick"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: 22.0
+  }
+  scale {
+    x: 0.5
+    y: 0.5
+  }
+  color {
+    x: 0.31
+    y: 0.318
+    z: 0.322
+  }
+  type: TYPE_BOX
+  texture: "druid/ui_circle_16"
+  id: "dot_3"
+  parent: "stick"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    y: -22.0
+  }
+  scale {
+    x: 0.5
+    y: 0.5
+  }
+  color {
+    x: 0.31
+    y: 0.318
+    z: 0.322
+  }
+  type: TYPE_BOX
+  texture: "druid/ui_circle_16"
+  id: "dot_4"
+  parent: "stick"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT

example/examples/gamepad/gamepad_tester/templates/gamepad_trigger.gui

@@ -0,0 +1,202 @@
+script: ""
+fonts {
+  name: "text_bold"
+  font: "/example/assets/fonts/text_bold.font"
+}
+textures {
+  name: "druid"
+  texture: "/example/assets/druid.atlas"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 180.0
+    y: 90.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.31
+    y: 0.318
+    z: 0.322
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: "druid/ui_circle_32"
+  id: "button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+  enabled: true
+  visible: true
+  material: ""
+}
+nodes {
+  position {
+    x: -90.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 180.0
+    y: 90.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.631
+    y: 0.843
+    z: 0.961
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: "druid/ui_circle_32"
+  id: "fill"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_W
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "button"
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+  enabled: true
+  visible: true
+  material: ""
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.5
+    y: 1.5
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 40.0
+    y: 40.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.941
+    y: 0.984
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "X"
+  font: "text_bold"
+  id: "text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "button"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+  material: ""
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/examples/gamepad/on_screen_control/on_screen_control.gui

@@ -0,0 +1,227 @@
+textures {
+  name: "druid"
+  texture: "/example/assets/druid.atlas"
+}
+nodes {
+  size {
+    x: 1000.0
+    y: 1000.0
+  }
+  color {
+    x: 0.173
+    y: 0.184
+    z: 0.204
+  }
+  type: TYPE_BOX
+  texture: "druid/ui_circle_64"
+  id: "root"
+  inherit_alpha: true
+  slice9 {
+    x: 32.0
+    y: 32.0
+    z: 32.0
+    w: 32.0
+  }
+}
+nodes {
+  size {
+    x: 128.0
+    y: 128.0
+  }
+  color {
+    x: 0.902
+    y: 0.875
+    z: 0.624
+  }
+  type: TYPE_BOX
+  texture: "druid/ui_circle_64"
+  id: "character"
+  parent: "root"
+  inherit_alpha: true
+  slice9 {
+    x: 32.0
+    y: 32.0
+    z: 32.0
+    w: 32.0
+  }
+}
+nodes {
+  position {
+    x: -25.0
+    y: 21.0
+  }
+  color {
+    x: 0.129
+    y: 0.141
+    z: 0.157
+  }
+  type: TYPE_BOX
+  texture: "druid/ui_circle_32"
+  id: "eye_left"
+  parent: "character"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: -8.0
+    y: 8.0
+  }
+  color {
+    x: 0.941
+    y: 0.984
+  }
+  type: TYPE_BOX
+  texture: "druid/ui_circle_8"
+  id: "eye_left_blick"
+  parent: "eye_left"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: 25.0
+    y: 21.0
+  }
+  color {
+    x: 0.129
+    y: 0.141
+    z: 0.157
+  }
+  type: TYPE_BOX
+  texture: "druid/ui_circle_32"
+  id: "eye_right"
+  parent: "character"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: -8.0
+    y: 8.0
+  }
+  color {
+    x: 0.941
+    y: 0.984
+  }
+  type: TYPE_BOX
+  texture: "druid/ui_circle_8"
+  id: "eye_right_blick"
+  parent: "eye_right"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    y: -300.0
+  }
+  type: TYPE_TEMPLATE
+  id: "on_screen_input"
+  parent: "root"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/on_screen_control/on_screen_input.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_input/root"
+  parent: "on_screen_input"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "on_screen_input/on_screen_stick"
+  parent: "on_screen_input/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_input/on_screen_stick/root"
+  parent: "on_screen_input/on_screen_stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_PIE
+  id: "on_screen_input/on_screen_stick/background_mask"
+  parent: "on_screen_input/on_screen_stick/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_input/on_screen_stick/background"
+  parent: "on_screen_input/on_screen_stick/background_mask"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_input/on_screen_stick/stick_root"
+  parent: "on_screen_input/on_screen_stick/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_input/on_screen_stick/stick_shadow"
+  parent: "on_screen_input/on_screen_stick/stick_root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_input/on_screen_stick/stick"
+  parent: "on_screen_input/on_screen_stick/stick_root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_input/on_screen_stick/dot_1"
+  parent: "on_screen_input/on_screen_stick/stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_input/on_screen_stick/dot_2"
+  parent: "on_screen_input/on_screen_stick/stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_input/on_screen_stick/dot_3"
+  parent: "on_screen_input/on_screen_stick/stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_input/on_screen_stick/dot_4"
+  parent: "on_screen_input/on_screen_stick/stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_input/on_screen_button"
+  parent: "on_screen_input/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "on_screen_input/button_action"
+  parent: "on_screen_input/on_screen_button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_input/button_action/button"
+  parent: "on_screen_input/button_action"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "on_screen_input/button_action/text"
+  parent: "on_screen_input/button_action/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_input/button_action/icon"
+  parent: "on_screen_input/button_action/button"
+  template_node_child: true
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT

example/examples/gamepad/on_screen_control/on_screen_control.lua

@@ -0,0 +1,59 @@
+local component = require("druid.component")
+local on_screen_input = require("example.examples.gamepad.on_screen_control.on_screen_input")
+
+---@class on_screen_control: druid.base_component
+---@field druid druid_instance
+---@field on_screen_input on_screen_input
+local M = component.create("on_screen_control")
+
+local CHARACTER_SPEED = 700
+
+---@param template string
+---@param nodes table<hash, node>
+function M:init(template, nodes)
+	self.druid = self:get_druid(template, nodes)
+
+	self.character = self:get_node("character")
+	self.character_position = gui.get_position(self.character)
+
+	self.character_eye_left = self:get_node("eye_left")
+	self.character_eye_right = self:get_node("eye_right")
+
+	self.on_screen_input = self.druid:new(on_screen_input, "on_screen_input") --[[@as on_screen_input]]
+
+	self.on_screen_input.on_action:subscribe(self.on_action_button, self)
+	self.on_screen_input.on_movement:subscribe(self.on_movement, self)
+	self.on_screen_input.on_movement_stop:subscribe(self.on_movement_stop, self)
+end
+
+
+function M:on_action_button()
+	gui.set_scale(self.character, vmath.vector3(1.5))
+	gui.animate(self.character, gui.PROP_SCALE, vmath.vector3(1), gui.EASING_INSINE, 0.2)
+end
+
+
+function M:on_movement(x, y, dt)
+	self.character_position.x = self.character_position.x + x * CHARACTER_SPEED * dt
+	self.character_position.y = self.character_position.y + y * CHARACTER_SPEED * dt
+
+	-- Clamp to -436, 436, area of the screen
+	self.character_position.x = math.min(436, math.max(-436, self.character_position.x))
+	self.character_position.y = math.min(436, math.max(-436, self.character_position.y))
+
+	gui.set_position(self.character, self.character_position)
+
+	-- Adjust angle of the eyes
+	local angle = math.deg(math.atan2(y, x)) - 135
+	gui.set(self.character_eye_left, "euler.z", angle)
+	gui.set(self.character_eye_right, "euler.z", angle)
+end
+
+
+function M:on_movement_stop()
+	gui.set(self.character_eye_left, "euler.z", 0)
+	gui.set(self.character_eye_right, "euler.z", 0)
+end
+
+
+return M

example/examples/gamepad/on_screen_control/on_screen_input.gui

@@ -0,0 +1,132 @@
+textures {
+  name: "druid"
+  texture: "/example/assets/druid.atlas"
+}
+nodes {
+  size {
+    x: 1000.0
+    y: 400.0
+  }
+  type: TYPE_BOX
+  id: "root"
+  inherit_alpha: true
+  visible: false
+}
+nodes {
+  position {
+    x: -300.0
+  }
+  type: TYPE_TEMPLATE
+  id: "on_screen_stick"
+  parent: "root"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_stick.gui"
+}
+nodes {
+  size {
+    x: 400.0
+    y: 400.0
+  }
+  type: TYPE_BOX
+  id: "on_screen_stick/root"
+  parent: "on_screen_stick"
+  overridden_fields: 4
+  template_node_child: true
+}
+nodes {
+  type: TYPE_PIE
+  id: "on_screen_stick/background_mask"
+  parent: "on_screen_stick/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_stick/background"
+  parent: "on_screen_stick/background_mask"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_stick/stick_root"
+  parent: "on_screen_stick/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_stick/stick_shadow"
+  parent: "on_screen_stick/stick_root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_stick/stick"
+  parent: "on_screen_stick/stick_root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_stick/dot_1"
+  parent: "on_screen_stick/stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_stick/dot_2"
+  parent: "on_screen_stick/stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_stick/dot_3"
+  parent: "on_screen_stick/stick"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "on_screen_stick/dot_4"
+  parent: "on_screen_stick/stick"
+  template_node_child: true
+}
+nodes {
+  position {
+    x: 300.0
+  }
+  size {
+    x: 400.0
+    y: 400.0
+  }
+  type: TYPE_BOX
+  id: "on_screen_button"
+  parent: "root"
+  inherit_alpha: true
+  visible: false
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "button_action"
+  parent: "on_screen_button"
+  inherit_alpha: true
+  template: "/example/examples/gamepad/gamepad_tester/templates/gamepad_button.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_action/button"
+  parent: "button_action"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "button_action/text"
+  parent: "button_action/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "button_action/icon"
+  parent: "button_action/button"
+  overridden_fields: 45
+  template_node_child: true
+  enabled: false
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT

example/examples/gamepad/on_screen_control/on_screen_input.lua

@@ -0,0 +1,107 @@
+local const = require("druid.const")
+local event = require("druid.event")
+local helper = require("druid.helper")
+local component = require("druid.component")
+
+---@class on_screen_input: druid.base_component
+---@field druid druid_instance
+---@field on_action druid.event @()
+---@field on_movement druid.event @(x: number, y: number, dt: number) X/Y values are in range -1..1
+---@field on_movement_stop druid.event @()
+local M = component.create("on_screen_input")
+
+local STICK_DISTANCE = 80
+
+---@param template string
+---@param nodes table<hash, node>
+function M:init(template, nodes)
+	self.druid = self:get_druid(template, nodes)
+
+	self.button_action = self:get_node("on_screen_button")
+	self.on_screen_control = self:get_node("on_screen_stick/root")
+
+	self.stick_root = self:get_node("on_screen_stick/stick_root")
+	self.stick_position = gui.get_position(self.stick_root)
+
+	self.on_action = event()
+	self.on_movement = event()
+	self.on_movement_stop = event()
+
+	self.is_multitouch = helper.is_multitouch_supported()
+end
+
+
+---@param action_id hash
+---@param action action
+function M:on_input(action_id, action)
+	if self.is_multitouch then
+		if action_id == const.ACTION_MULTITOUCH then
+			for _, touch in ipairs(action.touch) do
+				self:process_touch(touch)
+			end
+		end
+	else
+		if action_id == const.ACTION_TOUCH then
+			self:process_touch(action)
+		end
+	end
+
+	return false
+end
+
+
+---@param action action|touch
+function M:process_touch(action)
+	if action.pressed and gui.pick_node(self.button_action, action.x, action.y) then
+		self.on_action:trigger()
+
+		gui.animate(self.button_action, gui.PROP_SCALE, vmath.vector3(1.2), gui.EASING_OUTSINE, 0.1, 0, function()
+			gui.animate(self.button_action, gui.PROP_SCALE, vmath.vector3(1), gui.EASING_INSINE, 0.2, 0.05)
+		end)
+	end
+
+	if gui.pick_node(self.on_screen_control, action.x, action.y) then
+		self._is_stick_drag = action.id or true
+	end
+
+	local is_the_same_touch_id = not action.id or action.id == self._is_stick_drag
+	if self._is_stick_drag and is_the_same_touch_id then
+		-- action.dx and action.dy are broken inside touches for some reason, manual calculations seems fine
+		local dx = action.x - (self._prev_x or action.x)
+		local dy = action.y - (self._prev_y or action.y)
+		self._prev_x = action.x
+		self._prev_y = action.y
+
+		self.stick_position.x = self.stick_position.x + dx
+		self.stick_position.y = self.stick_position.y + dy
+
+		-- Limit to STICK_DISTANCE
+		local length = vmath.length(self.stick_position)
+		if length > STICK_DISTANCE then
+			self.stick_position.x = self.stick_position.x / length * STICK_DISTANCE
+			self.stick_position.y = self.stick_position.y / length * STICK_DISTANCE
+		end
+
+		gui.set_position(self.stick_root, self.stick_position)
+	end
+
+	if action.released and is_the_same_touch_id then
+		self._is_stick_drag = false
+		self.stick_position.x = 0
+		self.stick_position.y = 0
+		self._prev_x = nil
+		self._prev_y = nil
+		gui.animate(self.stick_root, gui.PROP_POSITION, self.stick_position, gui.EASING_OUTBACK, 0.3)
+		self.on_movement_stop:trigger()
+	end
+end
+
+
+function M:update(dt)
+	if self.stick_position.x ~= 0 or self.stick_position.y ~= 0 then
+		self.on_movement:trigger(self.stick_position.x / STICK_DISTANCE, self.stick_position.y / STICK_DISTANCE, dt)
+	end
+end
+
+
+return M