皮肤

  • 在App.lua入口处,在所有窗口组件中都可以进行控件皮肤配置,同资源表一样,皮肤也是全局的(配置一处,全项目可用)。
  • 如果控件不配置皮肤,系统会为部分控件缺省设置App.lua入口处的皮肤配置。如:窗口 按钮 选择框 滚动条 ...
  • 如果不希望使用系统皮肤,需要手动设置 皮肤 = "无"。
local 窗口配置 = {

	名称 = "装备窗口",
	类型 = "窗口",
	x = 100,
	y = 60,
	宽度 = 480,
	高度 = 430,
	可移动 = true,
	置顶 = false,
	默认可视 = true,
	开关动效 = {开=0,关=0},
	标题 = "人物属性",
	皮肤 = "Long_窗口",
	资源表 = {
		{标识="Long_皮肤_按钮_九宫1",文件="game001/界面/九宫按钮1.png"},
		{标识="Long_皮肤_选择框_1",文件="game001/界面/选择框1.png"},
		{标识="Long_皮肤_窗口背景",文件="game001/界面/窗口底图.png"},
		{标识="Long_皮肤_按钮_窗口关闭",文件="game001/界面/窗口关闭按钮.png"},
	},

	控件皮肤 = {
		Long_九宫按钮1 = {字体="宋体12",间距=2,底图="Long_皮肤_按钮_九宫1",九宫={10,10,10,10},三层按钮=true,文本色 = {RGBA(243,243,243,255),RGBA(0,220,0,255),RGBA(240,70,70,255)},描边色 = RGBA(0,0,0,200)},
		Long_选择框1 = {字体="宋体12",文字间距=1,底图="Long_皮肤_选择框_1",文本色 = {RGBA(240,240,240,255),RGBA(255,250,120,255),RGBA(200,200,200,255)},描边色 = RGBA(0,0,0,200), 标题距离 = 4,边框宽度=2,边框色 = RGBA(200,200,200,255),选中色 = RGBA(255,255,0,220)},
		Long_窗口 = {
			背景色=RGBA(20,20,20,200),边框宽度=2,边框色=RGBA(255,255,255,200),底图="Long_皮肤_窗口背景",九宫 = {68,42,72,42},
			开关动效 = {开=1,关=1}, 开关音效 = {开="音效_窗口开",关="音效_窗口关"},
			关闭按钮={底图="Long_皮肤_按钮_窗口关闭",三层按钮=true,x=-34,y=6},
			标题={字体="宋体14粗",间距=6,颜色=RGBA(225,197,100,255),描边色=RGBA(0,0,0,200),x=0,y=8}
		},
	},
	控件 = 
	{
		{
			名称 = "测试按钮1",
			类型 = "按钮",
			x = 40,
			y = 100,
			宽度 = 100,
			高度 = 32,		
			皮肤 = "Long_九宫按钮1",
			标题 = "测试按钮1",
		},
    }
}

九宫

为了避免图片拉伸缩放变得模糊，将一张图片分成九块区域，除四个角外，其他图块平铺。DM3使用距离四条边的距离组成九宫配置项。
{距离左边,距离上边,距离右边,距离下边} 例：{8,8,8,8}

原图普通拉伸九宫模式九宫坐标

示例图片

示例图片

示例图片

示例图片

✨ 按钮皮肤

控件皮肤 = {
	按钮 = {字体="宋体12",间距=1,底图="默认皮肤|按钮底图",九宫={8,8,8,8},三层按钮=true,文本色 = {RGBA(243,243,243,255),RGBA(0,220,0,255),RGBA(240,70,70,255)},描边色 = RGBA(0,0,0,200)},
}
名称类型必填说明
字体 文本true文字素材标识
间距 整数true文字间距
行距 整数true文字行距
底图 文本true图片型资源标识
九宫 tabletrue{左,上,右,下}
三层按钮 逻辑true
文本色 table {默认色,点燃色,按下色}true
描边色 RGBAtrue文字描边色

✨ 选择框皮肤

控件皮肤 = {
	选择框 = {字体="宋体12",文字间距=1,底图="默认皮肤|选择框底图",文本色 = {RGBA(240,240,240,255),RGBA(255,250,120,255),RGBA(200,200,200,255)},描边色 = RGBA(0,0,0,200), 标题距离 = 4,边框宽度=2,边框色 = RGBA(200,200,200,255),选中色 = RGBA(255,255,0,220)},
}
名称类型必填说明例子
字体 文本true文字素材标识
文字间距 整数true文字间距
底图 文本true图片型资源标识,两个状态[默认][选中],且规格相同示例图片
文本色 table {默认色,点燃色,按下色}true
描边色 RGBAtrue文字描边色
标题距离 整数true选择框图片与标题之间的距离
边框宽度 整数true没有底图时起效
边框色 RGBAtrue没有底图时起效
选中色 RGBAtrue没有底图时起效

