• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

Health and Mana bars (retro style)

Blasphemy

Blasphemy

Well-Known Member
Joined
Jan 5, 2012
Messages
387
Reaction score
67
Well after years, i've tried lot to turn my OTC health and mana bars to retro style... so I want to share what i've done to get it:

Screenshot_1.png

*note for beginners like me: .otui files are very complicated, every space, tab, causes errors.
1st this is my healthinfo.otui:
Code: 
FullHealthBar < ProgressBar
  height: 11
  image-source: /images/ui/emptybar
  anchors.top: parent.top
  anchors.left: parent.left
  margin-left: 24
  margin-top: 4
  margin-right: 51

HealthBar < ProgressBar
  id: healthBar
  image-source: /images/ui/fullhealthbar
  height: 11
  anchors.top: parent.top
  anchors.left: parent.left
  margin-left: 24
  margin-top: 4
  margin-right: 51

ManaBar < ProgressBar
  id: manaBar
  image-source: /images/ui/fullmanabar
  height: 11
  anchors.top: healthBar.bottom
  anchors.left: parent.left
  margin: 2
  margin-left: 24
  margin-top: 4
  margin-right: 51

FullManaBar < ProgressBar
  height: 11
  image-source: /images/ui/emptybar
  anchors.top: healthBar.bottom
  anchors.left: parent.left
  anchors.right: parent.right
  margin: 2
  margin-top: 4
  margin-right: 51
  margin-left: 24

ManaLabel < GameLabel
  id: manaLabel
  color: #AFAFAF
  font: verdana-11px-antialised
  text-offset: 140 0
  anchors.left: parent.left
  anchors.right: parent.right
  anchors.top: manaBar.top
  anchors.bottom: manaBar.bottom
  margin-top: -2
  margin-left: -20

HealthLabel < GameLabel
  id: healthLabel
  color: #AFAFAF
  font: verdana-11px-antialised
  text-offset: 140 0
  anchors.left: parent.left
  anchors.right: parent.right
  anchors.top: healthBar.top
  anchors.bottom: healthBar.bottom
  margin-top: -2
  margin-left: -20

HealthInfoWindow < HeadlessMiniWindow
  icon:
  text:
  height: 45
  &forceOpen: true
  icon: /images/topbuttons/healthinfo
  !text: tr('Health/Mana') 

  MiniWindowContents
    margin-top: 1
    FullHealthBar
    HealthBar
    FullManaBar
    ManaBar
    HealthLabel
    ManaLabel

    Label
      height: 24
      image-source: /images/ui/progress_icons
      anchors.top: parent.top
      anchors.left: manaBar.left
      margin-left: -16
      margin-top: 5
2nd: healthinfo.lua side:


