自定义组件

介绍

自定义组件(Prefab)，是指使用文本 精灵 矩形 动画等基石组件搭配产生的个性化组件模板。

自定义组件可以在窗口的组件配置项中直接创建,也可以独立脚本并在App.lua扩展组件中引入。
下面的例子实现了一个叫 文本按钮类型的组件。并且在控件中创建了2个实例。

例子1

local 窗口配置 = {
	类型 = "窗口",
	名称 = "我的组件",
	标题 = "我的组件",
	x = 100,
	y = 100,
	宽度 = 300,
	高度 = 200,
	置顶 = false,
	可移动 = true,
	可穿透 = false,
	默认可视 = true,
	开关动效 = {开=1,关=1},
	资源表 = {},
	组件 = {
		{
			类型 = "组件",
			名称 = "文本按钮",
			宽度 = 48,
			高度 = 24,
			背景色 = RGBA(30,30,30,255),
			边框宽度 = 1,
			边框色 = RGBA(168,168,168,255),
			圆角半径 = 4,
			圆角边数 = 8,
			鼠标事件 = true, 
			节点 = {
				{
					名称 = "按钮标签",
					类型 = "文本",
					默认可视 = true,
					水平对齐 = 1,
					垂直对齐 = 1,
					字体 = "宋体12",
					标题 = "",
					文本色 = RGBA(240,240,240,255),
					描边色 = RGBA(0,0,0,200),
					鼠标事件 = false, 
				},
			},
			
			属性 = {
				标题 = function(组件对象,value)	 -- 当组件调用 .标题 修改属性时候触发 
					组件对象.取出节点("按钮标签").标题 = value
				end,

				宽度 = function(组件对象,value)	 -- 当组件调用 .宽度 修改属性时候触发 
					组件对象.取出节点("按钮标签").宽度 = value
				end,

				高度 = function(组件对象,value)	 -- 当组件调用 .高度 修改属性时候触发
					组件对象.取出节点("按钮标签").高度 = value
				end,
			},

			方法 = {
				变形金刚 = function (组件对象,x,y,text)
					组件对象.x = x
					组件对象.y = y
					组件对象.宽度 = 64
					组件对象.高度 = 64
					组件对象.标题 = text
				end
			},

			系统事件 = {
				--============================================================
				创建 = function (组件对象)

					调试输出(组件对象.标题)

				end,
				--============================================================
				焦点变化 = function (组件对象,本次焦点,上次焦点)

					local 按钮标签 = 组件对象.取出节点("按钮标签")
					按钮标签.文本色 = 本次焦点 and RGBA(0,240,0,255) or RGBA(240,240,240,255)

				end,
				--============================================================
				鼠标按下 = function(组件对象,焦点对象)

					local 按钮标签 = 组件对象.取出节点("按钮标签")
					按钮标签.文本色 = RGBA(80,80,80,255)
					组件对象.加入事件("点击")

					return true
				end,
				--============================================================
				鼠标弹起 = function(组件对象,本次焦点,上次焦点)

					local 按钮标签 = 组件对象.取出节点("按钮标签")
					按钮标签.文本色 = 本次焦点 and RGBA(0,240,0,255) or RGBA(240,240,240,255)

					return true
				end
			},

		}
	},
	控件 = 
	{

		{
			名称 = "文本按钮1",
			类型 = "文本按钮",
			x = 40,
			y = 60,
			宽度 = 80,
			高度 = 24,
			标题 = "我的按钮",
			系统事件 = {
				点击 = function (组件对象)
					调试输出(组件对象.标题 .. " 被点击了")
				end
			}
		},
		{
			名称 = "文本按钮2",
			类型 = "文本按钮",
			x = 40,
			y = 100,
			宽度 = 120,
			高度 = 32,
			标题 = "云南玉昆",
			系统事件 = {
				点击 = function (组件对象)
	
					组件对象.父窗口.文本按钮1.变形金刚(0,0,"白菜")

					调试输出(组件对象.标题 .. " 被点击了")

				end
			}
		},

	}

}


return 窗口配置

例子2

