Маленькая заметка о DRUID. Создание кнопки, виджета, скрола и скрола с менюшкой

[lab]

Пишу для себя, нужно было создать три элемента для игры. Кнопка, Скрол и меню(поскольку меню это скрол + кнопка не стал описывать отдельно).
Контент:

• создаем кнопку и подключаем библиотеку
• создаем виджет на основе кнопки
• создаем скрол с текстом

добавляем зависимости

Добавляем расширение: game.project → project → dependencies → плюсик и добавляем строчку. Редактор предложил fetch.
Druid.

https://github.com/Insality/druid/archive/refs/tags/1.1.6.zip

Defold Event.

https://github.com/Insality/defold-event/archive/refs/tags/12.zip

Рассмотрим базовый случай кнопки

# ASSETS 
- создать main.gui
- main.gui_script

# OUTLINE
- main.gui в Properties -> script и выбрать main.gui_script
- Fonts добавить шрифт друдида druid_text_regular
  
- создаем ноду button_node_id
	- и в ней создаем текстовую text_node_id

local druid = require("druid.druid")

-- Все колбек функции имеют self в качестве первого аргумента
-- self будет иметь значение того что передали в druid.new(self)
local function on_button_callback(self)
	self.text:set_text("Кнопка нажата!")
end

function init(self)
	self.druid = druid.new(self)
	-- можем использовать сразу node_id без gui.get_node():
	self.button = self.druid:new_button("button_node_id", on_button_callback)
	self.text = self.druid:new_text("text_node_id", "Привет, друид!")
end

function final(self)
	self.druid:final()
end

function update(self, dt)
	self.druid:update(dt)
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)
	return self.druid:on_input(action_id, action)
end

упакова в виджет

Первая затыка с которой столкнулся как новичок в дефолде/луа/друид и может кому-то поможет, это нетривиальное подключение виджетов. После того как подключаем виджет в main, нужно создать в OUTLINE ноду:

Уходим из такого подхода из прошлой главы
- создаем ноду button_node_id
	- и в ней создаем текстовую text_node_id
	  
К этому:
- создаем ноду best_widget_in_the_world/root это текст, а не нода в ноде, для меня это было супернеочевидно)))) 
	- создаем ноду best_widget_in_the_world/button_node_id
	- создаем текст best_widget_in_the_world/text_node_id

Создаем файл в main → best_widget_in_the_world.lua

---@class best_widget_in_the_world: druid.widget
local M = {}

function M:init()
	self.root = self:get_node("root")

	-- создаем тот же самый функционал
	self.button = self.druid:new_button("button_node_id", self.on_click)
	self.text = self.druid:new_text("text_node_id", "Hello, Druid!")

	-- теперь self.button и self.text доступны в методах/функциях M
end

--- "self" будет корректно вызываться в обратных вызовах Druid
-- on_click функция друида
function M:on_click()
	self.text:set_text("Кнопка нажата!")
end

--- функция, написанная нами и так же работает с self
function M:say_hello()
	self.text:set_text("Привет, друид!")
end


return M

Подключаем файл в main.gui_script, здесь нужно изменить лишь init и подключить файл best_widget_in_the_world

local druid = require("druid.druid")
-- подключаем виджет
local best_widget_in_the_world = require("main.best_widget_in_the_world")

function init(self)
	self.druid = druid.new(self)

	-- подключаем
	-- get_node("root") и best_widget_in_the_world соединяются в одну строчку
	-- best_widget_in_the_world/root
	self.my_widget = self.druid:new_widget(best_widget_in_the_world, "best_widget_in_the_world")
end

Первый виджет готов!

обычный скрол вниз

OUTLINE выглядит так
- scroll_view 
	- scroll_content
		- text
		- text2
		- text3

• у scroll_view
  • выставить clipping mode: stencil, чтоб скрывать содержимое вне его границ при прокрутке
  • pivot поставить NORTH
• scroll_content
  • делаем высоту больше scroll_view
  • pivot поставить NORTH
• text расставить в scroll_content по всей длине

function init(self)
	self.scroll = self.druid:new_scroll("scroll_view", "scroll_content")
end