OTClient health bar question

Discussion in 'OTClient' started by Goku97, Jul 13, 2018.

  1. Goku97

    Goku97 Member

    Joined:
    May 23, 2016
    Messages:
    123
    Likes Received:
    5
    Best Answers:
    3
    -empty-
     
    Last edited: Nov 24, 2018
  2. Gesior.pl

    Gesior.pl Mega Noob&LOL 2012 Premium User

    Joined:
    Sep 18, 2007
    Messages:
    1,964
    Likes Received:
    867
    Best Answers:
    17
    About 'parallelogram':
    Put almost-transparent image with only things you want to cover (part of bar start/end) and make it cover HP bar (place it on same position as HP bar, but after bar in .otui, so it will cover bar).
     
  3. Goku97

    Goku97 Member

    Joined:
    May 23, 2016
    Messages:
    123
    Likes Received:
    5
    Best Answers:
    3
    -empty-
     
    Last edited: Nov 24, 2018
  4. margoh

    margoh {{ user.title }}

    Joined:
    Apr 1, 2013
    Messages:
    664
    Likes Received:
    221
    Best Answers:
    8
    You can make function to clip image according to % of hp/mana

    I did it like that
    Code (Lua):
    1. function onHealthChange(localPlayer, health, maxHealth)
    2.   local healthPercent = ((health*100)/maxHealth)
    3.   local globalWidth = healthBar:getImageTextureWidth() -- 100%
    4.  
    5.   local sizePercent = ((healthPercent*globalWidth)/100) -- x%
    6.   local percent = round(sizePercent, decimal)
    7.  
    8.   healthBar:setWidth(percent)
    9.   healthBar:setImageClip('0 0 '.. percent ..' 14')
    10.   healthLabel:setText(health .. ' / ' .. maxHealth)
    11. end
    And this function before init
    Code (Lua):
    1.  
    2. function round(val, decimal)
    3.   if (decimal) then
    4.     return math.floor( (val * 10^decimal) + 0.5) / (10^decimal)
    5.   else
    6.     return math.floor(val+0.5)
    7.   end
    8. end
    P.s. healthLabel is element sticked to bar
     
    Last edited: Jul 14, 2018
  5. Goku97

    Goku97 Member

    Joined:
    May 23, 2016
    Messages:
    123
    Likes Received:
    5
    Best Answers:
    3
    -empty-
     
    Last edited: Nov 24, 2018
  6. Gesior.pl

    Gesior.pl Mega Noob&LOL 2012 Premium User

    Joined:
    Sep 18, 2007
    Messages:
    1,964
    Likes Received:
    867
    Best Answers:
    17
    ONLY way to draw bar as you posted in first post is to create 2 images:
    1. with full HP
    2. with zero HP (transparent in place of HP)

    Put full HP bar 'under' empty HP bar and clip 'full hp' bar to width equal to % of HP.
    There is no access to 'draw engine' from LUA, so you can't write any algorithm that color pixels of your image to generate some weird shape - IT WOULD BE INTERESTING FEATURE!
    Hmm.. generate texture (cached) in LUA and use it as part of UI. It would be great!

    Clipped image is cached on next frame rendering, so until next HP change it won't use any extra CPU to draw it.
     
    Goku97 likes this.
  7. Goku97

    Goku97 Member

    Joined:
    May 23, 2016
    Messages:
    123
    Likes Received:
    5
    Best Answers:
    3
    -empty-
     
    Last edited: Nov 24, 2018
  8. margoh

    margoh {{ user.title }}

    Joined:
    Apr 1, 2013
    Messages:
    664
    Likes Received:
    221
    Best Answers:
    8
    Check how health info is made.

    Inside init.
    Code (Lua):
    1. connect(LocalPlayer, { onNameChange = onNameChange })
    Paste this in a place where it checks if game is online.
    Code (Lua):
    1. onNameChange(player, g_game.getCharacterName())
    Function.
    Code (Lua):
    1. function onNameChange(player, name)
    2.     characterName:setText(name)
    3. end
    4.  
     
  9. Goku97

    Goku97 Member

    Joined:
    May 23, 2016
    Messages:
    123
    Likes Received:
    5
    Best Answers:
    3
    -empty-
     
    Last edited: Nov 24, 2018
  10. margoh

    margoh {{ user.title }}

    Joined:
    Apr 1, 2013
    Messages:
    664
    Likes Received:
    221
    Best Answers:
    8
    Code (Lua):
    1. function onLevelChange(localPlayer, value, percent)
    2.     rootpanel = modules.game_interface.getRootPanel()
    3.     experienceBar = g_ui.createWidget('ExperienceBar', rootpanel)
    4.     experienceBar:setPercent(percent)
    5.     experienceBar:setText(percent .. '%')
    6.     experienceBar:setTooltip(tr(experienceTooltip, percent, value+1))
    7. end
    8.  
    Otui
    Code (Text):
    1. ExperienceBar < ProgressBar
    2.   id: experienceBar
    3.   background-color: #B6E866
    4.   anchors.bottom: gameBottomPanel.top
    5.   anchors.left: gameLeftPanel.right
    6.   anchors.right: gameRightPanel.left
    7.   margin: 1
    8.   margin-top: 3
    9.  
     
  11. Goku97

    Goku97 Member

    Joined:
    May 23, 2016
    Messages:
    123
    Likes Received:
    5
    Best Answers:
    3
    -empty-
     
    Last edited: Nov 24, 2018
  12. Goku97

    Goku97 Member

    Joined:
    May 23, 2016
    Messages:
    123
    Likes Received:
    5
    Best Answers:
    3
    -empty-
     
    Last edited: Nov 24, 2018
  13. 4drik

    4drik Active Member

    Joined:
    Jun 30, 2014
    Messages:
    155
    Likes Received:
    72
    Best Answers:
    0
    First of all, compose it in .otui, not in lua.
    Then add IDs for all bars, labels etc.
    Then instead of createWidget do getChildByID.

    1. If the module is reloaded and not working correct, it means that there are problems in terminate/init functions, check other modules and find differences.
    Instead of onNameChange I think you can use localPlayer:getName() (not sure what you need to achieve).

    2. If you will build the healthhud in .otui to make level label near name - add to experienceBar, label or whatever you have an anchor, for example if you want on the right of CharacterName:
    Code (Text):
    1. anchors.top: characterNameID.top
    2. anchors.left: characterNameID.right
     
  14. margoh

    margoh {{ user.title }}

    Joined:
    Apr 1, 2013
    Messages:
    664
    Likes Received:
    221
    Best Answers:
    8
    You just have a typo in "refresh". Inside onNameChange you have (player, {...}). It should be localPlayer like on the rest of declared variables.
    Inside onLevelChange the variable value is our current level.
     
    Goku97 likes this.
  15. Goku97

    Goku97 Member

    Joined:
    May 23, 2016
    Messages:
    123
    Likes Received:
    5
    Best Answers:
    3
    -empty-
     
    Last edited: Nov 24, 2018

Share This Page

Loading...