[War3]Fdf文件详解,简单的UI教程演示 - 魔兽争霸3

本文章内容记录博主的研究,供大家学习,转载注明出处

推荐大家使用 VsCode - War3插件 函数翻译,自动补全等 移步这里 https://blog.csdn.net/CarlosX/article/details/104515765

演示图环境:1.27(T) 基于Tag类型创建方便演示
Fdf通用1.27 ~ 1.32

函数的作用和解释可以去我的VsCode插件里面查看,这里就不解释了
UI交流群:882583418

正在设计一款可视化交互软件(有生之年系列)
可以加群给我提供需求,目前只是一个Demo
在这里插入图片描述

BACKDROP 背景

是否响应鼠标事件: No
演示 - 创建一个平铺的背景不带边框 宽100 高50
在这里插入图片描述
代码

//创建一个平铺的背景不带边框 宽100 高50
Frame "BACKDROP" "Demo_NoneBack" 
{
    Width 0.0625,
    Height 0.03125,

    BackdropTileBackground,
    BackdropBackground "ReplaceableTextures\TeamColor\TeamColor04.blp",
    BackdropBlendAll,
}

演示 - 创建一个固定大小的背景 宽64 高64
在这里插入图片描述
代码

//创建一个固定大小的背景 宽64 高64
Frame "BACKDROP" "Demo_SizeBack" 
{
    Width 0.04,
    Height 0.04,

    BackdropBackground "ReplaceableTextures\CommandButtons\BTNOrbOfDarkness.blp",
    BackdropBlendAll,
}

演示 - 创建一个带边框的背景 宽100 高50
在这里插入图片描述
代码

//创建一个带边框的背景 宽100 高50
Frame "BACKDROP" "Demo_BorderBack" 
{
    Width 0.0745,
    Height 0.04325,

    BackdropTileBackground,
    BackdropBackground  "UI\Widgets\ToolTips\Human\human-tooltip-background.blp",
    BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
    BackdropCornerSize  0.012,
    BackdropBackgroundSize  0.032,
    BackdropBackgroundInsets 0.004f 0.004f 0.004f 0.004f,
    BackdropEdgeFile  "UI\Widgets\ToolTips\Human\human-tooltip-border.blp",
    BackdropBlendAll,
}

BUTTON 按钮

同类控件 TEXTBUTTON
GLUETEXTBUTTON GLUEBUTTON(带声音)
代码很长,没关系,后面会用到继承,复用会方便很多

是否响应鼠标事件: Yes
演示 - 创建一个普通技能按钮 带有悬停高亮,按下,禁用,选中状态 宽64 高64
在这里插入图片描述
代码

//创建一个普通技能按钮 带有悬停高亮,按下,禁用,选中状态 宽64 高64 
Frame "BUTTON" "Demo_Button"
{
    Width 0.04,
    Height 0.04,
    //设置样式 悬停高亮                 可获取鼠标焦点 HIGHLTGHTONFOCUS
	ControlStyle "AUTOTRACK|HIGHLIGHTONMOUSEOVER",

    //设置正常状态背景
    ControlBackdrop "Demo_ButtonBack",
    Frame "BACKDROP" "Demo_ButtonBack"
    {
        BackdropBackground  "ReplaceableTextures\CommandButtons\BTN3M1.blp",
        BackdropBlendAll,
    }
    //设置禁用状态下背景
    ControlDisabledBackdrop "Demo_ButtonDisBack",
    Frame "BACKDROP" "Demo_ButtonDisBack" 
    {
        BackdropBackground  "ReplaceableTextures\PassiveButtons\PASBTNEnvenomedSpear.blp",
        BackdropBlendAll,
    }
    //设置按下状态下背景
    ControlPushedBackdrop "Demo_ButtonPushedBack",
	Frame "Backdrop" "Demo_ButtonPushedBack" {
        BackdropBackground  "ReplaceableTextures\CommandButtonsDisabled\DISBTN3M1.blp",
        BackdropBlendAll,
    }
    //悬停鼠标高亮
	ControlMouseOverHighlight "Demo_ButtonHig",
	Frame "HIGHLIGHT" "Demo_ButtonHig" {
        HighlightType "FILETEXTURE",
        HighlightAlphaFile "UI\Widgets\EscMenu\Human\quest-button-highlight.blp",
        HighlightAlphaMode "ADD",
        /*LayerStyle "IGNORETRACKEVENTS", 用rgba创建一个颜色高亮蒙版
        HighlightColor 0.0 0.0 1.0 0.1,
        HighlightType "SHADE",*/
    }
    /*//鼠标焦点
	ControlFocusHighlight "Demo_ButtonFocusHig",
	Frame "HIGHLIGHT" "Demo_ButtonFocusHig"{
        HighlightType "FILETEXTURE",
        HighlightAlphaFile "UI\Widgets\Glues\GlueScreen-CampaignButton-KeyboardHighlight.blp",    
        HighlightAlphaMode "ADD",
    }*/


}

