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

最新推荐文章于 2022-03-05 04:12:52 发布
最新推荐文章于 2022-03-05 04:12:52 发布
阅读量2.6w 收藏 44
点赞数 14
分类专栏： FDF 文章标签： 魔兽争霸3 FDF UI教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CarlosX/article/details/89161467
版权

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

文章目录

推荐大家使用 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

CarlosX
关注
  • 14
    点赞
  • 踩
  • 44
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
[魔兽争霸制图 UI位置]
weixin_43261514的博客
03-20 5433
#[魔兽争霸制图 UI位置] 记录一下自己的学习 T的怎么弄就不用讲了,点点点把 主要是给参数的时候 jass和T是通用的 [Jass]里面调节窗口位置的函数有两个 DzAPI.j中就有 // 设置窗体相对位置 // @param point [0:左上|1:上|2:右上|3:左|4:中|5:右|6:左下|7:下|8:右下] // @param relativeFrame 相对容器,一般使用DzGetGameUI() frame窗体会根据relativeFrame确定自己的位置，当relativeFram
零起点魔兽争霸3UI布局编辑器 预览版
wuchunlin570的博客
01-25 2990
画了几天的时间写了一个魔兽地图的自定义UI的工具，为今后的魔兽地图之路铺个垫吧。 零起点魔兽争霸3UI布局编辑器 目前完成的功能 移动和缩放 父子关系和锚点 设置图片 设置背景 保存项目 读取项目 未来可能会完成的功能 对象锁，主要是锁定不在修改的节点 代码生成，生命fdf文件或jass文件吧 ...
JAVA制作的WAR3 LOADING界面UI
06-21
JAVA制作的WAR3 LOADING界面UI，只是一个界面
mdlvis 魔兽模型编辑器
04-03
mdlvis是一款主要用于提取魔兽世界的模型的小软件。
【UEFI基础】FDF文件
热门推荐
jiangwei0512的博客
11-03 1万+
【UEFI基础】FDF文件。
War3Fdf - VsCode插件,自动补全,语法高亮,函数翻译
Carlos
02-26 4165
VsCode 商店搜索War3Fdf，支持fdf文件 自动补全，语法高亮，自动化模板，悬停提示 VsCode 下载地址，然后商店搜索Carlos War3Fdf即可找到插件
fdf
weixin_30571465的博客
05-30 102
fsdafdsafd 转载于:https://www.cnblogs.com/halfmanontheway/p/10952179.html
FDF
guohonggang1234的专栏
04-19 429
DFDFDFDF 
【Unity】UI界面鼠标悬停时显示文本（用GUI.Box实现），以及Font.GetCharacterInfo的正确用法
weixin_44733774的博客
03-05 8802
就这悬浮文本(hint)功能，我搞几小时，各种搜，可能是我姿势不对，不应该用必应，应该学巨佬用谷歌gayhub之类的。 为了节省大家的时间，我把关键内容放前面，博客后面的内容反正也就个人的牢骚没啥作用。 演示效果： using UnityEngine; using UnityEngine.EventSystems; public class XJ_UIHint : MonoBehaviour,IPointerEnterHandler, IPointerExitHandler { public F
滚动条-可滚动文字的窗口
ToCpp的专栏
05-30 1096
      就像玩War3时对不死族的恐惧一样，做界面时一直都不想去涉及滚动条，借端午节狠下心来把滚动条又看了一遍，再一次印证实践才是真理，把对滚动条的理解写下来，以便于以后查阅。 上图是MSDN中对滚动条的描述，很直观，而滚动条相关的消息也不多最常用的也就是WM_VSCROLL和WM_HSCROLL，这两个消息的LOWORD (wParam)参数对应了一系列Request Code：
魔兽地图编辑器使用手册--入门教程
07-07
魔兽地图编辑器使用手册--入门教程，教你这么制作自己的魔兽地图
fdf阅读器最新版本很好用
09-29
fdf替代软件，大家喜欢就下吧皇家咖啡馆非结构化给开户行卡
NFTS:NFTS 一个魔兽争霸编辑器ui+jass的函数库收集和发布平台
05-02
NFTS 一个魔兽争霸编辑器ui+jass的函数库收集和发布平台 版权信息 1.作者：9527 2.不提供任何破解服务，也不可能被破解，别费心了。 说明 本仓库可以直接拉下来F7编译无任何错误和暗坑，所有的代码错误已经被修复，原作者写的不规范的地方部分修改。 安装3次超时？ 问csdn去吧，不是软件本身的问题。 已经解决（光速打自己脸） 为什么我要逆了发布上来呢？ 我也不知道啊！
edk-ii-fdf-specification_edk-ii-fdf-spec_effortjxg_edkfdf_
09-28
本文件主要探讨了FDF文件的结构、语法以及如何使用它来指导固件映像的生成流程。 一、FDF文件概述 FDF文件是一种基于文本的配置文件，其格式类似于INI文件，用于描述固件构建的目标、组件和属性。它为构建系统提供...
fdf:FDF：查找重复的文件-开源
05-03
在驱动器（可能带有其他已安装的驱动器）中搜索重复的文件，并输出潜在的脚本以在编辑后将其删除。
DemoCSDN.w3x
02-22
DemoCSDN.w3x
nodejs-fdf:使用 nodejs 创建 FDF 文件
06-25
nodejs-fdf 使用 nodejs 创建 FDF 文件如何安装这个模块？ 首先你必须安装 node-gyp npm -g install node-gyp rebuild之后，您可以安装 fdf 模块 git clone ...
3D-FdF.zip
09-17
压缩包中的"FdF-master"可能是项目源代码或资源的主目录，可能包含了实现3D线框查看器所需的代码、模型文件和其他相关资源。 总的来说，"3D-FdF.zip" 项目旨在让学生掌握3D建模的基本概念和技术，通过创建3D线框...
【原创】C# war3 巨魔精灵 minimap
weixin_30432579的博客
08-10 196
弃坑LOL后,无聊的时候玩玩 war3的RPG地图,巨魔与精灵. 玩了一段时间精灵....然后玩魔结果总是找不到人.所以就有了这个想法. 代码纯粹靠搬运. 说下原理,网上有份代码,可以查看当前选中目标的信息和单位地址, 根据观察发现每个地址相隔固定长度. 那么选中玩家列表里面最上面的单位, 然后再遍历 根据偏移不断++ -- 判断名称为u000 的单位就是精灵 H000 就...
ug10.0教程 fdf下载
最新发布
10-25
UG10.0是一种用于计算机辅助设计和制造的软件，它被广泛应用于工程设计、汽车制造、航空航天等行业。UG10.0教程则是针对UG10.0软件的学习材料，旨在教授用户如何使用UG10.0来进行各种设计和制造任务。 FDF是UG10.0软件的一种文件格式，用于保存UG10.0的图形数据和工作流程。FDF文件可以方便地共享和传输，同时也可以在其他UG版本或兼容软件上打开和编辑。 要下载UG10.0教程和FDF文件，您可以通过以下步骤进行： 1. 在网络搜索引擎中输入“UG10.0教程 FDF下载”。 2. 点击相关搜索结果中的链接，找到可靠的来源。 3. 在该网站上查找UG10.0教程和FDF文件的下载链接。 4. 点击下载链接，选择保存文件的位置。 5. 等待下载完成，然后将文件保存到您希望存储的目录中。 注意：在下载任何文件前，务必确保您选择的来源是可信的，并且下载的文件不含有病毒或恶意软件。 希望这个回答能够帮助您下载到UG10.0教程和FDF文件，并能够顺利学习和使用UG10.0软件！
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值