UI: What are BACKDROPs?

[Tasyen]

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.

name	arguments	info
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.0	in Tile mode, the size of each tile
BackdropBackground	FilePath only one "\"	main image
BackdropBackgroundInsets	real real real real	cuts 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.0	size of the border/edge.
BackdropEdgeFile	FilePath	the 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.
BackdropLeftFile	FilePath
BackdropCornerFile	FilePath
BackdropTopFile	FilePath
BackdropRightFile	FilePath
BackdropBottomFile	FilePath
BackdropBlendAll		use 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
BackdropMirrored		vertical, 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.

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.

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".

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.

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.

Changelog:

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

---

Other UI-Frame Tutorials

The following links might provide more insight into this subject.
UI: Change Lumber Text
[JASS/AI] - UI: Create a TextButton

[JASS/AI] - UI: Positionate Frames (important)
UI: toc-Files
UI: Reading a FDF
UI - The concept of Parent-Frames
[JASS/AI] - UI: FrameEvents and FrameTypes
UI: Frames and Tooltips

[JASS/AI] - UI: Creating a Bar
UI - Simpleframes

UI: What are BACKDROPs?
UI: GLUEBUTTON
UI: TEXTAREA the scrolling Text Frame
UI: EditBox - Text Input
[JASS/AI] - UI: Creating a Cam control

UI: Showing 3 Multiboards

UI: OriginFrames
Default Names for BlzGetFrameByName (Access to Existing game-Frames)
[JASS/AI] - UI: List - Default MainFrames (built in CreateAble)​

 

[The_Silent]

This is all very abstract. Could you attack a working example?

 

[Tasyen]

Do you mean an example for using "BlzFrameSetTexture"? Or showing that in frame definition of a existing BACKDROP, or both?

 

[The_Silent]

Just the example of how you created the example in the picture ingame.
I have trouble initiating a framehandels with a backdrops. So a working example would be great.

 

[Tasyen]

The example is only an Backdrop/image with no interactivity, But okay will add custom fdf, code and map.

 

[The_Silent]

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.

 

[rolandc85]

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?

 

[Tasyen]

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.

 

[Donach]

Hey Tasyen,
Is it possible to create a circular backdrop/frame? Have you tried?

Cannot find any relevan information if anyone tried...
Thanks.

 

[Tasyen]

No, i did not try that. Maybe one would have to make the rect outside of the circle transparent. I mean blp support transparent behaviour from what I know.
Edit: Triggerhappy has shown an custom ui with circled Textures.

 

[Kazeon]

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?

(Inventory texture at bottom left corner)

The texture is supposed to look like this


Do you know a good replacement for backdrop, just for displaying simple texture, that doesnt have this problem?

 

[The_Silent]

You cannot make ui beyond the non-hd ui borders it seem.

 

[Kazeon]

Well, simple status bar can. Maybe it's just for simple frames? Haven't checked that...

 

[Tasyen]

SIMPLEFRAME have texture childs to display blp. Texture can not be a mainFrame.

Frame "SIMPLEFRAME" "SimpleBackground" {
       Texture "SimpleBackgroundTexture" {
           File "UI\Widgets\Console\Human\human-inventory-slotfiller.blp",
       }

}

One can repos the menu buttons out of the 4:3 Screen.

 

[Kazeon]

Can SIMPLEFRAME have events?

 

[Tasyen]

only SIMPLEBUTTON & SIMPLECHECKBOX but for both only the needed click events.

 

[xorkatoss]

"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?

 

[Tasyen]

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.

 

[xorkatoss]

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:

Spoiler: Code

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:

Spoiler: Text

Frame "BACKDROP" "MyBackdrop" {
    BackdropBackground  "ReplaceableTextures\CommandButtons\BTNHeroPaladin.blp",
}

 

[Tasyen]

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:

Spoiler: Code

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:

Spoiler: Text

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.

 

[xorkatoss]

@Tasyen woah thanks man

 

[SebioL]

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:

Ps. MipMaps always checked, this is important!

 

[Chaosy]

Approved. Useful much like the others.

 

[Tasyen]

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

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",
}

 

[q531620267]

Thank you for your tutorial. It helps me learn about UI. Do you have a list of other types of frame stats besides backdrop stats?

 

[Elprede]

@Tasyen Is it possible to change the border texture of a BACKDROP without a custom fdf file?

 

[Tasyen]

Thank you for your tutorial. It helps me learn about UI. Do you have a list of other types of frame stats besides backdrop stats?

Yes, on hive Tutorial [JASS/AI] - The Big UI-Frame Tutorial
Pastebin: The Big UI-Frame Tutorial
scroll down to Section FrameTypes that has some fdf stuff, (if it is done).

Or on github i have a not to frametypes connected list of fdf actions. FDF/Keywords at master · Tasyen/FDF

@Tasyen Is it possible to change the border texture of a BACKDROP without a custom fdf file?

I don't think so.

good luck.

 

[q531620267]

Yes, on hive Tutorial [JASS/AI] - The Big UI-Frame Tutorial
Pastebin: The Big UI-Frame Tutorial
scroll down to Section FrameTypes that has some fdf stuff, (if it is done).

Or on github i have a not to frametypes connected list of fdf actions. FDF/Keywords at master · Tasyen/FDF



I don't think so.

good luck.

thank you very much.