local 窗口配置 = {
	名称 = "动画基石",
	类型 = "窗口",
	x = 100,
	y = 60,
	宽度 = 680,
	高度 = 460,
	可移动 = true,
	置顶 = false,
	默认可视 = true,
	开关动效 = {开=0,关=0},
	标题 = "测试窗口",
	组件 = {
		{
			类型 = "组件",
			名称 = "游戏角色",
			宽度 = 80,
			高度 = 160,
			背景色 = RGBA(30,30,30,255),
			边框宽度 = 1,
			边框色 = RGBA(168,168,168,255),
			圆角半径 = 4,
			圆角边数 = 8,
            锚点x = 0.5,
            锚点y = 0.5,
			鼠标事件 = true, 
			节点 = {
				{
					名称 = "身体动画",
					类型 = "动画",
                    x = 40,
                    y = 140,
					默认可视 = true,
                    动画 = "Long_角色动画_男默认",
                    动作 = "停止_4",
					鼠标事件 = true, 
				},
			},
			
			属性 = {},
			方法 = {},

			系统事件 = {
                鼠标按下 = function(组件对象,焦点对象,键值)

                    if (焦点对象.名称 == "身体动画") then
                        焦点对象.播放({"受伤_4","停止_4"})
                        焦点对象.闪烁(RGBA(170,170,170,170))
                        引擎.弹出文字(焦点对象.x,焦点对象.y - 焦点对象.高度 * 0.5,tostring(4) ,"艺术字",组件对象,{颜色=RGBA(0,255,0,255),动效=3});
                        引擎.弹出文字(焦点对象.x,焦点对象.y - 焦点对象.高度 * 0.5,tostring(4) ,"艺术字",组件对象,{颜色=RGBA(140,200,250,255),延迟=100,动效=3});
                    end

                    return true
                end,
			},
		}
	},

    控件 = {
        {
            名称 = "角色1",
            类型 = "游戏角色",
            x = 340,
            y = 230
        },
        
    },

    系统事件 = {
        创建 = function (窗口对象)

        end
    }

}




return 窗口配置

配置项

名称	类型	必填	说明
类型	文本	true	固定值：组件表示这是一个扩展组件
名称	文本	true	全局唯一的组件类型名称
宽度	整数	true	默认宽度：32
高度	整数	true	默认高度：32
锚点x	小数	false
锚点y	小数	false
背景色	RGBA	false
边框宽度	整数	false
边框色	RGBA	false	默认：0
圆角半径	整数	false
圆角边数	整数	false
水平缩放	小数	false
垂直缩放	小数	false
次序	整数	false	数值越大越先显示
角度	整数	false
透明度	小数	false	范围：0-1
底图	文本	false	背景图片标识
九宫	table	false	底图使用的九宫配置 {左,上,右,下}
自动裁剪	逻辑	false	只渲染当前可见部分
资源表	table	false	{ {标识="",文件=""}, {标识="",文件=""}, }
节点	table	false	节点数组
属性	table	false	开放属性表
方法	table	false	开放方法表
鼠标事件	逻辑	false	是否接收鼠标事件。默认：false
系统事件	table	false

节点

一个组件包含多个子组件(节点)，通过节点搭配出自定义效果。

节点类型	说明
文本	显示文字
精灵	显示图片

节点 = {
    {
        名称 = "关卡头像",
        类型 = "精灵",
        默认可视 = true,
        x = 17,
        y = 17,
        锚点x = 0.5,
        锚点y = 0.5,
        水平缩放 = 0.5,
        垂直缩放 = 0.5,
        颜色 = RGBA(255,255,255,255),
        图片 = "_关卡项目_头像_1",
        九宫 = nil,
        鼠标事件 = true, -- 是否接收鼠标事件
        
    },

    {
        名称 = "关卡名称",
        类型 = "文本",
        默认可视 = true,
        x = 39,
        y = 9,
        宽度 = 76,
        高度 = 16,
        水平对齐 = 0,
        垂直对齐 = 1,
        字体 = "宋体12",
        标题 = "稻草人",
        文本色 = RGBA(240,240,240,255),
        描边色 = RGBA(0,0,0,200),
        鼠标事件 = true, -- 是否接收鼠标事件
    },
}

属性

为组件设计属性 接口，当属性被修改时触发。

名称	类型	说明
`属性名`	文本
`触发函数`	function	{组件对象,属性值}

属性 = {
    标题 = function(组件对象,value)	-- 当组件调用 .标题 修改属性时候触发 
        组件对象.取出节点("按钮标签").标题 = value
    end,
},

方法

为组件设计方法 接口，当方法被调用时触发。

名称	类型	说明
`方法名`	文本
`触发函数`	function	{组件对象,属性值}

方法 = {
    变形金刚 = function(组件对象,...)	-- 当组件调用 .变形金刚() 时触发
        调试输出(...)
    end,
},

系统事件

提示

由自定义类型组件产生的实例默认不会触发任何事件，设计者根据需要通过加入事件往组件对象发送事件，通知使用者。

系统事件 = {
    创建 = function (组件对象)
        组件对象.加入事件("创建") -- 发送到实例的系统事件里
    end,
}

