OTClient health bar question

[Goku97]

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).

 

[Gesior.pl]

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).

 

[Goku97]

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

 

[margoh]

You can make function to clip image according to % of hp/mana

I did it like that

function onHealthChange(localPlayer, health, maxHealth)
  local healthPercent = ((health*100)/maxHealth)
  local globalWidth = healthBar:getImageTextureWidth() -- 100%

  local sizePercent = ((healthPercent*globalWidth)/100) -- x%
  local percent = round(sizePercent, decimal)

  healthBar:setWidth(percent)
  healthBar:setImageClip('0 0 '.. percent ..' 14')
  healthLabel:setText(health .. ' / ' .. maxHealth)
end

And this function before init

function round(val, decimal)
  if (decimal) then
    return math.floor( (val * 10^decimal) + 0.5) / (10^decimal)
  else
    return math.floor(val+0.5)
  end
end

P.s. healthLabel is element sticked to bar

 

[Goku97]

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

 

[Gesior.pl]

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]

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

 

[margoh]

Check how health info is made.

Inside init.

connect(LocalPlayer, { onNameChange = onNameChange })

Paste this in a place where it checks if game is online.

onNameChange(player, g_game.getCharacterName())

Function.

function onNameChange(player, name)
    characterName:setText(name)
end

 

[Goku97]

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

experienceBar = g_ui.createWidget('ExperienceBar', modules.game_interface.getMapPanel())

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

 

[margoh]

function onLevelChange(localPlayer, value, percent)
    rootpanel = modules.game_interface.getRootPanel()
    experienceBar = g_ui.createWidget('ExperienceBar', rootpanel)
    experienceBar:setPercent(percent)
    experienceBar:setText(percent .. '%')
    experienceBar:setTooltip(tr(experienceTooltip, percent, value+1))
end

Otui

ExperienceBar < ProgressBar
  id: experienceBar
  background-color: #B6E866
  anchors.bottom: gameBottomPanel.top
  anchors.left: gameLeftPanel.right
  anchors.right: gameRightPanel.left
  margin: 1
  margin-top: 3

 

[Goku97]

Hi @margoh

function onLevelChange(localPlayer, value, percent)
    rootpanel = modules.game_interface.getRootPanel()
    experienceBar = g_ui.createWidget('ExperienceBar', rootpanel)
    experienceBar:setPercent(percent)
    experienceBar:setText(percent .. '%')
    experienceBar:setTooltip(tr(experienceTooltip, percent, value+1))
end

Otui

ExperienceBar < ProgressBar
  id: experienceBar
  background-color: #B6E866
  anchors.bottom: gameBottomPanel.top
  anchors.left: gameLeftPanel.right
  anchors.right: gameRightPanel.left
  margin: 1
  margin-top: 3

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

 

[Goku97]

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

 

[4drik]

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:

anchors.top: characterNameID.top
anchors.left: characterNameID.right

 

[margoh]

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]

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.

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