✨ 窗口皮肤

控件皮肤 = {
    窗口 = {
        背景色=RGBA(20,20,20,200),边框宽度=2,边框色=RGBA(255,255,255,200),底图="Long_皮肤_窗口背景",九宫 = {68,42,72,42},
        开关动效 = {开=1,关=1}, 开关音效 = {开="音效_窗口开",关="音效_窗口关"},
        关闭按钮={底图="Long_皮肤_按钮_窗口关闭",三层按钮=true,x=-34,y=6},
        标题={字体="宋体14粗",间距=6,颜色=RGBA(225,197,100,255),描边色=RGBA(0,0,0,200),x=0,y=8}
    },
}
名称类型必填说明
背景色 RGBAfalse无底图时起效
边框宽度 整数false无底图时起效
边框色 RGBAfalse无底图时起效
底图 文本false图片型资源标识
九宫 tablefalse{左,上,右,下}
开关动效 table {开,关}false窗口开关时的动画效果
开关音效 table {开,关}false窗口开关时播放的音效
关闭按钮 table {底图,三层按钮,x,y}falsex,y为窗口右上角坐标的偏移
标题 table {字体,间距,颜色,描边颜色,x,y}falsex,y为窗口顶部居中坐标的偏移

✨ 滚动条皮肤

控件皮肤 = {
    滚动条 = {底图 = "默认皮肤|滚动条_底图",九宫 = {6,6,6,6},边距 = {2,2,2,2},左按钮 = "默认皮肤|滚动条_左按钮",右按钮 = "默认皮肤|滚动条_右按钮",水平滑块 = "默认皮肤|滚动条_水平滑块",上按钮 = "默认皮肤|滚动条_上按钮",下按钮 = "默认皮肤|滚动条_下按钮",垂直滑块 = "默认皮肤|滚动条_垂直滑块"},
}
名称类型必填说明例子
底图 文本false图片型资源标识,滚动条背景示例图片
九宫 tablefalse背景底图的九宫配置 {左,上,右,下}
边距 tablefalse滚动条中的上下左右按钮在滚动条中的内边距
左按钮 文本false图片型资源标识,滚动条左按钮,三态按钮示例图片
右按钮 文本false图片型资源标识,滚动条右按钮,三态按钮示例图片
上按钮 文本false图片型资源标识,滚动条上按钮,三态按钮示例图片
下按钮 文本false图片型资源标识,滚动条下按钮,三态按钮示例图片
水平滑块 文本false图片型资源标识,一个状态示例图片
垂直滑块 文本false图片型资源标识,一个状态示例图片

✨ 组合框皮肤

控件皮肤 = {
    组合框 = {字体="宋体12",行高=16,底图="默认皮肤|滚动条_底图",焦点背景色=RGBA(255,255,255,80),九宫={6,6,6,6},内边距={4,0,4,0},按钮底图="默认皮肤|组合框按钮",滚动条皮肤="滚动条"},
}
名称类型必填说明例子
字体 文本true文字素材标识
行高 整数false下拉列表项目的单行高度
焦点背景色 RGBAfalse下拉列表项目的焦点背景色
底图 文本false图片型资源标识,组合框背景示例图片
九宫 tablefalse背景底图的九宫配置 {左,上,右,下}
内边距 tablefalse影响项目文字,提示背景的显示位置
按钮底图 文本false右侧的单图按钮示例图片
滚动条皮肤 文本false不填表示使用缺省皮肤

✨ 输入框皮肤

控件皮肤 = {
	输入框 = {背景色=RGBA(10, 10, 10, 255),边框色=RGBA(100, 100, 100, 255),边框宽度=1,字体="宋体12",内边距={6,0,6,0},默认文本色 = 0xFFFFFFFF,选中背景色 = 0x0000FFFF ,闪烁光标色 = 0xFFFFFFFF,圆角半径 = 4,圆角边数 = 8}
}
名称类型必填说明
背景色 RGBAtrue
边框色 RGBAtrue
边框宽度 整数true
内边距 tablefalse{左,上,右,下}
字体 文本true文字素材标识
默认文本色 RGBAtrue
选中背景色 RGBAtrue
闪烁光标色 RGBAtrue
圆角半径 整数true
圆角边数 整数true

✨ 选择夹皮肤

