天工维度魔兽争霸开发者社区-全国最大的TJ集中营-原提百万联盟

标题: [War3]Fdf文件详解，简单的UI教程演示-by CarlosX [打印本页]
作者: 提百万    时间: 2020-4-1 15:27
标题: [War3]Fdf文件详解，简单的UI教程演示-by CarlosX
推荐大家使用 VsCode - War3插件 函数翻译,自动补全

(, 下载次数: 79)
VsCode 商店搜索War3Fdf，支持fdf文件 自动补全，语法高亮，自动化模板，悬停提示


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

是否响应鼠标事件: No
演示 - 创建一个平铺的背景不带边框 宽100 高50

(, 下载次数: 67)

代码

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

  7.     BackdropTileBackground,
  8.     BackdropBackground "ReplaceableTextures\TeamColor\TeamColor04.blp",
  9.     BackdropBlendAll,
  10. }
  11. ————————————————
  12. 版权声明：本文为CSDN博主「CarlosX」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
复制代码


演示 - 创建一个固定大小的背景 宽64 高64

(, 下载次数: 81)

代码

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

  7.     BackdropBackground "ReplaceableTextures\CommandButtons\BTNOrbOfDarkness.blp",
  8.     BackdropBlendAll,
  9. }
  10. ————————————————
  11. 版权声明：本文为CSDN博主「CarlosX」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
复制代码


演示 - 创建一个带边框的背景 宽100 高50

(, 下载次数: 76)

代码

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

  7.     BackdropTileBackground,
  8.     BackdropBackground  "UI\Widgets\ToolTips\Human\human-tooltip-background.blp",
  9.     BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
  10.     BackdropCornerSize  0.012,
  11.     BackdropBackgroundSize  0.032,
  12.     BackdropBackgroundInsets 0.004f 0.004f 0.004f 0.004f,
  13.     BackdropEdgeFile  "UI\Widgets\ToolTips\Human\human-tooltip-border.blp",
  14.     BackdropBlendAll,
  15. }
  16. ————————————————
  17. 版权声明：本文为CSDN博主「CarlosX」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
复制代码


BUTTON 按钮同类控件 TEXTBUTTON
GLUETEXTBUTTON GLUEBUTTON(带声音)
代码很长,没关系,后面会用到继承,复用会方便很多
是否响应鼠标事件: Yes
演示 - 创建一个普通技能按钮 带有悬停高亮,按下,禁用,选中状态 宽64 高64
(, 下载次数: 83)
代码
  1. //创建一个普通技能按钮 带有悬停高亮,按下,禁用,选中状态 宽64 高64
  2. Frame "BUTTON" "Demo_Button"
  3. {
  4.     Width 0.04,
  5.     Height 0.04,
  6.     //设置样式 悬停高亮                 可获取鼠标焦点 HIGHLTGHTONFOCUS
  7.         ControlStyle "AUTOTRACK|HIGHLIGHTONMOUSEOVER",

  9.     //设置正常状态背景
  10.     ControlBackdrop "Demo_ButtonBack",
  11.     Frame "BACKDROP" "Demo_ButtonBack"
  12.     {
  13.         BackdropBackground  "ReplaceableTextures\CommandButtons\BTN3M1.blp",
  14.         BackdropBlendAll,
  15.     }
  16.     //设置禁用状态下背景
  17.     ControlDisabledBackdrop "Demo_ButtonDisBack",
  18.     Frame "BACKDROP" "Demo_ButtonDisBack"
  19.     {
  20.         BackdropBackground  "ReplaceableTextures\PassiveButtons\PASBTNEnvenomedSpear.blp",
  21.         BackdropBlendAll,
  22.     }
  23.     //设置按下状态下背景
  24.     ControlPushedBackdrop "Demo_ButtonPushedBack",
  25.         Frame "Backdrop" "Demo_ButtonPushedBack" {
  26.         BackdropBackground  "ReplaceableTextures\CommandButtonsDisabled\DISBTN3M1.blp",
  27.         BackdropBlendAll,
  28.     }
  29.     //悬停鼠标高亮
  30.         ControlMouseOverHighlight "Demo_ButtonHig",
  31.         Frame "HIGHLIGHT" "Demo_ButtonHig" {
  32.         HighlightType "FILETEXTURE",
  33.         HighlightAlphaFile "UI\Widgets\EscMenu\Human\quest-button-highlight.blp",
  34.         HighlightAlphaMode "ADD",
  35.         /*LayerStyle "IGNORETRACKEVENTS", 用rgba创建一个颜色高亮蒙版
  36.         HighlightColor 0.0 0.0 1.0 0.1,
  37.         HighlightType "SHADE",*/
  38.     }
  39.     /*//鼠标焦点
  40.         ControlFocusHighlight "Demo_ButtonFocusHig",
  41.         Frame "HIGHLIGHT" "Demo_ButtonFocusHig"{
  42.         HighlightType "FILETEXTURE",
  43.         HighlightAlphaFile "UI\Widgets\Glues\GlueScreen-CampaignButton-KeyboardHighlight.blp",   
  44.         HighlightAlphaMode "ADD",
  45.     }*/


  48. }
  49. ————————————————
  50. 版权声明：本文为CSDN博主「CarlosX」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
