• QQ21031394

    工作时间

    周一至周五:9:30-18:30

    周末及节日:根据情况调休

  • 手机版二维码

    随时手机查素材

  • 扫描二维码

    加入官方QQ群

站长推荐
提百万 联盟管理员
  • 未知地域
  • 内测小天使

    内测期间为论坛做出突出贡献的会员
  • 优秀学员勋章

    通过近期表现由站长颁发
  • 优秀新人勋章

    通过近期表现由站长颁发
  • 高级学员勋章

    通过近期表现由站长颁发
  • 特级学员勋章

    通过近期表现由站长颁发
  • 天工合约会员

    拥有浏览和下载天工精品模型区权限
  • 3649发帖数
  • 1970主题数
  • 0关注数
  • 159粉丝

[War3]Fdf文件详解,简单的UI教程演示-by CarlosX

  [复制链接]
提百万 发表于 2020-4-1 15:27:47 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题 <
提莫作坊QQ群:提莫作坊www.tbwlm.cn

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
推荐大家使用 VsCode - War3插件 函数翻译,自动补全

20200226134840565.gif
VsCode 商店搜索War3Fdf,支持fdf文件 自动补全,语法高亮,自动化模板,悬停提示


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

BACKDROP 背景

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

20200311175540395.jpg

代码

  1. //创建一个平铺的背景不带边框 宽100 高50
  2. Frame "BACKDROP" "Demo_NoneBack"
  3. {
  4.     Width 0.0625,
  5.     Height 0.03125,
  6.     BackdropTileBackground,
  7.     BackdropBackground "ReplaceableTextures\TeamColor\TeamColor04.blp",
  8.     BackdropBlendAll,
  9. }
  10. ————————————————
  11. 版权声明:本文为CSDN博主「CarlosX」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
复制代码


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

20200311180408122.png

代码

  1. //创建一个固定大小的背景 宽64 高64
  2. Frame "BACKDROP" "Demo_SizeBack"
  3. {
  4.     Width 0.04,
  5.     Height 0.04,
  6.     BackdropBackground "ReplaceableTextures\CommandButtons\BTNOrbOfDarkness.blp",
  7.     BackdropBlendAll,
  8. }
  9. ————————————————
  10. 版权声明:本文为CSDN博主「CarlosX」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
复制代码


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

20200311181317678.jpg

代码

  1. //创建一个带边框的背景 宽100 高50
  2. Frame "BACKDROP" "Demo_BorderBack"
  3. {
  4.     Width 0.0745,
  5.     Height 0.04325,
  6.     BackdropTileBackground,
  7.     BackdropBackground  "UI\Widgets\ToolTips\Human\human-tooltip-background.blp",
  8.     BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
  9.     BackdropCornerSize  0.012,
  10.     BackdropBackgroundSize  0.032,
  11.     BackdropBackgroundInsets 0.004f 0.004f 0.004f 0.004f,
  12.     BackdropEdgeFile  "UI\Widgets\ToolTips\Human\human-tooltip-border.blp",
  13.     BackdropBlendAll,
  14. }
  15. ————————————————
  16. 版权声明:本文为CSDN博主「CarlosX」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
复制代码


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

