Dream Mod 3.0Dream Mod 3.0
首页
快速开始
资源库
首页
快速开始
资源库
  • 进度

    • 更新日志
  • 指南

    • 快速上手
    • App.lua
    • Server.lua
    • 地图
    • 角色
    • 道具
    • 技能
    • 状态
    • 窗口
    • 成长
    • DmTcpClient
    • WebSocketClient
    • SqliteDB
    • 皮肤
    • 自定义组件
  • Api

    • 引擎
    • 地图
    • 角色
    • 道具
    • 技能
    • 状态
    • 窗口
    • 自定义组件
    • 音乐
    • 缓动
    • 全局
  • 控件

    • 标签
    • 按钮
    • 图片框
    • 动画框
    • 模型框
    • 文本框
    • 进度条
    • 技能格子
    • 快捷格子
    • 包裹格子
    • 道具格子
    • 角色框
    • 选择框
    • 选择夹
    • 容器
    • 地图框
    • 滑块条
    • 滚动条
    • 组合框
    • 输入框
    • 列表框
  • 组件

    • 文本
    • 艺术字
    • 精灵
    • 矩形
    • 圆形
    • 动画
    • 模型
  • 其他

    • 丰富文本
    • 模板变量
    • 资源格式
    • 游戏盒子
    • 资源列表
  • 自定义功能

    • 战斗血液效果
    • 地图天气
  • 自定义组件

    介绍

    自定义组件(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 窗口配置
    

    例子3
    local 地图资源组件 = 		
    {
        类型 = "组件",
        名称 = "地图图标",
        宽度 = 80,
        高度 = 18,
        背景色 = 0,
        边框宽度 = 0,
        边框色 = 0,
        锚点x = 0.5,
        锚点y = 0.5,
        鼠标事件 = true, 
        节点 = {
            {
                名称 = "名称标签",
                类型 = "文本",
                默认可视 = true,
                字体 = "新宋12",
                水平对齐 = 1,
                垂直对齐 = 1,
                间距 = 0,
                标题 = "",
                文本色 = RGBA(240,240,240,255),
                描边色 = RGBA(0,0,0,200),
                背景色 = RGBA(32,32,32,255),
                气泡提示 = "",
                鼠标事件 = true, 
            },
        },
        
        属性 = {},
        方法 = {},
    
        系统事件 = {
            创建 = function(组件对象)
                local 名称标签 = 组件对象.取出节点("名称标签")
                名称标签.标题 = 组件对象.标题
                名称标签.气泡提示 = 组件对象.标题
                组件对象.宽度 = 名称标签.宽度
                组件对象.高度 = 名称标签.高度
            end,
    
            焦点变化 = function (组件对象,本次焦点,上次焦点)
    
                local 父节点 = 组件对象.父节点
    
                if (父节点.附加.焦点节点 ~= nil) then
                    父节点.附加.焦点节点.文本色 = RGBA(240,240,240,255)
                    父节点.附加.焦点节点 = nil
                end
    
                if (本次焦点 ~= nil) then
                    if (本次焦点.名称 == "名称标签") then
                        本次焦点.文本色 = RGBA(0,240,0,255)
                        父节点.附加.焦点节点 = 本次焦点
                    end
                end
    
            end,
    
        },
    }
    
    return 地图资源组件
    

    配置项

    名称类型必填说明
    类型 文本true固定值:组件 表示这是一个扩展组件
    名称 文本true全局唯一的组件类型名称
    宽度 整数true默认宽度:32
    高度 整数true默认高度:32
    锚点x 小数false
    锚点y 小数false
    背景色 RGBAfalse
    边框宽度 整数false
    边框色 RGBAfalse默认:0
    圆角半径 整数false
    圆角边数 整数false
    水平缩放 小数false
    垂直缩放 小数false
    次序 整数false数值越大越先显示
    角度 整数false
    透明度 小数false范围:0-1
    底图 文本false背景图片标识
    九宫 tablefalse底图使用的九宫配置 {左,上,右,下}
    自动裁剪 逻辑false只渲染当前可见部分
    变换矩阵 整数false取值范围:0-5, 0:无变换, 1:X斜切, 2:Y斜切, 3:X拉伸, 4:Y拉伸, 5:等比拉伸
    矩阵系数 数值false组件的矩阵系数。
    遮罩 整数false0.无
    1.定义遮罩镂空的形状,有像素的区域被镂空。
    2.仅在镂空的区域显示。
    3.仅在镂空之外的区域显示。
    资源表 tablefalse{ {标识="",文件=""}, {标识="",文件=""}, }
    节点 tablefalse节点数组
    属性 tablefalse开放属性表
    方法 tablefalse开放方法表
    鼠标事件 逻辑false是否接收鼠标事件。默认:false
    系统事件 tablefalse

    节点

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

    节点类型说明
    文本显示文字
    精灵显示图片
    节点 = {
        {
            名称 = "关卡头像",
            类型 = "精灵",
            默认可视 = 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,
    }
    

    🔹 鼠标滚轮

    • 鼠标在组件上滚轮滚动时触发,需要启用鼠标事件。
    • 返回 true 可以阻止事件的继续传递。
    回调参数类型说明描述
    组件对象 组件对象
    滚动状态 数值 滚轮滚动值。

    示例

    系统事件 = {
        鼠标滚轮 = function(组件对象,滚动状态)
            调试输出("鼠标滚轮",滚动状态)
        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,
    }
    
    Prev
    皮肤