复制代码


演示TEXTBUTTON - 创建一个文本居右下按钮 带有悬停高亮,按下,禁用 宽64 高64
(, 下载次数: 82)
  1. //创建一个文本居右下按钮 带有悬停高亮,按下,禁用 宽64 高64
  2. Frame "TEXTBUTTON" "Demo_TextButton"
  3. {
  4.     Width 0.04,
  5.     Height 0.04,

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

  10.     //设置正常状态背景
  11.     ControlBackdrop "Demo_ButtonBack",
  12.     Frame "BACKDROP" "Demo_ButtonBack"

  14.     {
  15.         BackdropBackground  "ReplaceableTextures\CommandButtons\BTN3M1.blp",
  16.         BackdropBlendAll,
  17.     }
  18.     //设置禁用状态下背景
  19.     ControlDisabledBackdrop "Demo_ButtonDisBack",
  20.     Frame "BACKDROP" "Demo_ButtonDisBack"
  21.     {
  22.         BackdropBackground  "ReplaceableTextures\PassiveButtons\PASBTNEnvenomedSpear.blp",
  23.         BackdropBlendAll,
  24.     }
  25.     //设置按下状态下背景
  26.     ControlPushedBackdrop "Demo_ButtonPushedBack",
  27.         Frame "Backdrop" "Demo_ButtonPushedBack" {
  28.         BackdropBackground  "ReplaceableTextures\CommandButtonsDisabled\DISBTN3M1.blp",
  29.         BackdropBlendAll,
  30.     }
  31.     //悬停鼠标高亮
  32.         ControlMouseOverHighlight "Demo_ButtonHig",
  33.         Frame "HIGHLIGHT" "Demo_ButtonHig" {
  34.         HighlightType "FILETEXTURE",
  35.         HighlightAlphaFile "UI\Widgets\EscMenu\Human\quest-button-highlight.blp",
  36.         HighlightAlphaMode "ADD",
  37.     }
  38.     //文本
  39.     ButtonText "Demo_ButtonText",
  40.         Frame "TEXT" "Demo_ButtonText"{
  41.         DecorateFileNames,
  42.         FrameFont "MasterFont", 0.015, "",
  43.         //设置文本对齐右下
  44. FontJustificationH JUSTIFYRIGHT,
  45.         FontJustificationV JUSTIFYBOTTOM,   
  46.         FontFlags "FIXEDSIZE",
  47.         FontColor 1.0 1.0 1.0 1.0,
  48.         FontHighlightColor 1.0 1.0 1.0 1.0,
  49.         FontDisabledColor 0.2 0.2 0.2 1.0,
  50.         FontShadowColor 0.0 0.0 0.0 0.9,        
  51.         FontShadowOffset 0.001 -0.001,        
  52.         Text "W",
  53.     }
  54. }
  55. ————————————————
  56. 版权声明：本文为CSDN博主「CarlosX」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
复制代码


EDITBOX 输入框

是否响应事件: Yes

演示 - 创建一个输入框 限制字数20

(, 下载次数: 78)