是否响应鼠标事件: Yes
演示 - 创建一个普通技能按钮 带有悬停高亮,按下,禁用,选中状态 宽64 高64
20200311194729534.gif
代码
  1. //创建一个普通技能按钮 带有悬停高亮,按下,禁用,选中状态 宽64 高64
  2. Frame "BUTTON" "Demo_Button"
  3. {
  4.     Width 0.04,
  5.     Height 0.04,
  6.     //设置样式 悬停高亮                 可获取鼠标焦点 HIGHLTGHTONFOCUS
  7.         ControlStyle "AUTOTRACK|HIGHLIGHTONMOUSEOVER",
  8.     //设置正常状态背景
  9.     ControlBackdrop "Demo_ButtonBack",
  10.     Frame "BACKDROP" "Demo_ButtonBack"
  11.     {
  12.         BackdropBackground  "ReplaceableTextures\CommandButtons\BTN3M1.blp",
  13.         BackdropBlendAll,
  14.     }
  15.     //设置禁用状态下背景
  16.     ControlDisabledBackdrop "Demo_ButtonDisBack",
  17.     Frame "BACKDROP" "Demo_ButtonDisBack"
  18.     {
  19.         BackdropBackground  "ReplaceableTextures\PassiveButtons\PASBTNEnvenomedSpear.blp",
  20.         BackdropBlendAll,
  21.     }
  22.     //设置按下状态下背景
  23.     ControlPushedBackdrop "Demo_ButtonPushedBack",
  24.         Frame "Backdrop" "Demo_ButtonPushedBack" {
  25.         BackdropBackground  "ReplaceableTextures\CommandButtonsDisabled\DISBTN3M1.blp",
  26.         BackdropBlendAll,
  27.     }
  28.     //悬停鼠标高亮
  29.         ControlMouseOverHighlight "Demo_ButtonHig",
  30.         Frame "HIGHLIGHT" "Demo_ButtonHig" {
  31.         HighlightType "FILETEXTURE",
  32.         HighlightAlphaFile "UI\Widgets\EscMenu\Human\quest-button-highlight.blp",
  33.         HighlightAlphaMode "ADD",
  34.         /*LayerStyle "IGNORETRACKEVENTS", 用rgba创建一个颜色高亮蒙版
  35.         HighlightColor 0.0 0.0 1.0 0.1,
  36.         HighlightType "SHADE",*/
  37.     }
  38.     /*//鼠标焦点
  39.         ControlFocusHighlight "Demo_ButtonFocusHig",
  40.         Frame "HIGHLIGHT" "Demo_ButtonFocusHig"{
  41.         HighlightType "FILETEXTURE",
  42.         HighlightAlphaFile "UI\Widgets\Glues\GlueScreen-CampaignButton-KeyboardHighlight.blp",   
  43.         HighlightAlphaMode "ADD",
  44.     }*/
  45. }
  46. ————————————————
  47. 版权声明:本文为CSDN博主「CarlosX」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
复制代码


演示TEXTBUTTON - 创建一个文本居右下按钮 带有悬停高亮,按下,禁用 宽64 高64

2020031120003783.gif
  1. //创建一个文本居右下按钮 带有悬停高亮,按下,禁用 宽64 高64
  2. Frame "TEXTBUTTON" "Demo_TextButton"
  3. {
  4.     Width 0.04,
  5.     Height 0.04,
  6.     //设置样式 悬停高亮                 可获取鼠标焦点 HIGHLTGHTONFOCUS
  7.         ControlStyle "AUTOTRACK|HIGHLIGHTONMOUSEOVER",
  8.     //设置正常状态背景
  9.     ControlBackdrop "Demo_ButtonBack",
  10.     Frame "BACKDROP" "Demo_ButtonBack"
  11.     {
  12.         BackdropBackground  "ReplaceableTextures\CommandButtons\BTN3M1.blp",
  13.         BackdropBlendAll,
  14.     }
  15.     //设置禁用状态下背景
  16.     ControlDisabledBackdrop "Demo_ButtonDisBack",
  17.     Frame "BACKDROP" "Demo_ButtonDisBack"
  18.     {
  19.         BackdropBackground  "ReplaceableTextures\PassiveButtons\PASBTNEnvenomedSpear.blp",
  20.         BackdropBlendAll,
  21.     }
  22.     //设置按下状态下背景
  23.     ControlPushedBackdrop "Demo_ButtonPushedBack",
  24.         Frame "Backdrop" "Demo_ButtonPushedBack" {
  25.         BackdropBackground  "ReplaceableTextures\CommandButtonsDisabled\DISBTN3M1.blp",
  26.         BackdropBlendAll,
  27.     }
  28.     //悬停鼠标高亮
  29.         ControlMouseOverHighlight "Demo_ButtonHig",
  30.         Frame "HIGHLIGHT" "Demo_ButtonHig" {
  31.         HighlightType "FILETEXTURE",
  32.         HighlightAlphaFile "UI\Widgets\EscMenu\Human\quest-button-highlight.blp",
  33.         HighlightAlphaMode "ADD",
  34.     }
  35.     //文本
  36.     ButtonText "Demo_ButtonText",
  37.         Frame "TEXT" "Demo_ButtonText"{
  38.         DecorateFileNames,
  39.         FrameFont "MasterFont", 0.015, "",
  40.         //设置文本对齐右下
  41. FontJustificationH JUSTIFYRIGHT,
  42.         FontJustificationV JUSTIFYBOTTOM,   
  43.         FontFlags "FIXEDSIZE",
  44.         FontColor 1.0 1.0 1.0 1.0,
  45.         FontHighlightColor 1.0 1.0 1.0 1.0,
  46.         FontDisabledColor 0.2 0.2 0.2 1.0,
  47.         FontShadowColor 0.0 0.0 0.0 0.9,        
  48.         FontShadowOffset 0.001 -0.001,        
  49.         Text "W",
  50.     }
  51. }
  52. ————————————————
  53. 版权声明:本文为CSDN博主「CarlosX」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
