OTClient health bar question

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

  1. Goku97

    Goku97 Member

    Joined:
    May 23, 2016
    Messages:
    118
    Likes Received:
    5
    Best Answers:
    3
    Hi Otland

    So I was playing around with OTClient, I've managed to create a custom hud if you will (health, mana etc), but I don't know how I can adjust health bar to the size of my image.

    What I mean by it, I need the health bar to be parallelogram shape and not rectangle as it is right now.

    Is there anyone who can help me?

    Thank you for your time and support
    Regards
    Goku97

    ----Edit----

    Here is a image how my hp bar looks (here).
     
    Last edited: Jul 13, 2018
  2. Gesior.pl

    Gesior.pl Mega Noob&LOL 2012 Premium User

    Joined:
    Sep 18, 2007
    Messages:
    1,904
    Likes Received:
    790
    Best Answers:
    8
    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:
    118
    Likes Received:
    5
    Best Answers:
    3
    Hi @Gesior.pl
    Thank you for responding to my thread, I am using transparent images for health, mana and soul bar, but the background color for the health, mana and soul bar that I'm giving in the client / .otui doesn't fit right.

    Here is a image how it looks in OTC (here)

    Thank you
    Goku97
     
  4. margoh

    margoh {{ user.title }}

    Joined:
    Apr 1, 2013
    Messages:
    657
    Likes Received:
    216
    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:
    118
    Likes Received:
    5
    Best Answers:
    3
    Hi @margoh
    Thank you for responding to my thread.
    As I don't like the sound of clipping the image to health percentage, is there a way to adjust eg. health bar to the shape of the image ? Also is there a function list of some sort for OTC?

    As for now I went with a "normal" bar shape for my hud and it works fine. (here)

    Thank you
    Goku97
     
  6. Gesior.pl

    Gesior.pl Mega Noob&LOL 2012 Premium User

    Joined:
    Sep 18, 2007
    Messages:
    1,904
    Likes Received:
    790
    Best Answers:
    8
    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:
    118
    Likes Received:
    5
    Best Answers:
    3
    Hi @Gesior.pl
    Thank you very much for your help that was just what I needed.
    I have a question as I would like to implement player name / nickname and what level he currently have to my UI are there any functions in otc that I can use as I'm new to otclient.

    Thank you
    Goku97
     
  8. margoh

    margoh {{ user.title }}

    Joined:
    Apr 1, 2013
    Messages:
    657
    Likes Received:
    216
    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:
    118
    Likes Received:
    5
    Best Answers:
    3
    Hi @margoh
    Thank you for reviewing my thread, I'll shall try it out
    I have a question, I would like to set up experience bar at the bottom of the screen without using any panel, I've made a bar using getMapPanel()

    Code (Text):
    1.  
    2. experienceBar = g_ui.createWidget('ExperienceBar', modules.game_interface.getMapPanel())
    3.  
    I was wondering how can I place it at the bottom as it doesn't seem to be responding to whatever I put in the .otui any help?

    Thank you for time and support.
    Regards
    Goku97
     
  10. margoh

    margoh {{ user.title }}

    Joined:
    Apr 1, 2013
    Messages:
    657
    Likes Received:
    216
    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:
    118
    Likes Received:
    5
    Best Answers:
    3
    Hi @margoh
    So it moved down the experience bar to the same height as is my chat, is it possible to make it so its below ? Also I don't have left and right panel as I got rid of it from the interface and other scripts that need it.
    Here is the image what it looks like (here),

    Thank you very much for your help
    Regards
    Goku97
     
  12. Goku97

    Goku97 Member

    Joined:
    May 23, 2016
    Messages:
    118
    Likes Received:
    5
    Best Answers:
    3
    Hello again,
    So after some time I was back to fiddle around with OTClient but the module I'm trying to create is not working as I would like to.
    I'm looking for some help / guidance with the current module. I've manage to set up health, mana, exp bars and the label where the character name pops up, but the label is not working correcly and there are things missing that I would like to add / fix

    1. it does not show after opening / login in, after I reload module it pops up, and also it does not refresh if you go on different character name so I would like to fix that please

    2. I would like to add level that player currently have next to his name if I could get help with that would be much appreciated.

    Thank you for time and support.
    Regards
    Goku97
     
    Last edited: Sep 2, 2018
  13. 4drik

    4drik Active Member

    Joined:
    Jun 30, 2014
    Messages:
    143
    Likes Received:
    70
    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:
    657
    Likes Received:
    216
    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:
    118
    Likes Received:
    5
    Best Answers:
    3
    Hi
    So I've changed in onNameChange to this onNameChange(localPlayer, g_game.getCharacterName()) is this correct now ? and what do you mean I have a typo ? Where ?

    Thank you for your time
    Regards
    Goku97
     

Share This Page

Loading...