代码

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

  9.     ControlBackdrop "Demo_EditBoxBack",
  10.     Frame "BACKDROP" "Demo_EditBoxBack" {
  11.         BackdropTileBackground,
  12.         BackdropBackground  "UI\Widgets\BattleNet\bnet-inputbox-back.blp",
  13.         BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
  14.         BackdropCornerSize  0.032,
  15.         BackdropBackgroundInsets 0.004 0.004 0.004 0.004,
  16.         BackdropEdgeFile  "UI\Widgets\BattleNet\bnet-inputbox-border.blp",
  17.         BackdropBlendAll,
  18.     }
  19. }
  20. ————————————————
  21. 版权声明：本文为CSDN博主「CarlosX」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
复制代码


SPRITE 模型

是否响应事件: No

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

演示 - 创建一个2d模型

(, 下载次数: 84)

  1. //创建一个2d模型
  2. Frame "SPRITE" "Demo_Sprite"
  3. {
  4.      BackgroundArt "UI\Glues\BattleNet\ProgressBar\BattlenetProgressBar.mdl",
  5. }
复制代码

SLIDER 滚动条同类控件 SCROLLBAR

是否响应事件: Yes

演示 - 创建一个水平滚动条

(, 下载次数: 68)

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

  6.     SliderMinValue 0,
  7.     SliderMaxValue 1,
  8.     SliderInitialValue 0,
  9.     SliderStepSize 0.01,
  10.     SliderLayoutHorizontal, //SliderLayoutVertical 设置为垂直滚动条

  12.     //设置滚动条背景
  13.     ControlBackdrop "Demo_SliderBackdrop",
  14.     Frame "BACKDROP" "Demo_SliderBackdrop" {
  15.         BackdropTileBackground,
  16.         BackdropBackground  "UI\Widgets\Glues\GlueScreen-Slider-BackdropBackground.blp",
  17.         BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
  18.         BackdropCornerSize  0.008,
  19.         BackdropBackgroundInsets 0.004 0.004 0.004 0.004,
  20.         BackdropEdgeFile  "UI\Widgets\Glues\GlueScreen-Slider-BackdropBorder.blp",
  21.         BackdropBlendAll,
  22.     }
  23.     //设置滚动条按钮
  24.     SliderThumbButtonFrame "DemoSlider_Button",
  25.     Frame "BUTTON" "DemoSlider_Button" {
  26.         Width 0.016,
  27.         Height 0.016,

  29.         ControlBackdrop "DemoSlider_ButtonBackdrop",
  30.         Frame "BACKDROP" "DemoSlider_ButtonBackdrop" {
  31.             BackdropBlendAll,
  32.             BackdropBackground  "UI\Widgets\Glues\SinglePlayerSkirmish-ScrollBarKnob.blp",
  33.         }

  35.         ControlDisabledBackdrop "DemoSlider_ButtonDisabledBackdrop",
  36.         Frame "BACKDROP" "DemoSlider_ButtonDisabledBackdrop" {
  37.             BackdropBlendAll,
  38.             BackdropBackground  "UI\Widgets\Glues\SinglePlayerSkirmish-ScrollBarKnobDisabled.blp",
  39.         }
  40.     }
  41. }
  42. ————————————————
  43. 版权声明：本文为CSDN博主「CarlosX」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
复制代码
小技巧
获取原生控件
原生控件可以通过获取控件名字进行修改
通过控件名字和ID,下面我就简单的演示一下
其余原生控件也是这个技巧,比如攻击图标,护甲图标等

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

文件路径：UI\SimpleInfoPanel.fdf

(, 下载次数: 73)

演示 - 控件类型(SIMPLEFRAME)隐藏训练单位面板 SimpleInfoPanelBuildingDetail ID：1


文件路径：UI\SimpleInfoPanel.fdf

(, 下载次数: 73)


自适应Tips
这个技巧必须固定宽,不算很大的缺点,原生Tips就是这样.
演示 具体实现在演示图
(, 下载次数: 100)
代码
  1. //tips模板 背景模板
  2. Frame "BACKDROP" "Demo_TipsBck"
  3. {
  4.     BackdropTileBackground,
  5.     BackdropBackground  "UI\Widgets\ToolTips\Human\human-tooltip-background.blp",
  6.     BackdropBlendAll,
  7. }
  8. ————————————————
  9. 版权声明：本文为CSDN博主「CarlosX」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