演示TEXTBUTTON - 创建一个文本居右下按钮 带有悬停高亮,按下,禁用 宽64 高64
在这里插入图片描述
代码

//创建一个文本居右下按钮 带有悬停高亮,按下,禁用 宽64 高64
Frame "TEXTBUTTON" "Demo_TextButton"
{
    Width 0.04,
    Height 0.04,

    //设置样式 悬停高亮                 可获取鼠标焦点 HIGHLTGHTONFOCUS
	ControlStyle "AUTOTRACK|HIGHLIGHTONMOUSEOVER",

    //设置正常状态背景
    ControlBackdrop "Demo_ButtonBack",
    Frame "BACKDROP" "Demo_ButtonBack"
    {
        BackdropBackground  "ReplaceableTextures\CommandButtons\BTN3M1.blp",
        BackdropBlendAll,
    }
    //设置禁用状态下背景
    ControlDisabledBackdrop "Demo_ButtonDisBack",
    Frame "BACKDROP" "Demo_ButtonDisBack" 
    {
        BackdropBackground  "ReplaceableTextures\PassiveButtons\PASBTNEnvenomedSpear.blp",
        BackdropBlendAll,
    }
    //设置按下状态下背景
    ControlPushedBackdrop "Demo_ButtonPushedBack",
	Frame "Backdrop" "Demo_ButtonPushedBack" {
        BackdropBackground  "ReplaceableTextures\CommandButtonsDisabled\DISBTN3M1.blp",
        BackdropBlendAll,
    }
    //悬停鼠标高亮
	ControlMouseOverHighlight "Demo_ButtonHig",
	Frame "HIGHLIGHT" "Demo_ButtonHig" {
        HighlightType "FILETEXTURE",
        HighlightAlphaFile "UI\Widgets\EscMenu\Human\quest-button-highlight.blp",
        HighlightAlphaMode "ADD",
    }
    //文本
    ButtonText "Demo_ButtonText",
	Frame "TEXT" "Demo_ButtonText"{
        DecorateFileNames,
        FrameFont "MasterFont", 0.015, "",
        //设置文本对齐右下
        FontJustificationH JUSTIFYRIGHT,
        FontJustificationV JUSTIFYBOTTOM,    
        FontFlags "FIXEDSIZE",
        FontColor 1.0 1.0 1.0 1.0,
        FontHighlightColor 1.0 1.0 1.0 1.0,
        FontDisabledColor 0.2 0.2 0.2 1.0,
        FontShadowColor 0.0 0.0 0.0 0.9,	
        FontShadowOffset 0.001 -0.001,	
        Text "W",
    }
}

EDITBOX 输入框

是否响应事件: Yes

演示 - 创建一个输入框 限制字数20
在这里插入图片描述
代码

