Dismiss Notice
60,000 passwords have been reset on July 8, 2019. If you cannot login, read this.

UI: What are BACKDROPs?

Discussion in 'JASS/AI Scripts Tutorials' started by Tasyen, Jun 1, 2019.

Tags:
  1. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,690
    Resources:
    37
    Tools:
    2
    Maps:
    3
    Spells:
    11
    Tutorials:
    20
    JASS:
    1
    Resources:
    37

    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.
    Code (vJASS):
    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.
    Code (vJASS):
    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 (Text):
    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.
    Code (vJASS):
    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


     

    Attached Files:

    Last edited by a moderator: Oct 10, 2020
  2. The_Silent

    The_Silent

    Joined:
    Feb 4, 2008
    Messages:
    3,047
    Resources:
    164
    Models:
    53
    Icons:
    90
    Packs:
    8
    Skins:
    12
    Maps:
    1
    Resources:
    164
    This is all very abstract. Could you attack a working example?
     
  3. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,690
    Resources:
    37
    Tools:
    2
    Maps:
    3
    Spells:
    11
    Tutorials:
    20
    JASS:
    1
    Resources:
    37
    Do you mean an example for using "BlzFrameSetTexture"? Or showing that in frame definition of a existing BACKDROP, or both?
     
  4. The_Silent

    The_Silent

    Joined:
    Feb 4, 2008
    Messages:
    3,047
    Resources:
    164
    Models:
    53
    Icons:
    90
    Packs:
    8
    Skins:
    12
    Maps:
    1
    Resources:
    164
    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.
     
    Last edited: Jun 4, 2019
  5. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,690
    Resources:
    37
    Tools:
    2
    Maps:
    3
    Spells:
    11
    Tutorials:
    20
    JASS:
    1
    Resources:
    37
    The example is only an Backdrop/image with no interactivity, But okay will add custom fdf, code and map.
     
  6. The_Silent

    The_Silent

    Joined:
    Feb 4, 2008
    Messages:
    3,047
    Resources:
    164
    Models:
    53
    Icons:
    90
    Packs:
    8
    Skins:
    12
    Maps:
    1
    Resources:
    164
    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.
     
  7. rolandc85

    rolandc85

    Joined:
    Jan 2, 2019
    Messages:
    3
    Resources:
    0
    Resources:
    0
    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?
     
  8. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,690
    Resources:
    37
    Tools:
    2
    Maps:
    3
    Spells:
    11
    Tutorials:
    20
    JASS:
    1
    Resources:
    37
    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.
     
  9. Donach

    Donach

    Joined:
    Jan 12, 2011
    Messages:
    98
    Resources:
    1
    Tutorials:
    1
    Resources:
    1
    Hey Tasyen,
    Is it possible to create a circular backdrop/frame? Have you tried?

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

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,690
    Resources:
    37
    Tools:
    2
    Maps:
    3
    Spells:
    11
    Tutorials:
    20
    JASS:
    1
    Resources:
    37
    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.
     
  11. Kazeon

    Kazeon

    Joined:
    Oct 12, 2011
    Messages:
    3,296
    Resources:
    38
    Icons:
    2
    Tools:
    1
    Maps:
    7
    Spells:
    21
    Tutorials:
    3
    JASS:
    4
    Resources:
    38
    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?
     
  12. The_Silent

    The_Silent

    Joined:
    Feb 4, 2008
    Messages:
    3,047
    Resources:
    164
    Models:
    53
    Icons:
    90
    Packs:
    8
    Skins:
    12
    Maps:
    1
    Resources:
    164
    You cannot make ui beyond the non-hd ui borders it seem.
     
  13. Kazeon

    Kazeon

    Joined:
    Oct 12, 2011
    Messages:
    3,296
    Resources:
    38
    Icons:
    2
    Tools:
    1
    Maps:
    7
    Spells:
    21
    Tutorials:
    3
    JASS:
    4
    Resources:
    38
    Well, simple status bar can. Maybe it's just for simple frames? Haven't checked that...
     
  14. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,690
    Resources:
    37
    Tools:
    2
    Maps:
    3
    Spells:
    11
    Tutorials:
    20
    JASS:
    1
    Resources:
    37
    SIMPLEFRAME have texture childs to display blp. Texture can not be a mainFrame.
    Code (Text):

    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.
     
  15. Kazeon

    Kazeon

    Joined:
    Oct 12, 2011
    Messages:
    3,296
    Resources:
    38
    Icons:
    2
    Tools:
    1
    Maps:
    7
    Spells:
    21
    Tutorials:
    3
    JASS:
    4
    Resources:
    38
    Can SIMPLEFRAME have events?
     
  16. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,690
    Resources:
    37
    Tools:
    2
    Maps:
    3
    Spells:
    11
    Tutorials:
    20
    JASS:
    1
    Resources:
    37
    only SIMPLEBUTTON & SIMPLECHECKBOX but for both only the needed click events.
     
  17. xorkatoss

    xorkatoss

    Joined:
    Jul 12, 2010
    Messages:
    1,590
    Resources:
    7
    Models:
    5
    Maps:
    1
    Spells:
    1
    Resources:
    7
    "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?
     
  18. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,690
    Resources:
    37
    Tools:
    2
    Maps:
    3
    Spells:
    11
    Tutorials:
    20
    JASS:
    1
    Resources:
    37
    You also have to remove/disable the other lines setting values for the border/Edge, in the fdf.
    BackdropCornerFlags
    BackdropCornerSize

    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.

    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.
     
  19. xorkatoss

    xorkatoss

    Joined:
    Jul 12, 2010
    Messages:
    1,590
    Resources:
    7
    Models:
    5
    Maps:
    1
    Spells:
    1
    Resources:
    7
    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:
    Code (vJASS):

    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 (Text):

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

    Attached Files:

  20. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,690
    Resources:
    37
    Tools:
    2
    Maps:
    3
    Spells:
    11
    Tutorials:
    20
    JASS:
    1
    Resources:
    37
    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.