控件皮肤 = {
    选择夹 = {
			边框宽度 = 1,
			边框色 = RGBA(60,60,60,255),
			背景色 = RGBA(30,30,30,255),
			圆角半径 = 0,
			圆角边数 = 0,
			字体="宋体12",
			文字间距=1,
			表头底图="默认皮肤|子夹表头",
			表头九宫={8,8,8,8},
			表头内边距={6,6,6,6},
			表头背景默认色 = RGBA(60,60,60,255),
			表头背景选中色 = RGBA(120,120,120,255),
			表头边框色 = RGBA(200,200,200,255),
			表头边框宽度 = 1,
			表头标题默认色 = RGBA(240,240,240,255),
			表头标题选中色 = RGBA(222,222,0,255),
			表头标题描边色 = RGBA(0,0,0,200),
			表头选中偏移 = 0,
			表头间距 = 1
		},
}
名称类型必填说明例子
边框宽度 整数false内容区域的边框
边框色 RGBAfalse内容区域的边框色
背景色 RGBAfalse内容区域的背景色
圆角半径 整数false内容区域的圆角半径
圆角边数 整数false内容区域的圆角边数
字体 文本false表头的标题字体
文字间距 整数false表头标题的文字间距
表头底图 文本false图片型资源标识,表头的两态背景示例图片
表头九宫 tablefalse表头图片的九宫配置 {左,上,右,下}
表头内边距 tablefalse表头标题的内边距
表头标题默认色 RGBAfalse
表头标题选中色 RGBAfalse
表头标题描边色 RGBAfalse
表头选中偏移 整数false子夹被选中后,表头的Y轴位置偏移
表头间距 整数false
表头背景默认色 RGBAfalse无底图时起效
表头背景选中色 RGBAfalse无底图时起效
表头边框色 RGBAfalse无底图时起效
表头边框宽度 整数false无底图时起效

✨ 列表框皮肤

控件皮肤 = {
    列表框 = {
			表头默认背景色 = 0x1e2a3aff,
			表头默认文本色 = 0xe9ecefff,
			表项默认背景色 = 0x2d3748ff,
			表项焦点背景色 = 0x4a556866,
			表项选中背景色 = 0x2563ebff,
			表项默认文本色 = 0xedf2f7ff,
			表项焦点文本色 = 0xedf2f7ff,
			表项选中文本色 = 0xedf2f7ff,
            边框色 = 0x787878ff,
            背景色 = 0x202020ff,
			网格色 = 0xeeeeee66,
			表头高度 = 22,
            表项高度 = 22,
            边框宽度 = 1,
            圆角半径 = 4,
            圆角边数 = 8
		},
}
名称类型必填说明例子
表头默认背景色 RGBAfalse
表头默认文本色 RGBAfalse
表项默认背景色 RGBAfalse
表项焦点背景色 RGBAfalse
表项选中背景色 RGBAfalse
表项默认文本色 RGBAfalse
表项焦点文本色 RGBAfalse
表项选中文本色 RGBAfalse
边框色 RGBAfalse
背景色 RGBAfalse
网格色 RGBAfalse
边框宽度 整数false
圆角半径 整数false
圆角边数 整数false
表头高度 整数false
表项高度 整数false
字体 文本false

✨ 菜单皮肤

控件皮肤 = {
    菜单 = {
		最小宽度 = 120,
		内边距 = {4,4,4,4},
		圆角半径 = 0,
		圆角边数 = 0,
		边框宽度 = 1,
		字体 = "宋体12",
		间距 = 1,
		行距 = 2,
		行高 = 20,
		边框色 = RGBA(80,80,80,255),
		背景色 = RGBA(40,40,40,255),
		标题默认色 = RGBA(210,210,210,255),	-- 文本色
		标题禁用色 = RGBA(120,120,120,255),	-- 禁用色
		标题焦点色 = RGBA(240,240,240,255),	-- 点燃色
		背景焦点色 = RGBA(66,66,66,255), -- 焦点色

	},
}
名称类型必填说明例子
最小宽度 整数false
内边距 tablefalse{左,上,右,下}
圆角半径 整数false
圆角边数 整数false
边框宽度 整数false
字体 文本true文字素材标识
间距 整数true文字间距
行距 整数true文字行距
行高 整数true菜单项目高度
边框色 RGBAfalse
背景色 RGBAfalse
标题默认色 RGBAfalse
标题禁用色 RGBAfalse
标题焦点色 RGBAfalse
背景焦点色 RGBAfalse

✨ 气泡皮肤

控件皮肤 = {
	气泡 = {底图 = "默认皮肤|通用气泡底图",九宫 = {6,6,6,6},最大宽度=158,边距={8,8,8,8},字体="宋体12",间距=2,行距=2,显示模式=1,透明度=160},
}
名称类型必填说明
字体 文本true文字素材标识
间距 整数true文字间距
行距 整数true文字行距
底图 文本true图片型资源标识
九宫 tabletrue{左,上,右,下}
边距 tabletrue{左,上,右,下}
最大宽度 整数true超出后会自动换行
跟随鼠标 逻辑true是否跟随鼠标移动 默认：false
透明度 整数true0-255 越小越透明
显示模式 整数true
模式位置效果
0 底部对齐 + 水平居中

示例图片

1 底部对齐

示例图片

2 顶部对齐

示例图片

3 垂直居中

示例图片