UI: What are BACKDROPs?

Level 26
Joined
Jul 18, 2010
Messages
1,813

Introduction

Backdrops mange the visual textures of frames, they are borders, backgrounds or images (for non simple frames). Most frames beeing more than simple text have backdrops that manage the textures beeing shown.

BACKDROP can use all the ImageTypes Warcraft 3 supports: BLP, TGA, DDS. DDS can only be used in Warcraft 3 V1.32+. For DDS the compression type matters, in my Test only DXT1/DXT5 worked (generated with GIMP).​

Jump to without fdf

BACKDROP FDF


These backdrop childs/subFrame get a stronger connection by declaring them as Control. Such control backdrops mimics the mainFrame in size and position, (if not said otherwise). The 2 most basic controlBackdrops are.

  • ControlBackdrop <name>,
    • <name> is the name of the frame beeing used, it also is most time declared right below the control line. This backdrop is used when the parentFrame is enabled and basicly every Frame has such a thing.
  • ControlDisabledBackdrop <name>,
    • backdrop when the parentFrame is disabled.

Some FrameTypes have more additional controlbackdrops.​

What are the Backdrop stats?


Backdrops can not have frameevents.
Backdrops are above simpleframes, hiding them.

nameargumentsinfo

DecorateFileNames
Look-Up FileNames in some String table (for example gameinterface)

BackdropTileBackground
Fills the Frame with tiles of the texture. Without the background file is stretched

BackdropBackgroundSize
0 to 1.0in Tile mode, the size of each tile

BackdropBackground
FilePath only one "\"main image

BackdropBackgroundInsets
real real real realcuts in the background from the frames outside, granting space between the edge and the background. Right Top Bottom Left. The numbers can be Negative to extend this side over the edge into the outside.

BackdropCornerFlags
"UL|UR|BL|BR|T|L|B|R"FRAMEPOINTS having borders (edgefile). Order does not matter

BackdropCornerSize
0.0 to 1.0size of the border/edge.

BackdropEdgeFile
FilePaththe border File, this texture having the border as fragments next to each other (gameinterface). You don't need the single ones if you have this one.
BackdropLeftFileFilePath
BackdropCornerFileFilePath
BackdropTopFileFilePath
BackdropRightFileFilePath
BackdropBottomFileFilePath
BackdropBlendAlluse transparency by alpha channels. An image with alpha channel transparency but without this will look wierd and wrong. It also allows to see the things behind the frame.
BackdropHalfSides
BackdropMirroredvertical, a face looking to the left will look with this option enabled to the right.

When changing textures with code most of that stuff becomes irrelevant and the backdrop can be empty except for the BackdropBackgroundSize, if one wants tile filling. One changes texture by code with this native.
JASS:
native BlzFrameSetTexture takes framehandle backdrop, string texFile, integer flag, boolean blend returns nothing
  • texFile the file one wants to use.
  • flag, 0 for stretched mode; 1 for tile mode.
  • blend has something to do with transparenz. (false) makes it look wierd, if the texture uses transparenz
Using BlzFrameSetTexture will drop the BackdropEdgeFile.​


Creating BACKDROPS without FDF

Creating just an Icons on the screen doesn't even need a fdf, one can create a BACKDROP using BlzCreateFrameByType, afterwards set texture, position and size of that BACKDROP and you have a visible image on the screen. Such a BACKDROP doesn't have a tile mod nor an additional edgefile/border.

The Example creating a backdrop with BlzCreateFrameByType is from xorkatoss.
JASS:
local framehandle blademaster = BlzCreateFrameByType("BACKDROP", "Blademaster", BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0), "", 0)
call BlzFrameSetSize(blademaster, 0.04, 0.04)
call BlzFrameSetAbsPoint(blademaster, FRAMEPOINT_CENTER, 0.4, 0.3)
call BlzFrameSetTexture(blademaster, "ReplaceableTextures\\CommandButtons\\BTNHeroBlademaster",0, true)

Example with FDF

This is the text of a custom BACKDROP. In side the fdf there are 2 Frames. "MyBackgroundTile" and "MyBackground".
Code:
Frame "BACKDROP" "MyBackdropTile" {
    //DecorateFileNames,
    BackdropTileBackground, //Fills the space with the background texture
    BackdropBackground  "ReplaceableTextures\CommandButtons\BTNHeroPaladin.blp",
 
    BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
    BackdropCornerSize  0.0125,
    BackdropBackgroundSize  0.02, //in tile mode, size of each tile
    BackdropBackgroundInsets 0.005 0.005 0.005 0.005,
    BackdropEdgeFile  "UI\Widgets\ToolTips\Human\human-tooltip-border.blp",
}

