OTClient health bar question

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

  1. Goku97

    Goku97 Member

    Joined:
    May 23, 2016
    Messages:
    101
    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

    Joined:
    Sep 18, 2007
    Messages:
    1,886
    Likes Received:
    756
    Best Answers:
    5
    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:
    101
    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:
    641
    Likes Received:
    206
    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:
    101
    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

    Joined:
    Sep 18, 2007
    Messages:
    1,886
    Likes Received:
    756
    Best Answers:
    5
    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:
    101
    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:
    641
    Likes Received:
    206
    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:
    101
    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:
    641
    Likes Received:
    206
    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:
    101
    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
     

Share This Page

Loading...