复制代码


这套是我之前做的TJ图,根据文本自适应宽高比上面那套更完美
(, 下载次数: 79)


演示图: (, 下载次数: 461)



作者: 沃之文化    时间: 2020-4-1 15:33

这东西我收了！谢谢楼主！天工社区真好！
作者: deathcn    时间: 2020-4-1 20:54
楼主发贴辛苦了，谢谢楼主分享！我觉得天工社区是注册对了！
作者: 子不语    时间: 2020-4-2 09:43
楼主发贴辛苦了，谢谢楼主分享！我觉得天工社区是注册对了！
作者: 子不语    时间: 2020-4-2 09:43

楼主太厉害了！楼主，I*老*虎*U！我觉得天工社区真是个好地方！
作者: haha7328    时间: 2020-4-5 21:51

这东西我收了！谢谢楼主！天工社区真好！
作者: 子不语    时间: 2020-4-8 14:41

既然你诚信诚意的推荐了，那我就勉为其难的看看吧！天工社区不走平凡路。
作者: Secret放肆    时间: 2020-4-9 20:05
楼主发贴辛苦了，谢谢楼主分享！我觉得天工社区是注册对了！
作者: 来看看    时间: 2020-4-11 16:08

这个帖子不回对不起自己！我想我是一天也不能离开天工社区。
作者: 根本停不下来    时间: 2020-4-26 11:22

这个帖子不回对不起自己！我想我是一天也不能离开天工社区。
作者: CGEX    时间: 2020-4-27 15:17

楼主太厉害了！楼主，I*老*虎*U！我觉得天工社区真是个好地方！
作者: a33583660    时间: 2020-4-30 17:40

楼主太厉害了！楼主，I*老*虎*U！我觉得天工社区真是个好地方！
作者: d792528257    时间: 2020-5-2 16:03

这个帖子不回对不起自己！我想我是一天也不能离开天工社区。
作者: wzdanwx1    时间: 2020-5-2 18:11

这个帖子不回对不起自己！我想我是一天也不能离开天工社区。
作者: 太极公子    时间: 2020-5-9 18:37

楼主太厉害了！楼主，I*老*虎*U！我觉得天工社区真是个好地方！
作者: xieming1314    时间: 2020-5-13 03:02
楼主发贴辛苦了，谢谢楼主分享！我觉得天工社区是注册对了！
作者: BYT_P    时间: 2020-5-15 00:36
楼主发贴辛苦了，谢谢楼主分享！我觉得天工社区是注册对了！
作者: BYT_P    时间: 2020-5-23 22:42
楼主发贴辛苦了，谢谢楼主分享！我觉得天工社区是注册对了！

这么厉害，收藏 收藏，谢谢大佬
作者: 念十三    时间: 2020-6-2 12:49

这个帖子不回对不起自己！我想我是一天也不能离开天工社区。
作者: Sun丶包子    时间: 2020-7-15 08:55
楼主发贴辛苦了，谢谢楼主分享！我觉得天工社区是注册对了！
作者: s475671405    时间: 2020-8-8 09:02
竞猜！！
作者: 天天维度    时间: 2020-8-17 23:36
这好像不是原贴
作者: pohuyhex    时间: 2020-10-11 14:15
这个帖子不回对不起自己！
作者: zravxpve    时间: 2021-1-15 23:12
学习是成功之母
作者: jjww748    时间: 2021-2-25 15:35
这是我在这个论坛看过最良心的帖子了. 其他的都是各种卖钻 丢一个图连说明都懒得写!!
作者: neko    时间: 2021-11-17 10:03
太棒啦！这玩意儿能学一个月
作者: 长粗硬久猛    时间: 2022-1-22 21:32
感谢分享 谢谢大佬！
作者: 1148172801    时间: 2022-2-6 21:59
这个帖子，必须顶！
作者: x1073    时间: 2022-4-26 16:50
这个帖子不回对不起自己！我想我是一天也不能离开天工社区



欢迎光临 天工维度魔兽争霸开发者社区-全国最大的TJ集中营-原提百万联盟 (http://bbs.mvprpg.com/) Powered by Discuz! X3.4