1. Updated Resource Submission Rules: All model & skin resource submissions must now include an in-game screenshot. This is to help speed up the moderation process and to show how the model and/or texture looks like from the in-game camera.
    Dismiss Notice
  2. DID YOU KNOW - That you can unlock new rank icons by posting on the forums or winning contests? Click here to customize your rank or read our User Rank Policy to see a list of ranks that you can unlock. Have you won a contest and still haven't received your rank award? Then please contact the administration.
    Dismiss Notice
  3. Lead your forces to battle in the 15th Techtree Contest. The call is yours, commander!
    Dismiss Notice
  4. The reforging of the races is complete. Come see the 14th Techtree Contest Results.
    Dismiss Notice
  5. It's time to choose your horse in the race - the 32nd Modeling Contest Poll is up!
    Dismiss Notice
  6. Check out the Staff job openings thread.
    Dismiss Notice
Dismiss Notice
60,000 passwords have been reset on July 8, 2019. If you cannot login, read this.

[JASS/AI] UI: Positionate Frames

Discussion in 'Tutorial Submission' started by Tasyen, May 29, 2019.

  1. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,524
    Resources:
    18
    Tools:
    2
    Maps:
    3
    Spells:
    8
    Tutorials:
    4
    JASS:
    1
    Resources:
    18
    Frames positions are important and are the key to place frames where one wants them to be.

    To positionate frames there exist 4 natives. All 4 have great uses.
    Code (vJASS):

    native BlzFrameSetPoint takes framehandle frame, framepointtype point, framehandle relative, framepointtype relativePoint, real x, real y returns nothing
    native BlzFrameSetAbsPoint takes framehandle frame, framepointtype point, real x, real y returns nothing
    native BlzFrameClearAllPoints takes framehandle frame returns nothing
    native BlzFrameSetAllPoints takes framehandle frame, framehandle relative returns nothing
     

    To positionate frames one also needs the framepointtype constants.
    Code (vJASS):

     FRAMEPOINT_TOPLEFT
     FRAMEPOINT_TOP
     FRAMEPOINT_TOPRIGHT
     FRAMEPOINT_LEFT
     FRAMEPOINT_CENTER
     FRAMEPOINT_RIGHT
     FRAMEPOINT_BOTTOMLEFT
     FRAMEPOINT_BOTTOM
     FRAMEPOINT_BOTTOMRIGHT
     

    What the natives do?


    BlzFrameSetPoint positionates a frame's point relative to another frame's point + offset.
    BlzFrameSetAbsPoint positionates a frame's point to specific coordinates on the screen.
    BlzFrameClearAllPoints frees points of that frame beeing bound.
    BlzFrameSetAllPoints: all points of frame use the same as relative

    Cartesian coordinate system


    coordinates and offset are both a factor of the total screen. 0.0/0.0 beeing the bottom left corner of the 4:3 screen. 0.8/0.6 is the top right corner of the 4:3 screen.
    Coords Image 56.jpg

    Positionating requiers the frame one wants to move and the FRAMEPOINT of that frame. One moves only the choosen FRAMEPOINT, if other FRAMEPOINTS are still located somewhere, the frame will be stretched to have both FRAMEPOINTS be filled as good that is possible, for a rectangle. This can (sometimes has to) be used to define size of frames.
    Here one should positionate either
    FRAMEPOINT_TOPRIGHT and FRAMEPOINT_BOTTOMLEFT
    or
    FRAMEPOINT_TOPLEFT and FRAMEPOINT_BOTTOMRIGHT
    of the frame one wants to set its size.

    When placing only one FramePoint the choosen FramePoint has a strong impact on the result. It limites the directions size/text can expand.
    When using a point containing:
    LEFT can only extend to the right x wise.
    RIGHT can only extend to the left x wise.
    CENTER extends equal in all directions
    TOP can only extend downwards y wise
    BOTTOM can only extend upwards y wise.​

    If one simply wants to move a frame having a size one should first use BlzFrameClearAllPoints to free already placed Points.

    SetPoint requires the relative frame to take space on the screen, that relative frame can be set on a later time, but until that happens the moved frame will displayed wierdly or not all.

    Example


    Lets move the menu button somewhere else, somewhere to the right top corner.
    Code (vJASS):

    function ReposMenuButtons takes nothing returns nothing
       local framehandle fh = BlzGetFrameByName("UpperButtonBarMenuButton",0)
       call BlzFrameSetAbsPoint(fh, FRAMEPOINT_RIGHT, 0.5, 0.5)
    endfunction
     

    Unwanted Result.jpg
    Not what we wanted. The Menu button stretched far to the right, pushed the Allies & Log button to the right and did not move lower. It seems his left side is still connected to the Quest button.


    It should work better, if we clear the points of Menu button.
    Code (vJASS):

    function ReposMenuButtons2 takes nothing returns nothing
       local framehandle fh = BlzGetFrameByName("UpperButtonBarMenuButton",0)
       call BlzFrameClearAllPoints(fh)
       call BlzFrameSetAbsPoint(fh, FRAMEPOINT_RIGHT, 0.5, 0.5)
    endfunction
     

    more wanted Result.jpg
    Well the Menu button moved, also the Allies & Log buttons, the texts are bit off, but it moved away from the Quest button and is not stretched.


    Lets move the Allies button below the Menu button and the Log button below the Allies button.
    Code (vJASS):

    function ReposMenuButtons3 takes nothing returns nothing
       local framehandle allies = BlzGetFrameByName("UpperButtonBarAlliesButton",0)
       local framehandle menu = BlzGetFrameByName("UpperButtonBarMenuButton",0)
       local framehandle log = BlzGetFrameByName("UpperButtonBarChatButton",0)
       call BlzFrameClearAllPoints(allies)
       call BlzFrameClearAllPoints(log)
       call BlzFrameClearAllPoints(menu)
       call BlzFrameSetAbsPoint(menu, FRAMEPOINT_RIGHT, 0.5, 0.5) //Pos Menu
       call BlzFrameSetPoint(allies, FRAMEPOINT_TOP, menu, FRAMEPOINT_BOTTOM, 0.0, 0.0) //Pos allies below menu
       call BlzFrameSetPoint(log, FRAMEPOINT_TOP, allies, FRAMEPOINT_BOTTOM, 0.0, 0.0) //Pos log below allies
    endfunction
     

    wanted Result.jpg
    Menu Allies and Log in a col, text is where it should be, I like it.

    They are to much in the center, but that is cause we moved menu with FRAMEPOINT_RIGHT. And cause of the wrong information of the total x size, the missinformation was 0.6 as max of the 4:3, but 0.8 is the right end of the 4:3 Screen not 0.6. 0.5 is much nearer to 0.4 then to 0.8 why it is more centered.

    Frame Pos in FDF


    When one creates frames in fdf one can also set the position of frames. Here one has 3 options:
    SetPoint FramePoint-Own, FrameName, FramePoint-FrameName, xOffset , yOffset,
    SetAllPoints,
    Anchor FramePoint, x, y, (only SimpleFrames)​

    SetPoint can be seen as
    BlzFrameSetPoint(self, FramePoint-Own, BlzGetFrameByName(FrameName, 0), FramePoint-FrameName, x, y)
    . With UseActiveContext, the Frame will connect to the relative Frame with the same CreateContext the current Frame is created with.
    Code (Text):
    Frame "BACKDROP" "Test" {
        Width 0.1,
        Height 0.1,
        SetPoint TOPLEFT, "ConsoleUI", TOPLEFT, 0, 0,
        BackdropBackground "ReplaceableTextures\CommandButtons\BTNHeroPaladin",
    }
    That Frame of type BACKDROP with Name Test would on it creation display a Paladin-Icon at Top Left of the screen (Would have to be loaded over a toc first).
    SetAllPoints is equal to BlzFrameSetAllPoints(self, parent).
    Anchor is BlzFrameSetPoint(self, point, parent, point, x, y).
     

    Attached Files:

    Last edited: Feb 25, 2020
  2. purparisien

    purparisien

    Joined:
    Jul 17, 2011
    Messages:
    625
    Resources:
    49
    Models:
    26
    Icons:
    11
    Maps:
    12
    Resources:
    49
    Its look very interesting. Can you attach an exemple map as you did with your previous tuto ? I would like to test it out
     
  3. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,524
    Resources:
    18
    Tools:
    2
    Maps:
    3
    Spells:
    8
    Tutorials:
    4
    JASS:
    1
    Resources:
    18
    A demo map was uploaded.
     
  4. purparisien

    purparisien

    Joined:
    Jul 17, 2011
    Messages:
    625
    Resources:
    49
    Models:
    26
    Icons:
    11
    Maps:
    12
    Resources:
    49
    Thanks you so much ! +rep
     
    Last edited: Jun 13, 2019
  5. purparisien

    purparisien

    Joined:
    Jul 17, 2011
    Messages:
    625
    Resources:
    49
    Models:
    26
    Icons:
    11
    Maps:
    12
    Resources:
    49
    Hey Tasyen, I like this system a lot. Is it possible to display ressources information in the menu and allies spaces, once we move the buttons away ? I would like to add more ressources in a map by using these spaces. Thanks
     
  6. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,524
    Resources:
    18
    Tools:
    2
    Maps:
    3
    Spells:
    8
    Tutorials:
    4
    JASS:
    1
    Resources:
    18
    Yes, but that is only partly connceted to the positionate Frames tutorial.

    What you would have to do is creating an image and a text frame. You could either use simpleFrames or Frames.
    In simpleFrames you would give the simpleFrame an texture and a String child. The Texture would be the icon and the String the shown text. resourcebar.fdf shows that, although they did not gave the textures names which disallows changing the icon later on.
    With Frames you would need a Frame of Type "BACKDROP" and one of Type "TEXT".
     
  7. burner89

    burner89

    Joined:
    Mar 11, 2019
    Messages:
    31
    Resources:
    0
    Resources:
    0
    It it possible to move stuff outside of the 4:3 area? If so could you explain for a noob
     
  8. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,524
    Resources:
    18
    Tools:
    2
    Maps:
    3
    Spells:
    8
    Tutorials:
    4
    JASS:
    1
    Resources:
    18
    It is possible for simpleFrames by using x values above 0.8 or below 0.0 . One has to consider that models are not simpleframes. Moving them outside of 4:3 will break shown cooldowns for item/command buttons. Also for the same reason one can not move out the 3d Face nor the minimap.

    Moves the MenuButton into the 16:9 top left corner.
    Code (vJASS):

    call BlzFrameSetAbsPoint(BlzGetOriginFrame(ORIGIN_FRAME_SYSTEM_BUTTON, 3), FRAMEPOINT_TOPLEFT, -0.14, 0.6)
     


    To move the minimap one has to define/move 2 points either BOTTOMLEFT and TOPRIGHT, or BOTTOMRIGHT and TOPLEFT. The rect they enclose is the clickable space of the minimap, its not the size of the minimap-model displayed.
     
  9. burner89

    burner89

    Joined:
    Mar 11, 2019
    Messages:
    31
    Resources:
    0
    Resources:
    0
    1) Is there a way to fix the broken cooldowns?

    2) How can I stretch a frame after having it positioned? I want to stretch the HP/Mana bars on the hero frame.
     
    Last edited: Jun 19, 2019
  10. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,524
    Resources:
    18
    Tools:
    2
    Maps:
    3
    Spells:
    8
    Tutorials:
    4
    JASS:
    1
    Resources:
    18
    Do not move them into 16:9, No Idea.


    You can try out
    call BlzFrameSetSize(frame, x, y)
    often that works sometimes it does not. For some frames it works better by positionating BOTTOMLEFT and TOPRIGHT or BOTTOMRIGHT and TOPLEFT.

    One can stretch that bar with
    call BlzFrameSetSize(BlzGetOriginFrame(ORIGIN_FRAME_HERO_HP_BAR,0), 0.2, 0.01)
     
  11. DarkLigthing

    DarkLigthing

    Joined:
    Mar 19, 2018
    Messages:
    2
    Resources:
    1
    Maps:
    1
    Resources:
    1
    Why does it works wrong for me ? :(

    Annotation 2019-07-28 151713.png Annotation 2019-07-28 151805.png
     
  12. Tasyen

    Tasyen

    Joined:
    Jul 18, 2010
    Messages:
    1,524
    Resources:
    18
    Tools:
    2
    Maps:
    3
    Spells:
    8
    Tutorials:
    4
    JASS:
    1
    Resources:
    18
    When the function executes at map init, the text disposing happens also for me. With Elapsed game time 0.00 seconds the result is much better at least for me.