复制代码


EDITBOX 输入框

是否响应事件: Yes

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

20200311204240961.gif

代码

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


SPRITE 模型

是否响应事件: No

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

演示 - 创建一个2d模型

20200311205318533.gif

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

SLIDER 滚动条同类控件 SCROLLBAR

是否响应事件: Yes

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

20200311210932300.gif

  1. //创建一个水平滚动条
  2. Frame "SLIDER" "Demo_Slider" {
  3.     Height 0.01,
  4.     Width 0.23725,
  5.     SliderMinValue 0,
  6.     SliderMaxValue 1,
  7.     SliderInitialValue 0,
  8.     SliderStepSize 0.01,
  9.     SliderLayoutHorizontal, //SliderLayoutVertical 设置为垂直滚动条
  10.     //设置滚动条背景
  11.     ControlBackdrop "Demo_SliderBackdrop",
  12.     Frame "BACKDROP" "Demo_SliderBackdrop" {
  13.         BackdropTileBackground,
  14.         BackdropBackground  "UI\Widgets\Glues\GlueScreen-Slider-BackdropBackground.blp",
  15.         BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
  16.         BackdropCornerSize  0.008,
  17.         BackdropBackgroundInsets 0.004 0.004 0.004 0.004,
  18.         BackdropEdgeFile  "UI\Widgets\Glues\GlueScreen-Slider-BackdropBorder.blp",
  19.         BackdropBlendAll,
  20.     }
  21.     //设置滚动条按钮
  22.     SliderThumbButtonFrame "DemoSlider_Button",
  23.     Frame "BUTTON" "DemoSlider_Button" {
  24.         Width 0.016,
  25.         Height 0.016,
  26.         ControlBackdrop "DemoSlider_ButtonBackdrop",
  27.         Frame "BACKDROP" "DemoSlider_ButtonBackdrop" {
  28.             BackdropBlendAll,
  29.             BackdropBackground  "UI\Widgets\Glues\SinglePlayerSkirmish-ScrollBarKnob.blp",
  30.         }
  31.         ControlDisabledBackdrop "DemoSlider_ButtonDisabledBackdrop",
  32.         Frame "BACKDROP" "DemoSlider_ButtonDisabledBackdrop" {
  33.             BackdropBlendAll,
  34.             BackdropBackground  "UI\Widgets\Glues\SinglePlayerSkirmish-ScrollBarKnobDisabled.blp",
  35.         }
  36.     }
  37. }
  38. ————————————————
  39. 版权声明:本文为CSDN博主「CarlosX」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
复制代码
小技巧
获取原生控件
原生控件可以通过获取控件名字进行修改
通过控件名字和ID,下面我就简单的演示一下
其余原生控件也是这个技巧,比如攻击图标,护甲图标等

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

文件路径:UI\SimpleInfoPanel.fdf

