mirror of
https://github.com/Insality/druid
synced 2025-09-27 18:12:21 +02:00
Update example with new brand one
This commit is contained in:
Insality
451
example/components/druid_logo/druid_logo.gui
Normal file
451
example/components/druid_logo/druid_logo.gui
Normal file
@@ -0,0 +1,451 @@
|
||||
script: ""
|
||||
fonts {
|
||||
name: "text_regular"
|
||||
font: "/example/assets/fonts/text_regular.font"
|
||||
}
|
||||
textures {
|
||||
name: "druid_logo"
|
||||
texture: "/example/assets/druid_logo.atlas"
|
||||
}
|
||||
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: 400.0
|
||||
y: 170.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 0.129
|
||||
y: 0.141
|
||||
z: 0.157
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: "druid/pixel"
|
||||
id: "root"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
layer: "druid"
|
||||
inherit_alpha: true
|
||||
slice9 {
|
||||
x: 0.0
|
||||
y: 0.0
|
||||
z: 0.0
|
||||
w: 0.0
|
||||
}
|
||||
clipping_mode: CLIPPING_MODE_STENCIL
|
||||
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: 200.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: 16.0
|
||||
y: 16.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: ""
|
||||
id: "E_Anchor"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_E
|
||||
adjust_mode: ADJUST_MODE_STRETCH
|
||||
parent: "root"
|
||||
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_MANUAL
|
||||
custom_type: 0
|
||||
enabled: true
|
||||
visible: false
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 10.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: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: "druid_logo/icon_druid"
|
||||
id: "icon_druid_right"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "E_Anchor"
|
||||
layer: "druid_logo"
|
||||
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: 0.5
|
||||
template_node_child: false
|
||||
size_mode: SIZE_MODE_AUTO
|
||||
custom_type: 0
|
||||
enabled: true
|
||||
visible: true
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: -200.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: 16.0
|
||||
y: 16.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: ""
|
||||
id: "W_Anchor"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_W
|
||||
adjust_mode: ADJUST_MODE_STRETCH
|
||||
parent: "root"
|
||||
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_MANUAL
|
||||
custom_type: 0
|
||||
enabled: true
|
||||
visible: false
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: -10.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: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: "druid_logo/icon_druid"
|
||||
id: "icon_druid_left"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "W_Anchor"
|
||||
layer: "druid_logo"
|
||||
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: 0.5
|
||||
template_node_child: false
|
||||
size_mode: SIZE_MODE_AUTO
|
||||
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: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: "druid_logo/logo_druid"
|
||||
id: "icon_logo"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "root"
|
||||
layer: "druid_logo"
|
||||
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: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 0.0
|
||||
y: -50.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
rotation {
|
||||
x: 0.0
|
||||
y: 0.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
scale {
|
||||
x: 0.6
|
||||
y: 0.6
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 400.0
|
||||
y: 50.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 0.463
|
||||
y: 0.475
|
||||
z: 0.49
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_TEXT
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
text: "Defold UI Framework"
|
||||
font: "text_regular"
|
||||
id: "text_description"
|
||||
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: "root"
|
||||
layer: "text_regular"
|
||||
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: ""
|
||||
}
|
||||
layers {
|
||||
name: "druid"
|
||||
}
|
||||
layers {
|
||||
name: "druid_logo"
|
||||
}
|
||||
layers {
|
||||
name: "text_regular"
|
||||
}
|
||||
material: "/builtins/materials/gui.material"
|
||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
||||
max_nodes: 512
|
||||
48
example/components/druid_logo/druid_logo.lua
Normal file
48
example/components/druid_logo/druid_logo.lua
Normal file
@@ -0,0 +1,48 @@
|
||||
local panthera = require("panthera.panthera")
|
||||
local component = require("druid.component")
|
||||
|
||||
local druid_logo_panthera = require("example.components.druid_logo.druid_logo_panthera")
|
||||
local container = require("example.components.container.container")
|
||||
|
||||
---@class druid_logo: druid.base_component
|
||||
---@field root druid.container
|
||||
---@field text_description druid.text
|
||||
---@field druid druid_instance
|
||||
local DruidLogo = component.create("druid_logo")
|
||||
|
||||
|
||||
---@param template string
|
||||
---@param nodes table<hash, node>
|
||||
function DruidLogo:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
|
||||
self.root = self.druid:new(container, "root") --[[@as druid.container]]
|
||||
self.root:add_container("E_Anchor")
|
||||
self.root:add_container("W_Anchor")
|
||||
|
||||
self.druid:new_button("root", self.on_click):set_style(nil)
|
||||
|
||||
self.animation = panthera.create_gui(druid_logo_panthera, self:get_template(), nodes)
|
||||
panthera.play(self.animation, "idle", { is_loop = true })
|
||||
|
||||
self.animation_hover = panthera.clone_state(self.animation)
|
||||
self.hover = self.druid:new_hover("root")
|
||||
self.hover.on_mouse_hover:subscribe(self.on_mouse_hover)
|
||||
end
|
||||
|
||||
|
||||
function DruidLogo:on_click()
|
||||
sys.open_url("https://github.com/Insality/druid", { target = "_blank" })
|
||||
end
|
||||
|
||||
|
||||
function DruidLogo:on_mouse_hover(is_hover)
|
||||
if is_hover then
|
||||
panthera.play(self.animation_hover, "on_hover_in")
|
||||
else
|
||||
panthera.play(self.animation_hover, "on_hover_out", { is_skip_init = true })
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
return DruidLogo
|
||||
268
example/components/druid_logo/druid_logo_panthera.lua
Normal file
268
example/components/druid_logo/druid_logo_panthera.lua
Normal file
@@ -0,0 +1,268 @@
|
||||
return {
|
||||
version = 1,
|
||||
format = "json",
|
||||
data = {
|
||||
animations = {
|
||||
{
|
||||
duration = 12,
|
||||
animation_id = "idle",
|
||||
animation_keys = {
|
||||
{
|
||||
node_id = "icon_druid_left",
|
||||
duration = 3,
|
||||
end_value = -5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
node_id = "icon_druid_right",
|
||||
duration = 3,
|
||||
end_value = -5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 4,
|
||||
end_value = 5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
start_time = 3,
|
||||
duration = 3,
|
||||
start_value = -5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
node_id = "icon_druid_left",
|
||||
end_value = 5,
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
start_time = 3,
|
||||
duration = 3,
|
||||
start_value = -5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
node_id = "icon_druid_right",
|
||||
end_value = 5,
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
start_time = 4,
|
||||
duration = 8,
|
||||
start_value = 5,
|
||||
easing = "insine",
|
||||
key_type = "tween",
|
||||
node_id = "icon_logo",
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
start_time = 6,
|
||||
duration = 6,
|
||||
start_value = 5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
node_id = "icon_druid_left",
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
start_time = 6,
|
||||
duration = 6,
|
||||
start_value = 5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
node_id = "icon_druid_right",
|
||||
property_id = "position_y",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
duration = 0.6,
|
||||
animation_id = "on_hover_in",
|
||||
animation_keys = {
|
||||
{
|
||||
node_id = "W_Anchor",
|
||||
duration = 0.6,
|
||||
end_value = -220,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = -200,
|
||||
property_id = "position_x",
|
||||
},
|
||||
{
|
||||
node_id = "text_description",
|
||||
duration = 0.6,
|
||||
end_value = -60,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = -50,
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
node_id = "icon_druid_left",
|
||||
duration = 0.6,
|
||||
end_value = 0.7,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 0.5,
|
||||
property_id = "color_a",
|
||||
},
|
||||
{
|
||||
node_id = "icon_druid_right",
|
||||
duration = 0.6,
|
||||
end_value = 0.7,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 0.5,
|
||||
property_id = "color_a",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 0.6,
|
||||
end_value = 1.1,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 1,
|
||||
property_id = "scale_x",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 0.6,
|
||||
end_value = 1.1,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 1,
|
||||
property_id = "scale_y",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 0.6,
|
||||
end_value = 1.7,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 1,
|
||||
property_id = "color_a",
|
||||
},
|
||||
{
|
||||
node_id = "E_Anchor",
|
||||
duration = 0.6,
|
||||
end_value = 220,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 200,
|
||||
property_id = "position_x",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
duration = 0.3,
|
||||
animation_id = "on_hover_out",
|
||||
animation_keys = {
|
||||
{
|
||||
node_id = "W_Anchor",
|
||||
duration = 0.3,
|
||||
end_value = -200,
|
||||
easing = "outback",
|
||||
key_type = "tween",
|
||||
start_value = -200,
|
||||
property_id = "position_x",
|
||||
},
|
||||
{
|
||||
node_id = "text_description",
|
||||
duration = 0.3,
|
||||
end_value = -50,
|
||||
easing = "outback",
|
||||
key_type = "tween",
|
||||
start_value = -50,
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
node_id = "icon_druid_left",
|
||||
duration = 0.3,
|
||||
end_value = 0.5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 0.5,
|
||||
property_id = "color_a",
|
||||
},
|
||||
{
|
||||
node_id = "icon_druid_right",
|
||||
duration = 0.3,
|
||||
end_value = 0.5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 0.5,
|
||||
property_id = "color_a",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 0.3,
|
||||
end_value = 1,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 1,
|
||||
property_id = "color_a",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 0.3,
|
||||
end_value = 1,
|
||||
easing = "outback",
|
||||
key_type = "tween",
|
||||
start_value = 1,
|
||||
property_id = "scale_x",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 0.3,
|
||||
end_value = 1,
|
||||
easing = "outback",
|
||||
key_type = "tween",
|
||||
start_value = 1,
|
||||
property_id = "scale_y",
|
||||
},
|
||||
{
|
||||
node_id = "E_Anchor",
|
||||
duration = 0.3,
|
||||
end_value = 200,
|
||||
easing = "outback",
|
||||
key_type = "tween",
|
||||
start_value = 200,
|
||||
property_id = "position_x",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
metadata = {
|
||||
gui_path = "/example/components/druid_logo/druid_logo.gui",
|
||||
settings = {
|
||||
font_size = 40,
|
||||
},
|
||||
gizmo_steps = {
|
||||
time = 0.1,
|
||||
},
|
||||
layers = {
|
||||
{
|
||||
name = "druid",
|
||||
color = "73E84C",
|
||||
},
|
||||
{
|
||||
name = "druid_logo",
|
||||
color = "90D2F6",
|
||||
},
|
||||
{
|
||||
name = "text_regular",
|
||||
color = "C379F0",
|
||||
},
|
||||
},
|
||||
fps = 60,
|
||||
},
|
||||
nodes = {
|
||||
},
|
||||
},
|
||||
type = "animation_editor",
|
||||
}
|
||||
Reference in New Issue
Block a user