[OtClient] How to display outfit on inventory window?

Vivelo · Aug 30, 2018

Hello everybody!
I have a question, maybe do you know, how i can display "outfit window" in my "inventory window"?
(I just want the outfit to be displayed - not that it can be edited/change)

I tried editing inventory.lua form outfit.lua (scritps) and OTClient doesnt display anything im add.
In my inventory.otui i add a "Creature Box" with id: inventoryCreatureBox and we see it in the picture, but "outfit sprite" still don't appear.

In outfit.lua is a script responsible for display (i think):

Lua:

function create(creatureOutfit, outfitList, creatureMount, mountList)
  if outfitWindow and not outfitWindow:isHidden() then
    return
  end

  outfitCreature = creatureOutfit
  mountCreature = creatureMount
  outfits = outfitList
  mounts = mountList
  destroy()

  outfitWindow = g_ui.displayUI('outfitwindow')
  local colorBoxPanel = outfitWindow:getChildById('colorBoxPanel')

  local outfitCreatureBox = outfitWindow:getChildById('outfitCreatureBox')
  if outfitCreature then
    outfit = outfitCreature:getOutfit()
    outfitCreatureBox:setCreature(outfitCreature)
  else
    outfitCreatureBox:hide()
    outfitWindow:getChildById('outfitName'):hide()
    outfitWindow:getChildById('outfitNextButton'):hide()
    outfitWindow:getChildById('outfitPrevButton'):hide()
  end

  local mountCreatureBox = outfitWindow:getChildById('mountCreatureBox')
  if mountCreature then
    mount = mountCreature:getOutfit()
    mountCreatureBox:setCreature(mountCreature)
  else
    mountCreatureBox:hide()
    outfitWindow:getChildById('mountName'):hide()
    outfitWindow:getChildById('mountNextButton'):hide()
    outfitWindow:getChildById('mountPrevButton'):hide()
  end

Im trying paste this code in inventory.lua but still not happen:

Lua:

inventory = nil
inventoryPanel = nil
inventoryButton = nil
purseButton = nil

outfitWindow = nil
outfit = nil
outfits = nil
outfitCreature = nil

function createWindow(creatureOutfit, outfitList, inventoryCreatureBox)
  if inventory and not inventory:isHidden() then
    return
  end
local inventoryCreatureBox = inventory:getChildById('inventoryCreatureBox')
  outfitCreature = creatureOutfit
  outfits = outfitList
  destroy()

   inventory = g_ui.loadUI('inventory', modules.game_inventory.getRightPanel())
  inventory = g_ui.displayUI('inventory')
  inventoryCreatureBox:setVisible(true)
 
  if outfitCreature then
    outfit = outfitCreature:getOutfit()
    inventoryCreatureBox:setCreature(outfitCreature)
  else
    inventoryCreatureBox:hide()
  end
  end