//创建一个输入框 限制字数20
Frame "EDITBOX" "Demo_EditBox" 
{
    Width 0.18,
    Height 0.04,
    EditBorderSize 0.007,//设置边框大小
    EditCursorColor 1.0 1.0 1.0,//设置光标颜色

    ControlBackdrop "Demo_EditBoxBack",
    Frame "BACKDROP" "Demo_EditBoxBack" {
        BackdropTileBackground,
        BackdropBackground  "UI\Widgets\BattleNet\bnet-inputbox-back.blp",
        BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
        BackdropCornerSize  0.032,
        BackdropBackgroundInsets 0.004 0.004 0.004 0.004,
        BackdropEdgeFile  "UI\Widgets\BattleNet\bnet-inputbox-border.blp",
        BackdropBlendAll,
    }
}

SPRITE 模型

是否响应事件: No

同类控件 MODEL
这里用2D模型演示,支持3d模型需要修改模型为无阴影,缩放大小,修改角度为平面角度

演示 - 创建一个2d模型
在这里插入图片描述

//创建一个2d模型
Frame "SPRITE" "Demo_Sprite"
{
     BackgroundArt "UI\Glues\BattleNet\ProgressBar\BattlenetProgressBar.mdl",
}

SLIDER 滚动条

同类控件 SCROLLBAR

是否响应事件: Yes

演示 - 创建一个水平滚动条
在这里插入图片描述

//创建一个水平滚动条
Frame "SLIDER" "Demo_Slider" {
    Height 0.01,
    Width 0.23725,

    SliderMinValue 0,
    SliderMaxValue 1,
    SliderInitialValue 0,
    SliderStepSize 0.01,
    SliderLayoutHorizontal, //SliderLayoutVertical 设置为垂直滚动条

    //设置滚动条背景
    ControlBackdrop "Demo_SliderBackdrop",
    Frame "BACKDROP" "Demo_SliderBackdrop" {
        BackdropTileBackground,
        BackdropBackground  "UI\Widgets\Glues\GlueScreen-Slider-BackdropBackground.blp",
        BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
        BackdropCornerSize  0.008,
        BackdropBackgroundInsets 0.004 0.004 0.004 0.004,
        BackdropEdgeFile  "UI\Widgets\Glues\GlueScreen-Slider-BackdropBorder.blp",
        BackdropBlendAll,
    }
    //设置滚动条按钮
    SliderThumbButtonFrame "DemoSlider_Button",
    Frame "BUTTON" "DemoSlider_Button" {
        Width 0.016,
        Height 0.016,

        ControlBackdrop "DemoSlider_ButtonBackdrop",
        Frame "BACKDROP" "DemoSlider_ButtonBackdrop" {
            BackdropBlendAll,
            BackdropBackground  "UI\Widgets\Glues\SinglePlayerSkirmish-ScrollBarKnob.blp",
        }

        ControlDisabledBackdrop "DemoSlider_ButtonDisabledBackdrop",
        Frame "BACKDROP" "DemoSlider_ButtonDisabledBackdrop" {
            BackdropBlendAll,
            BackdropBackground  "UI\Widgets\Glues\SinglePlayerSkirmish-ScrollBarKnobDisabled.blp",
        }
    }
}

小技巧

获取原生控件

原生控件可以通过获取控件名字进行修改
通过控件名字和ID,下面我就简单的演示一下
其余原生控件也是这个技巧,比如攻击图标,护甲图标等

演示 - 控件类型(SIMPLEFRAME)隐藏单位面板 SimpleInfoPanelUnitDetail ID:0

文件路径:UI\SimpleInfoPanel.fdf
在这里插入图片描述
演示 - 控件类型(SIMPLEFRAME)隐藏训练单位面板 SimpleInfoPanelBuildingDetail ID:1

文件路径:UI\SimpleInfoPanel.fdf
在这里插入图片描述

自适应Tips

这个技巧必须固定宽,不算很大的缺点,原生Tips就是这样.

演示 具体实现在演示图
在这里插入图片描述
代码

//tips模板 背景模板
Frame "BACKDROP" "Demo_TipsBck"
{
    BackdropTileBackground,
    BackdropBackground  "UI\Widgets\ToolTips\Human\human-tooltip-background.blp",
    BackdropBlendAll,
}

这套是我之前做的TJ图,根据文本自适应宽高比上面那套更完美

在这里插入图片描述
未完待续…
演示图:百度网盘 提取码: t4w8

  • 14
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值