2020031212031445.gif

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


文件路径:UI\SimpleInfoPanel.fdf

20200312120658777.gif


自适应Tips
这个技巧必须固定宽,不算很大的缺点,原生Tips就是这样.
演示 具体实现在演示图
20200312123030667.gif
代码
  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图,根据文本自适应宽高比上面那套更完美
20200312123211405.gif


演示图: DemoCSDN.w3x (24.12 KB, 下载次数: 461)



[发帖际遇]: 提百万 在论坛发帖时没有注意,被老提莫摸去了 14 枚 绿钻. 幸运榜 / 衰神榜
楼主热帖
免责条款:本站仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。

本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。本站部分作品是由网友自主投稿和发布、编辑整理上传,对此类作品本站仅提供交流平台,不为其版权负责。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。

本网站所提供的信息,只供参考之用。本网站不保证信息的准确性、有效性、及时性和完整性。本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误,对用户或任何其他人士负任何直接或间接责任。在法律允许的范围内,本网站在此声明,不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。

精彩评论28

沃之文化 发表于 2020-4-1 15:33:14 | 显示全部楼层 <

这东西我收了!谢谢楼主!天工社区真好!
deathcn 发表于 2020-4-1 20:54:43 | 显示全部楼层 <
楼主发贴辛苦了,谢谢楼主分享!我觉得天工社区是注册对了!
子不语 发表于 2020-4-2 09:43:39 | 显示全部楼层 <
楼主发贴辛苦了,谢谢楼主分享!我觉得天工社区是注册对了!
子不语 发表于 2020-4-2 09:43:52 | 显示全部楼层 <

楼主太厉害了!楼主,I*老*虎*U!我觉得天工社区真是个好地方!
参与人数 1节操 -1 蓝钻 -10 贡献 -1 收起 理由
提百万 -1 -10 -1 请勿短时间内二连

查看全部评分总评分 : 节操 -1 蓝钻 -10 贡献 -1

haha7328 发表于 2020-4-5 21:51:12 | 显示全部楼层 <

这东西我收了!谢谢楼主!天工社区真好!
子不语 发表于 2020-4-8 14:41:47 | 显示全部楼层 <

既然你诚信诚意的推荐了,那我就勉为其难的看看吧!天工社区不走平凡路。
Secret放肆 发表于 2020-4-9 20:05:17 | 显示全部楼层 <
楼主发贴辛苦了,谢谢楼主分享!我觉得天工社区是注册对了!
来看看 发表于 2020-4-11 16:08:43 | 显示全部楼层 <

这个帖子不回对不起自己!我想我是一天也不能离开天工社区
根本停不下来 发表于 2020-4-26 11:22:43 | 显示全部楼层 <

这个帖子不回对不起自己!我想我是一天也不能离开天工社区

强调下版规的规定,如有恶意灌水从重处罚:
=====发表主题规则=======
1.主题内容请一定要附带预览图片,谢谢;
2.搬运来的东西请尽量不要卖钱!;
3.发帖有任何疑问请联系QQ21031394;
=====发表回复规则=======
1.禁止直接复制标题内容的;
2.禁止纯数字或者纯字母的;
3.禁止乱打一通文不对题;
4.禁止屠版和刷分行为;
第一次扣分处理,第二次扣分+警告,警告三次禁言三天,绝不手软,情况严重的直接封号,请大家珍惜自己的账号!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

猜你喜欢
天工维度唯一QQ群
786014245

欢迎进群交流,入群答案:编辑器

  • 官方在线客服

    QQ客服:小雪

    点击交谈

    QQ客服:砂糖

    点击交谈

    团队老大:荀公子

    商务合作
  • 上海市静安区共和新路4718号宏慧新汇园6号楼603室

  • 手机扫码查看手机版

    手机查找资源更方便

  • 扫一扫关注官方微信

    加入官方QQ群

Powered by 天天RPG&DZX3.4 ©2020-2021 Comsenz Inc.提百万设计( 沪ICP备18032615号-1 )营业执照