Lua: 
function onHealthChange(localPlayer, health, maxHealth)
  healthLabel:setText(""..health.. "")
  healthBar:setTooltip(tr(healthTooltip, health, maxHealth))
  healthBar:setValue(health, 0, 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(torect('0 0 ' .. tonumber(percent) .. ' 0'))
end

function onManaChange(localPlayer, mana, maxMana)
  manaLabel:setText(""..mana.. "")
  manaBar:setTooltip(tr(manaTooltip, mana, maxMana))
  manaBar:setValue(mana, 0, maxMana)
 
  local manaPercent = ((mana*100)/maxMana)
  local globalWidth = manaBar:getImageTextureWidth() -- 100%

  local sizePercent = ((manaPercent*globalWidth)/100) -- x%
  local percent = round(sizePercent, decimal)
 
  if maxMana == 0 then  -- this code is important, when max mana is 0, then the mana bar will show it full you can adjust it as you need
  manaBar:setWidth(90)
 
  else
 
  manaBar:setWidth(percent)
  manaBar:setImageClip(torect('0 0 ' .. tonumber(percent) .. ' 0'))
 

  end
end
as you can see, i could solve the 0 max mana problem

Screenshot_2.png

don't forget to add

Lua: 
healthLabel = nil
manaLabel = nil
and
Lua: 
healthLabel = healthInfoWindow:recursiveGetChildById('healthLabel')
manaLabel = healthInfoWindow:recursiveGetChildById('manaLabel')
in it's respective place.

and at last, thanks to @margoh for his help, he guide me on how to do this in this link
otland.net

[RIPOFF] Health/Mana bar.

Hello, it is the answear to this: OTClient - Health/Mana Bars (https://otland.net/threads/health-mana-bars.274279/) Also can be used by people who wants to use custom textured bars. At this point I am not going to explain every single step, because if you modify your ui, you don't need it. Lua...
otland.net otland.net

You should need to add to your modules files codes that he show us in that thread

best regards
 
Last edited:
Don't get it to work in otcv8 i placed. tibia_bars in images/ui changed progressbar to tibia_bars at 10-progressbar.otui
and the code in util.lua
 
Blasphemy said:
Well after years, i've tried lot to turn my OTC health and mana bars to retro style... so I want to share what i've done to get it:

View attachment 66873

*note for beginners like me: .otui files are very complicated, every space, tab, causes errors.
1st this is my healthinfo.otui:
Code: 
FullHealthBar < ProgressBar
  height: 11
  image-source: /images/ui/emptybar
  anchors.top: parent.top
  anchors.left: parent.left
  margin-left: 24
  margin-top: 4
  margin-right: 51

HealthBar < ProgressBar
  id: healthBar
  image-source: /images/ui/fullhealthbar
  height: 11
  anchors.top: parent.top
  anchors.left: parent.left
  margin-left: 24
  margin-top: 4
  margin-right: 51

ManaBar < ProgressBar
  id: manaBar
  image-source: /images/ui/fullmanabar
  height: 11
  anchors.top: healthBar.bottom
  anchors.left: parent.left
  margin: 2
  margin-left: 24
  margin-top: 4
  margin-right: 51

FullManaBar < ProgressBar
  height: 11
  image-source: /images/ui/emptybar
  anchors.top: healthBar.bottom
  anchors.left: parent.left
  anchors.right: parent.right
  margin: 2
  margin-top: 4
  margin-right: 51
  margin-left: 24

ManaLabel < GameLabel
  id: manaLabel
  color: #AFAFAF
  font: verdana-11px-antialised
  text-offset: 140 0
  anchors.left: parent.left
  anchors.right: parent.right
  anchors.top: manaBar.top
  anchors.bottom: manaBar.bottom
  margin-top: -2
  margin-left: -20

HealthLabel < GameLabel
  id: healthLabel
  color: #AFAFAF
  font: verdana-11px-antialised
  text-offset: 140 0
  anchors.left: parent.left
  anchors.right: parent.right
  anchors.top: healthBar.top
  anchors.bottom: healthBar.bottom
  margin-top: -2
  margin-left: -20

HealthInfoWindow < HeadlessMiniWindow
  icon:
  text:
  height: 45
  &forceOpen: true
  icon: /images/topbuttons/healthinfo
  !text: tr('Health/Mana')

  MiniWindowContents
    margin-top: 1
    FullHealthBar
    HealthBar
    FullManaBar
    ManaBar
    HealthLabel
    ManaLabel

    Label
      height: 24
      image-source: /images/ui/progress_icons
      anchors.top: parent.top
      anchors.left: manaBar.left
      margin-left: -16
      margin-top: 5
2nd: healthinfo.lua side:


Lua: 
function onHealthChange(localPlayer, health, maxHealth)
  healthLabel:setText(""..health.. "")
  healthBar:setTooltip(tr(healthTooltip, health, maxHealth))
  healthBar:setValue(health, 0, 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(torect('0 0 ' .. tonumber(percent) .. ' 0'))
end

function onManaChange(localPlayer, mana, maxMana)
  manaLabel:setText(""..mana.. "")
  manaBar:setTooltip(tr(manaTooltip, mana, maxMana))
  manaBar:setValue(mana, 0, maxMana)
 
  local manaPercent = ((mana*100)/maxMana)
  local globalWidth = manaBar:getImageTextureWidth() -- 100%

  local sizePercent = ((manaPercent*globalWidth)/100) -- x%
  local percent = round(sizePercent, decimal)
 
  if maxMana == 0 then  -- this code is important, when max mana is 0, then the mana bar will show it full you can adjust it as you need
  manaBar:setWidth(90)
 
  else
 
  manaBar:setWidth(percent)
  manaBar:setImageClip(torect('0 0 ' .. tonumber(percent) .. ' 0'))
 

  end
end
as you can see, i could solve the 0 max mana problem

View attachment 66874

don't forget to add

Lua: 
healthLabel = nil
manaLabel = nil
and
Lua: 
healthLabel = healthInfoWindow:recursiveGetChildById('healthLabel')
manaLabel = healthInfoWindow:recursiveGetChildById('manaLabel')
in it's respective place.

and at last, thanks to @margoh for his help, he guide me on how to do this in this link
otland.net

[RIPOFF] Health/Mana bar.

Hello, it is the answear to this: OTClient - Health/Mana Bars (https://otland.net/threads/health-mana-bars.274279/) Also can be used by people who wants to use custom textured bars. At this point I am not going to explain every single step, because if you modify your ui, you don't need it. Lua...
otland.net otland.net

You should need to add to your modules files codes that he show us in that thread

best regards
Click to expand...
Have tried following your tutorial and nothing seems to work also followed @dewral files in order to get it working into my otcv but it does not work at all can somebody help me?
 
johnsamir said:
Have tried following your tutorial and nothing seems to work also followed @dewral files in order to get it working into my otcv but it does not work at all can somebody help me?
Click to expand...
it's hard to get what would be your issue. Because, in my case, i've removed the topbar and circle bars, so maybe if you are using my files, you'll have to add them if you want to keep them, or remove.
maybe you need to check those functions first
You should show me your otui file and lua too
 
Last edited:
Hi, note I use OTCV8
healthinfo.lua
Lua: 
function onHealthChange(localPlayer, health, maxHealth)
  healthLabel:setText(""..health.. "")
  healthBar:setTooltip(tr(healthTooltip, health, maxHealth))
  healthBar:setValue(health, 0, 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(torect('0 0 ' .. tonumber(percent) .. ' 0'))
end

function onManaChange(localPlayer, mana, maxMana)
  manaLabel:setText(""..mana.. "")
  manaBar:setTooltip(tr(manaTooltip, mana, maxMana))
  manaBar:setValue(mana, 0, maxMana)
 
  local manaPercent = ((mana*100)/maxMana)
  local globalWidth = manaBar:getImageTextureWidth() -- 100%

  local sizePercent = ((manaPercent*globalWidth)/100) -- x%
  local percent = round(sizePercent, decimal)
 
  if maxMana == 0 then  -- this code is important, when max mana is 0, then the mana bar will show it full you can adjust it as you need
  manaBar:setWidth(90)
 
  else
 
  manaBar:setWidth(percent)
  manaBar:setImageClip(torect('0 0 ' .. tonumber(percent) .. ' 0'))
 

  end
end

modules/corelib/util.lua
Code: 
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

function createTexturedBar(id, min, max, texWidth, texHeight, panel, step, pos)
  local clipY
  local posY
  local height

  if step == nil and pos == nil then
    clipY = 0
    posY = 0
    height = texHeight
  else
    clipY = texHeight / step
    posY = clipY * pos
    height = clipY
  end

  local val = panel
  local bar = val:getChildById(id)
  local globalWidth = texWidth
  local percent = ((min * 100) / max)
  local sizePercent = ((percent * globalWidth) / 100)
  local width = round(sizePercent, decimal)

  bar:setId(id)
  bar:setHeight(height)

  if max <= 0 then
    bar:setWidth(texWidth)
    bar:setImageClip('0 ' .. posY .. ' ' .. texWidth .. ' ' .. height)
  else
    bar:setWidth(width)
    bar:setImageClip('0 ' .. posY .. ' ' .. width .. ' ' .. height)
  end

  return bar
end ---agregado real life bars
-- @}

data/styles/10-progressbars.otui
Code: 
ProgressBar < UIProgressBar
 image-source: /images/ui/emptybar
  image-border: 8
  height: 12
  phantom: true

  $!on:
    visible: false
    margin-top: 0
    margin-bottom: 0
    height: 0

ThickProgressBar < ProgressBar
  image-source: /images/ui/progressbar_thick

LifeProgressBar < UIProgressBar
  height: 16
  background-color: green
  border: 1 black
  font: verdana-11px-rounded
  text-offset: 0 2
  margin: 2
 
ProgressRect < UIProgressRect
  anchors.fill: parent
  phantom: true
  color: white
  background-color: #00000088
  font: verdana-11px-rounded

HealthBar < ProgressBar
  image-source: /images/ui/progressbarhp
  image-border: 8
  height: 12
  phantom: true

ManaBar < ProgressBar
  image-source: /images/ui/progressbarmana
  image-border: 8
  height: 12
  phantom: true
data/styles/40-healthinfo.otui
Code: 
ExperienceBar < ProgressBar
  id: experienceBar
  background-color: #B6E866
  anchors.top: prev.bottom
  anchors.left: parent.left
  anchors.right: parent.right
  margin: 1
  margin-top: 3

SoulLabel < GameLabel
  id: soulLabel
  text-align: right
  color: white
  font: verdana-11px-rounded
  anchors.bottom: parent.bottom
  anchors.right: parent.right
  anchors.left: parent.horizontalCenter
  margin-top: 5
  margin-right: 3
  on: true

  $!on:
    visible: false
    margin-top: 0
    height: 0

CapLabel < GameLabel
  id: capLabel
  color: white
  font: verdana-11px-rounded
  anchors.bottom: parent.bottom
  anchors.left: parent.left
  anchors.right: parent.horizontalCenter
  margin-top: 5
  margin-left: 3
  on: true

  $!on:
    visible: false
    margin-top: 0
    height: 0

ConditionWidget < UIWidget
  size: 18 18

  $!first:
    margin-left: 2
     
HealthOverlay < UIWidget
  id: healthOverlay
  anchors.fill: parent
  phantom: true
 
HealthBar < ProgressBar
  id: healthBar
  image-source: /images/ui/progressbarhp
  anchors.top: parent.top
  anchors.left: parent.left
  margin-left: 23
  margin-top: 2

ManaBar < ProgressBar
  id: manaBar
  image-source: /images/ui/progressbarmana
  anchors.top: prev.bottom
  anchors.left: parent.left
  margin-left: 10
  margin-top: 3

HealthLabel < GameLabel
  id: healthLabel
  text-offset: 140 0
  anchors.right: parent.right
  anchors.left: parent.left
  anchors.top: healthBar.top
  anchors.bottom: healthBar.bottom
  margin-top: -2
  padding: -55
  margin-left: -20

ManaLabel < GameLabel
  id: manaLabel
  color: #AFAFAF
  font: verdana-11px-antialised
  text-offset: 140 0
  anchors.left: parent.left
  anchors.right: parent.right
  anchors.top: manaBar.top
  anchors.bottom: manaBar.bottom
  margin-top: -2
  padding: -55
  margin-left: -20
   
  UIProgressBar
    id: healthCircle
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    image-source: /images/game/circle/left_empty
    margin-right: 169
    margin-bottom: 16
    opacity: 0.5
    phantom: true

  UIProgressBar
    id: healthCircleFront
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    image-source: /images/game/circle/left_full
    margin-right: 169
    margin-bottom: 16
    opacity: 0.5
    phantom: true

  UIProgressBar
    id: manaCircle
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    image-source: /images/game/circle/right_empty  
    image-auto-resize: true
    margin-left: 130
    margin-bottom: 16
    opacity: 0.5
    phantom: true

  UIProgressBar
    id: manaCircleFront
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    image-source: /images/game/circle/right_full
    margin-left: 130
    margin-bottom: 16  
    opacity: 0.4
    image-color: #0000FFFF
    phantom: true
 
HealthInfoWindow < MiniWindow
  icon: /images/topbuttons/healthinfo
  !text: tr('Health Info')
  height: 123
     
    ExperienceBar
    Panel
      id: conditionPanel
      layout:
        type: horizontalBox
      height: 22
      margin-top: 4
      padding: 2
      anchors.top: prev.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      border-width: 1
      border-color: #00000077
      background-color: #ffffff11
    SoulLabel
    CapLabel

have moved the whole folder client_options game health_info and changed files 10-progressbars.otui and 40- inventory.otui from Otclient Classic UI (https://otland.net/threads/otclient-classic-ui.279994/page-2#post-2693263) to my datapack and nothing change either
 
Last edited:

Similar threads

I
HealthInfo Help OTCV8
Replies
0
Views
371
isac001
I
V
  • Question
800OTClient Topbuttons
Replies
0
Views
353
victorlima
V
I
  • Question
Otcv8 Healthinfo Help
Replies
1
Views
396
Mateus Robeerto
Mateus Robeerto
A
OTCV8 Erro feature (Health and Mana bar backgrounds)
Replies
5
Views
927
luucas07
L
Back
Top