🔹 创建

组件对象创建时触发

回调参数	类型	说明描述
组件对象	组件对象

示例

系统事件 = {
    创建 = function (组件对象)
        调试输出(组件对象.类型,组件对象.名称)
    end,
}

🔹 更新

组件对象每帧触发

回调参数	类型	说明描述
组件对象	组件对象
dt	数值	上一帧消耗时间

示例

系统事件 = {
	更新 = function (组件对象,dt)
       
    end,
}

🔹 鼠标按下

鼠标按下时触发，需要启用鼠标事件。
返回 true 可以阻止事件的继续传递。

回调参数	类型	说明描述
组件对象	组件对象
焦点对象	组件对象	当前的鼠标焦点组件
键值	整数	0：左键 1：右键 2：中键。
功能键	整数	`1：Ctrl` `2：Shift` `3：Alt` 是否处于按下状态

示例

系统事件 = {
    鼠标按下 = function(组件对象,焦点对象,键值,功能键)
        调试输出(焦点对象.类型,焦点对象.名称)
        return true
    end,
}

🔹 鼠标弹起

鼠标弹起时触发，需要启用鼠标事件。
返回 true 可以阻止事件的继续传递。

回调参数	类型	说明描述
组件对象	组件对象
本次焦点	组件对象	当前鼠标焦点组件
上次焦点	组件对象	上次鼠标焦点组件
键值	整数	0：左键 1：右键 2：中键。
功能键	整数	`1：Ctrl` `2：Shift` `3：Alt` 是否处于按下状态

示例

系统事件 = {
    鼠标弹起 = function(组件对象,本次焦点,上次焦点,键值,功能键)
        if (本次焦点 ~= nil and 本次焦点 == 上次焦点) then
            调试输出("一次有效的鼠标点击",本次焦点.名称)
        end
    end,
}

🔹 鼠标移动

鼠标在组件上移动时触发，需要启用鼠标事件。
返回 true 可以阻止事件的继续传递。

回调参数	类型	说明描述
组件对象	组件对象
焦点对象	组件对象	当前鼠标焦点组件
功能键	整数	`1：Ctrl` `2：Shift` `3：Alt` 是否处于按下状态

示例

系统事件 = {
    鼠标移动 = function(组件对象,焦点对象,功能键)
        调试输出("鼠标移动",焦点对象.名称,焦点对象.鼠标坐标.x,焦点对象.鼠标坐标.y)
    end,
}

🔹 焦点变化

鼠标在组件上发生子节点焦点变化时触发，需要启用鼠标事件。

回调参数	类型	说明描述
组件对象	组件对象
本次焦点	组件对象	当前鼠标焦点组件
上次焦点	组件对象	上次鼠标焦点组件

示例

系统事件 = {
    焦点变化 = function (组件对象,本次焦点,上次焦点)
        if (上次焦点) then
            调试输出(上次焦点.名称 .. " 失去焦点")
        end

        if (本次焦点) then
            调试输出(本次焦点.名称 .. " 获得焦点")
        end
    end,
}

🔹 拖拽开始

鼠标在组件上发拖拽事件，需要启用鼠标事件。
返回 true 表示允许拖拽。

回调参数	类型	说明描述
组件对象	组件对象
焦点对象	组件对象	当前发生拖拽的对象
功能键	整数	`1：Ctrl` `2：Shift` `3：Alt` 是否处于按下状态

示例

系统事件 = {
    拖拽开始 = function(组件对象,焦点对象,功能键)
		if (焦点对象.类型 == "卡牌角色") then
			焦点对象.边框宽度 = 2
			焦点对象.边框色 = RGBA(255,255,0,255)
			焦点对象.次序 = os.clock()
			return true
		end
    end,
}

🔹 拖拽中

鼠标拖拽组件中。
返回 true 表示停止拖拽。

回调参数	类型	说明描述
组件对象	组件对象
拖拽对象	组件对象	当前发生拖拽的对象
焦点对象	组件对象	除被拖拽对象外，当前鼠标的焦点对象

示例

系统事件 = {
    拖拽中 = function(组件对象,拖拽对象,焦点对象)
		if (焦点对象 and 焦点对象.名称 == "敌方") then
			-- 发动战斗
		end
    end,
}

🔹 拖拽结束

鼠标拖拽组件结束后触发。

回调参数	类型	说明描述
组件对象	组件对象
拖拽对象	组件对象	当前发生拖拽的对象

示例

系统事件 = {
    拖拽结束 = function(组件对象,拖拽对象)
		拖拽对象.边框宽度 = 0
    end,
}