I think I need to add a line of code somewhere (maybe game_interface? or i must creat a new module? - maybe you know where and what? (I tried to copy the whole outfit.lua script instead of inventory.lua and you guessed it, nothing shows up and should change anything, the same if i convert the code or add a new function)

Sorry for my bad english

And i hope you will be able to help me

Vivelo · Aug 2, 2020

zxmatzx · Aug 2, 2020

Vivelo said:
BUMP

Take a look here. See how outfit variable is built.

Vivelo · Aug 2, 2020

Thanks, but im not too good in LUA

Well dont understand a half of this functions. Can you explain to me a little easier? Thanks!

Shadowsong · Aug 2, 2020

It's very simple, you create an UICreature widget which is meant to hold and draw creatures and set your creature inside of it.
Make sure to do this sort of stuff only when you are sure that appropriate .dat and .spr files are loaded.

Lua:

  -- Create an UICreature widget inside parent rootWidget (you can change parent to wherever you wanna fit it)
  creatureDisplayer = g_ui.createWidget('UICreature', rootWidget)
  creatureDisplayer:setSize("96 96")

  -- Create a new creature and set its outfit
  local creature = Creature.create()
  local outfit = {type = 133, head = 1, body = 5, legs = 6, feet = 12, addons = 2}
  creature:setOutfit(outfit)

  -- Set the creatureDisplayer to display that new creature.
  creatureDisplayer:setCreature(creature)

Edit:
Do not create new Creature objects if they already exist elsewhere already, you can just pull data from there and have a duplicate of them be drawn in this new UICreature widget.

GIF | Gfycat

Watch and share more GIFs, videos, and memes on Gfycat

gfycat.com

oen432 · Aug 2, 2020

Lua:

  local player = g_game.getLocalPlayer()
  if player then
    inventoryCreatureBox:setCreature(player)
  end

Vivelo · Aug 2, 2020

I guess I'm tired because I still can't do it. I don't know where what should be. But I'm jealous that you did something in a moment that I couldn't do for two years

JUST WOW ...

Edit: I think I need tutorial for NOOB

oen432 · Aug 2, 2020

I don't know what you did but your code (from first post) is really messed up.
Can you post inventory.lua?

Vivelo · Aug 2, 2020

oen432 said:
I don't know what you did but your code (from first post) is really messed up.
Can you post inventory.lua?

Sure, but the first inventory.lua was from 2018, now I have (I think) the basic one. The only thing that changed is the *Otui file where I changed the slot order a bit and added a window to display the outfit.

Lua:

 INVENTORY.LUA
InventorySlotStyles = {
  [InventorySlotHead] = "HeadSlot",
  [InventorySlotNeck] = "NeckSlot",
  [InventorySlotBack] = "BackSlot",
  [InventorySlotBody] = "BodySlot",
  [InventorySlotRight] = "RightSlot",
  [InventorySlotLeft] = "LeftSlot",
  [InventorySlotLeg] = "LegSlot",
  [InventorySlotFeet] = "FeetSlot",
  [InventorySlotFinger] = "FingerSlot",
  [InventorySlotAmmo] = "AmmoSlot",
  [InventorySlotOutfit] = "OutfitSlot"
}

outfitinv = nil
inventoryWindow = nil
inventoryPanel = nil
inventoryButton = nil
purseButton = nil
healthInfoWindow = nil
healthBar = nil
manaBar = nil
experienceBar = nil
soulLabel = nil
capLabel = nil
healthTooltip = 'Your character health is %d out of %d.'
manaTooltip = 'Your character mana is %d out of %d.'
experienceTooltip = 'You have %d%% to advance to level %d.'


function init()
  connect(LocalPlayer, {
    onInventoryChange = onInventoryChange,
    onBlessingsChange = onBlessingsChange
  })
  connect(g_game, { onGameStart = refresh })

  g_keyboard.bindKeyDown('Ctrl+I', toggle)

  inventoryButton = modules.client_topmenu.addRightGameToggleButton('inventoryButton', tr('Inventory') .. ' (Ctrl+I)', '/images/topbuttons/inventory', toggle)
  inventoryButton:setOn(true)

  inventoryWindow = g_ui.loadUI('inventory', modules.game_interface.getRightPanel())
  inventoryWindow:disableResize()
  inventoryPanel = inventoryWindow:getChildById('contentsPanel')

  purseButton = inventoryPanel:getChildById('purseButton')
  local function purseFunction()
    local purse = g_game.getLocalPlayer():getInventoryItem(InventorySlotPurse)
    if purse then
      g_game.use(purse)
    end
  end
  purseButton.onClick = purseFunction

  refresh()
  inventoryWindow:setup()
end

function terminate()
  disconnect(g_game, {
    onOpenOutfitWindow = create,
    onGameEnd = destroy
  })
  destroy()
end

function terminate()
  disconnect(LocalPlayer, {
    onInventoryChange = onInventoryChange,
    onBlessingsChange = onBlessingsChange
  })
  disconnect(g_game, { onGameStart = refresh })

  g_keyboard.unbindKeyDown('Ctrl+I')

  inventoryWindow:destroy()
  inventoryButton:destroy()
end

function toggleAdventurerStyle(hasBlessing)
  for slot = InventorySlotFirst, InventorySlotLast do
    local itemWidget = inventoryPanel:getChildById('slot' .. slot)
    if itemWidget then
      itemWidget:setOn(hasBlessing)
    end
  end
end

function refresh()
  local player = g_game.getLocalPlayer()
  for i = InventorySlotFirst, InventorySlotPurse do
    if g_game.isOnline() then
      onInventoryChange(player, i, player:getInventoryItem(i))
    else
      onInventoryChange(player, i, nil)
    end
    toggleAdventurerStyle(player and Bit.hasBit(player:getBlessings(), Blessings.Adventurer) or false)
  end

  purseButton:setVisible(g_game.getFeature(GamePurseSlot))
end

function toggle()
  if inventoryButton:isOn() then
    inventoryWindow:close()
    inventoryButton:setOn(false)
  else
    inventoryWindow:open()
    inventoryButton:setOn(true)
  end
end

function onMiniWindowClose()
  inventoryButton:setOn(false)
end

-- hooked events
function onInventoryChange(player, slot, item, oldItem)
  if slot > InventorySlotPurse then return end

  if slot == InventorySlotPurse then
    if g_game.getFeature(GamePurseSlot) then
      purseButton:setEnabled(item and true or false)
    end
    return
  end

  local itemWidget = inventoryPanel:getChildById('slot' .. slot)
  if item then
    itemWidget:setStyle('InventoryItem')
    itemWidget:setItem(item)
  else
    itemWidget:setStyle(InventorySlotStyles[slot])
    itemWidget:setItem(nil)
  end
end

function onBlessingsChange(player, blessings, oldBlessings)
  local hasAdventurerBlessing = Bit.hasBit(blessings, Blessings.Adventurer)
  if hasAdventurerBlessing ~= Bit.hasBit(oldBlessings, Blessings.Adventurer) then
    toggleAdventurerStyle(hasAdventurerBlessing)
  end
end

Code:

 INVENTORY.OTUI
InventoryItem < Item

HeadSlot < InventoryItem
  id: slot1
  image-source: /images/game/slots/head
  &position: {x=65535, y=1, z=0}
  $on:
    image-source: /images/game/slots/head-blessed

BodySlot < InventoryItem
  id: slot4
  image-source: /images/game/slots/body
  &position: {x=65535, y=4, z=0}
  $on:
    image-source: /images/game/slots/body-blessed

LegSlot < InventoryItem
  id: slot7
  image-source: /images/game/slots/legs
  &position: {x=65535, y=7, z=0}
  $on:
    image-source: /images/game/slots/legs-blessed

FeetSlot < InventoryItem
  id: slot8
  image-source: /images/game/slots/feet
  &position: {x=65535, y=8, z=0}
  $on:
    image-source: /images/game/slots/feet-blessed

NeckSlot < InventoryItem
  id: slot2
  image-source: /images/game/slots/neck
  &position: {x=65535, y=2, z=0}
  $on:
    image-source: /images/game/slots/neck-blessed

LeftSlot < InventoryItem
  id: slot6
  image-source: /images/game/slots/left-hand
  &position: {x=65535, y=6, z=0}
  $on:
    image-source: /images/game/slots/left-hand-blessed

FingerSlot < InventoryItem
  id: slot9
  image-source: /images/game/slots/finger
  &position: {x=65535, y=9, z=0}
  $on:
    image-source: /images/game/slots/finger-blessed

BackSlot < InventoryItem
  id: slot3
  image-source: /images/game/slots/back
  &position: {x=65535, y=3, z=0}
  $on:
    image-source: /images/game/slots/back-blessed

RightSlot < InventoryItem
  id: slot5
  image-source: /images/game/slots/right-hand
  &position: {x=65535, y=5, z=0}
  $on:
    image-source: /images/game/slots/right-hand-blessed

AmmoSlot < InventoryItem
  id: slot10
  image-source: /images/game/slots/ammo
  &position: {x=65535, y=10, z=0}
  $on:
    image-source: /images/game/slots/ammo-blessed

OutfitSlot < InventoryItem
  id: slot12
  size: 95 95
  creatureDisplayer:setCreature(creature)
  &position: {x=65535, y=10, z=0}
  $on:

PurseButton < Button
  id: purseButton
  size: 26 26
  !tooltip: tr('Open purse')
  icon-source: /images/game/slots/purse
  icon-size: 24 24
  icon-offset: 1 1

MiniWindow
  id: inventoryWindow
  !text: tr('Inventory')
  icon: /images/topbuttons/inventory
  height: 160
  @onClose: modules.game_inventory.onMiniWindowClose()
  &save: true

  MiniWindowContents
    HeadSlot
      anchors.top: parent.top
      anchors.horizontalCenter: parent.horizontalCenter
      margin-right: 75

    FingerSlot
      anchors.top: prev.bottom
      anchors.horizontalCenter: prev.horizontalCenter
      margin-right: -150

    NeckSlot
      anchors.top: prev.bottom
      anchors.horizontalCenter: prev.horizontalCenter
      margin-top: 0

    FeetSlot
      anchors.top: slot1.top
      anchors.left: slot1.right
      margin-top: 99
      margin-left: -33

    AmmoSlot
      anchors.top: slot1.top
      anchors.right: slot1.left
      margin-top: 99
      margin-right: -183

    OutfitSlot
      anchors.top: slot1.top
      anchors.right: slot1.left
      margin-top: 2
      margin-right: -137

    LeftSlot
      anchors.top: slot1.top
      anchors.left: slot1.right
      margin-top: 99
      margin-left: 23

    RightSlot
      anchors.top: slot1.top
      anchors.left: slot1.right
      margin-top: 99
      margin-left: 62

    BodySlot
      anchors.top: slot1.top
      anchors.left: slot1.right
      margin-top: 33
      margin-left: -33

    LegSlot
      anchors.top: prev.bottom
      anchors.horizontalCenter: prev.horizontalCenter
      margin-top: 0

    BackSlot
      anchors.top: slot1.top
      anchors.left: slot1.right
      margin-top: 0
      margin-left: 117

    PurseButton
      anchors.top: slot1.top
      anchors.left: slot1.right
      margin-top: 0
      margin-left: 117

oen432 · Aug 2, 2020

There
hastebin (https://hasteb.in/ayugofap.lua)

Vivelo · Aug 2, 2020

oen432 said:
There
hastebin (https://hasteb.in/ayugofap.lua)

If this is the code that was supposed to work, unfortunately it doesn't work :/

oen432 · Aug 2, 2020

Vivelo said:
If this is the code that was supposed to work, unfortunately it doesn't work :/

Change OutfitSlot < InventoryItem to OutfitSlot < UICreature in otui file.

#Edit
Even better

Code:

OutfitSlot < Creature
  id: slot12
  size: 95 95

Vivelo · Aug 2, 2020

It works! Wow Thanks!

thogoplayer · Jan 3, 2024

oen432 said:
There
hastebin (https://hasteb.in/ayugofap.lua)

please again ?

[OtClient] How to display outfit on inventory window?

Vivelo

New Member

Vivelo

New Member

zxmatzx

Advanced OT User

Vivelo

New Member

Shadowsong

Game Developer & Graphic Designer

GIF | Gfycat

oen432

Legendary OT User

Vivelo

New Member

oen432

Legendary OT User

Vivelo

New Member

oen432

Legendary OT User

Vivelo

New Member

oen432

Legendary OT User

Vivelo

New Member

thogoplayer

New Member