Frame "BACKDROP" "MyBackdrop" {
    BackdropBackground  "ReplaceableTextures\CommandButtons\BTNHeroPaladin.blp",
    BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
    BackdropCornerSize  0.0125,
    BackdropBackgroundInsets 0.005 0.005 0.005 0.005,
    BackdropEdgeFile  "UI\Widgets\ToolTips\Human\human-tooltip-border.blp",
}
This jasscode loads the custom toc loading the BACKDROPs in and creates 1 of both after 1 second passed. The tile version is at the left side of the screen. The Big image is at the center of the screen.
JASS:
function CreateBackdrops takes nothing returns nothing
   //Create the big face
   local framehandle fh = BlzCreateFrame("MyBackdrop", BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0),0, 0)
   call BlzFrameSetSize(fh, 0.1, 0.1)
   call BlzFrameSetAbsPoint(fh, FRAMEPOINT_CENTER, 0.4, 0.3)
 
   //Create the tile faces
   set fh = BlzCreateFrame("MyBackdropTile", BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0),0, 0)
   call BlzFrameSetSize(fh, 0.1, 0.1)
   call BlzFrameSetAbsPoint(fh, FRAMEPOINT_CENTER, 0.2, 0.3)
endfunction

//===========================================================================
function InitTrig_Backdrop takes nothing returns nothing
    set gg_trg_Backdrop = CreateTrigger(  )
    call TriggerRegisterTimerEventSingle( gg_trg_Backdrop, 1.00 )
    call TriggerAddAction( gg_trg_Backdrop, function CreateBackdrops )
   call LoadToc("war3mapimported\\mybackdrop.toc") //Loads the custom toc file
endfunction
The code will not create exactly the following images cause it is recreation, but the will look quite similar.
Stretched.jpg

Tiled.jpg


Changelog:
added missing statements to the table.
added a GoTo no Fdf, colored the Headlines and some formating.​


Other UI-Frame Tutorials

 

Attachments

  • MyBackdrop.w3x
    17.1 KB · Views: 391
Last edited by a moderator:
Thank you very much, that is fine. :)
It has taken some time for me to figure UI out, so even simple examples helps a ton.

My first working backdrop was literally a modification of the map you just uploaded. Took some time to realized everything was so fdf dependent, so had to dig through all the fdf files to find the type of ui elements that worked for me.



Also, incredibly annoying 'BlzFrameSetTexture' removes the edge file. Have to go with classic icon buttons for now. But I suppose a layered gluebutton definition where the edge is on another backdrop than the icon will eventually solve it. Unless blizzard fixes it first.
 
Level 1
Joined
Jan 2, 2019
Messages
3
In certain cases, we would want checkbox to be disabled after user first checked it. However, we don't want it to be grayed out. Can this be done?
 
Level 26
Joined
Jul 18, 2010
Messages
1,813
Yes, it can be done, although you might have to consider that the greying is a help for the user. It might confuse him to not be able to click a yellowed box.
A gluecheckbox has 5 backdrop childs each shows one part of the shown checkbox. There are multiple options. But what you want to do is make ControlDisabledBackdrop and ControlBackdrop be kinda equal. This are not the names of the frames you need to change. For the real names one would need to know which checkbox you are using.
  1. You define a custom checkbox which uses the same texture in disabled (ControlDisabledBackdrop) as in enabled (ControlBackdrop).
  2. After you disabled the checkbox change the texture of the backdrop showing the graybox to the same as the enabled one.
  3. swap visiblity for disabled/enabled backdrops.
 

Kazeon

Hosted Project: EC
Level 33
Joined
Oct 12, 2011
Messages
3,443
Backdrop seems to refuse to go below point zero. For instance if I set the position-x to something around -0.05 then the texture gets deformed. Why is that?
upload_2019-6-18_0-19-11.png
(Inventory texture at bottom left corner)

The texture is supposed to look like this
upload_2019-6-18_0-24-14.png

Do you know a good replacement for backdrop, just for displaying simple texture, that doesnt have this problem?
 
Level 18
Joined
Jul 12, 2010
Messages
1,644
"Backdrops can not have frameevents" so they can't be made click-able?

Question 1:
How can one remove the border aka "edgefile"?? I tried this: BackdropEdgeFile "",

but it gives an error, also completely removing the line gives an error

I guess the only way is to make a SimpleFrame instead??


Question 2:
I'm sure a lot of confused people will ask this question regarding UI Inventory Systems.

"Backdrops are above simpleframes, hiding them"

So if I understand this right, it means for example, if you make an inventory system you want to use Backdrops for the Inventory Background and the Item Icons.
Then you have to make SimpleFrames with substitute frames to show tooltips?

but how do you manage which backdrops are above which?

EDIT:
I checked your tutorials and I didn't find a way to make backdrops/simpleframes click-able?
can you cover that as well please?
 
Level 26
Joined
Jul 18, 2010
Messages
1,813
Question 1:
How can one remove the border aka "edgefile"?? I tried this: BackdropEdgeFile "",

but it gives an error, also completely removing the line gives an error

I guess the only way is to make a SimpleFrame instead??
You also have to remove/disable the other lines setting values for the border/Edge, in the fdf.
BackdropCornerFlags
BackdropCornerSize

So if I understand this right, it means for example, if you make an inventory system you want to use Backdrops for the Inventory Background and the Item Icons.
Then you have to make SimpleFrames with substitute frames to show tooltips?
No, Frames have good frametypes beeing able to show text: TEXT and TEXTAREA, it is not needed to use Simpleframes for that. My current available tutorials miss parts of the frame usage.

EDIT:
I checked your tutorials and I didn't find a way to make backdrops/simpleframes click-able?
can you cover that as well please?
I have such a tutorial, it was approved and moved into the jass section, Although I'd recommend using a (GLUE)BUTTON when one wants something clickable.
 
Level 18
Joined
Jul 12, 2010
Messages
1,644
hmm so after experimenting a bit I have come to the conculsion that you only need the .fdf files if you want "BackdropEdgeFile" or any other stuff.

You can actually create backdrops using only code:
JASS:
local framehandle blademaster = BlzCreateFrameByType("BACKDROP", "Blademaster", BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0), "", 0)
call BlzFrameSetSize(blademaster, 0.04, 0.04)
call BlzFrameSetAbsPoint(blademaster, FRAMEPOINT_CENTER, 0.4, 0.3)
call BlzFrameSetTexture(blademaster, "ReplaceableTextures\\CommandButtons\\BTNHeroBlademaster",0, true)

@Tasyen
I think this information might be useful to include in your tutorial since at first I thought that if you wanted just to make a basic backdrop you had to include .fdf and .toc files with this text to set the texture:
Code:
Frame "BACKDROP" "MyBackdrop" {
    BackdropBackground  "ReplaceableTextures\CommandButtons\BTNHeroPaladin.blp",
}
 

Attachments

  • Backdrop Test.w3x
    7.5 KB · Views: 221
Level 26
Joined
Jul 18, 2010
Messages
1,813
hmm so after experimenting a bit I have come to the conculsion that you only need the .fdf files if you want "BackdropEdgeFile" or any other stuff.

You can actually create backdrops using only code:
JASS:
local framehandle blademaster = BlzCreateFrameByType("BACKDROP", "Blademaster", BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0), "", 0)
call BlzFrameSetSize(blademaster, 0.04, 0.04)
call BlzFrameSetAbsPoint(blademaster, FRAMEPOINT_CENTER, 0.4, 0.3)
call BlzFrameSetTexture(blademaster, "ReplaceableTextures\\CommandButtons\\BTNHeroBlademaster",0, true)

@Tasyen
I think this information might be useful to include in your tutorial since at first I thought that if you wanted just to make a basic backdrop you had to include .fdf and .toc files with this text to set the texture:
Code:
Frame "BACKDROP" "MyBackdrop" {
    BackdropBackground  "ReplaceableTextures\CommandButtons\BTNHeroPaladin.blp",
}
yes, if one wants an normal image on the screen, creating the BACKDROP with BlzCreateFrameByType is the easiest way.
Edit: Added your Code into the tutorial mentioning you.
 
Level 9
Joined
May 19, 2020
Messages
272
For .DDS textures, you can use Paint.Net, you do not need a plugin, as it already has its own support for .DDS. You may not have all the tools and professional quality of Ps, but it is easily found, free, fast and light. Besides having tools very close to the main ones used in Ps.
Saving in these settings as I put below, will work perfectly in your Reforged:
upload_2020-9-17_11-56-15.png

Ps. MipMaps always checked, this is important!
 
Last edited:
Level 26
Joined
Jul 18, 2010
Messages
1,813
BackdropBackgroundInsets can be used to rotate an image, when Top&Bottom are as big as Height and Left&Right are as big as Width it rotates top to bottom
Code:
Frame "BACKDROP" "Test" {
    Width 0.1,
    Height 0.1,
    BackdropBackgroundInsets 0.1 0.1 0.1 0.1,
    SetPoint CENTER, "ConsoleUI", CENTER, 0, 0,
    BackdropBackground "ReplaceableTextures\CommandButtons\BTNFootman",
}
 

Attachments

  • Mirrored twice.jpg
    Mirrored twice.jpg
    8.3 KB · Views: 32
Top