Client [OTCV8] Dialog module

[Mutio 0]

PokeDash by Pota TFS 1.2
OTCv8

Dialogue module by Gengo (Reworked)

 

Hello everyone, would anyone be able to help me improve this dialogue system?

When I have a lot of text, it expands, and there's a write effect. I made this primarily for myself, but you can also benefit from it.

The problem is that if there's a lot of text, the window doesn't layout as I intended, specifically regarding the buttons. They get cut off, and I'd like the window to adjust its size based on the amount of text and buttons. For example, if there are 3 buttons, the window should not cut them off but should expand, adding a few pixels at the bottom to display the buttons correctly.

Additionally, I've implemented a feature in the code to display items in the center if they are required for quests or anything an NPC might ask from the player. I'd like to make sure this feature also adapts correctly to the window size.

Perhaps there is an expert in the OTC module who could guide me or correct and remove unnecessary code that I've written and is not needed. I must admit that I'm not a very skilled developer in OTC, but I managed to accomplish something. If someone can help me, I can share this dialogue system. (Modified version of Gengo)



LUA:
 

local npcWindowDialog 
local buttonHolder
local lblTitle
local outfitBox
local panelMsg
local scrollPanel
local lblMessage
local LabelText
local itemBox
local buttondialog
local fadeOutEvent = nil
local initialHeight = 200

function init()
  connect(g_game, { onGameEnd = offline })
  connect(LocalPlayer, { onPositionChange = onCreaturePositionChange })
	
  ProtocolGame.registerExtendedOpcode(80, function(protocol, opcode, buffer)
    print("Received extended opcode data: " .. buffer) 
    local data = json.decode(buffer)
    if (data.action == "close") then
      offline()
    elseif (data.action == "create") then
      NpcDialog(data.data)
    end
  end)
	
  npcWindowDialog = g_ui.displayUI('npcdialog')
	
  buttonHolder = npcWindowDialog:getChildById('buttonHolder')
  lblTitle     = npcWindowDialog:getChildById('lblTitle')
  scrollPanel  = npcWindowDialog:getChildById('scrollPanel')
  panelMsg     = npcWindowDialog:getChildById('panelMsg')
  outfitBox    = npcWindowDialog:getChildById('outfitBox')
  itemBox      = npcWindowDialog:getChildById('itemBox')
  buttondialog      = npcWindowDialog:getChildById('buttondialog')
  lblMessage   = g_ui.createWidget('LabelText', panelMsg)
end

function terminate()
  disconnect(g_game, { onGameEnd = offline })
  disconnect(Creature, {	onPositionChange = onCreaturePositionChange })
  ProtocolGame.unregisterExtendedOpcode(80)
  removeEvent(npcWindowDialog.fadeEvent)
  npcWindowDialog:destroy()
end


function clearItemBox()
  itemBox:destroyChildren()
end

function offline()
  clearItemBox()
  buttondialog:destroyChildren()
  npcWindowDialog:hide()
  npcWindowDialog:setHeight(initialHeight)
  if fadeOutEvent then
    removeEvent(fadeOutEvent)
  end
end

function onCreaturePositionChange(creature, newPos, oldPos)
  if creature:isLocalPlayer() then
    clearItemBox()
	npcWindowDialog:setHeight(initialHeight)
    npcWindowDialog:hide()

  end
end

function openDialog()
  npcWindowDialog:raise()
  npcWindowDialog:show()
  npcWindowDialog:setOpacity(0)
  npcWindowDialog:setHeight(initialHeight)
  g_effects.fadeIn(npcWindowDialog, 150)
  if fadeOutEvent then
    removeEvent(fadeOutEvent)
  end
  fadeOutEvent = scheduleEvent(function() g_effects.fadeOut(npcWindowDialog, 150) end, 30000)
end

function writeTextEffect(lblMessage, text, delay, callback)
  lblMessage:clearText() 
  local textSize = #text 
  local initialHeight = npcWindowDialog:getHeight()
  
  for i = 1, textSize do
    scheduleEvent(function() 
      lblMessage:setText(lblMessage:getText() .. text:sub(i, i))

      local newHeight = initialHeight + lblMessage:getTextSize().height 

      npcWindowDialog:setHeight(newHeight)
    end, delay * i)
  end
end

function NpcDialog(value)
  clearItemBox()
  local Npc = g_map.getCreatureById(value.npcId)
  
  lblTitle:setText(Npc:getName())
  outfitBox:setOutfit(Npc:getOutfit())
  
  lblMessage:clearText()
  writeTextEffect(lblMessage, tr(value.message), 15)
  scrollPanel:setVisible(lblMessage:getTextSize().height > panelMsg.limitText)
  
  local textLength = string.len(value.message)
  local windowHeight = textLength * 10 

  if value.items ~= nil then
    local itemHeight = 10 
    windowHeight = windowHeight + (#value.items * itemHeight)
  end

  local maxHeight = 800 
  if windowHeight > maxHeight then
    windowHeight = maxHeight
  end
  npcWindowDialog:setHeight(windowHeight) 

  if value.items ~= nil then
    for _, itemId in ipairs(value.items) do
      local item = g_ui.createWidget('Item', itemBox)
      item:setItemId(itemId)
    end
  end
  buttondialog:destroyChildren()  
  if value.options ~= '' then
    local option = value.options:split('&')

    for i = 1, #option do
      local button = g_ui.createWidget('OptionButton', buttondialog)
      button:setText(tr(option[i]))
      button:setWidth(500) 
      button:setHeight(150)
      button:setVisible(false)
      button.onClick = function() 
        g_game.talkChannel(MessageModes.NpcTo, 0, option[i]) 
        npcWindowDialog:setHeight(initialHeight)
        button:setVisible(false)
      end
    end
    buttondialog:setHeight(#option > 25 and 88 or 25)
    scheduleEvent(function() 
      for i, child in ipairs(buttondialog:getChildren()) do
        child:setVisible(true)
        g_effects.fadeIn(child, 500) 
      end
    end, (#value.message * 8) + 500)
  end
  
  openDialog()
end

OTUI:

 

LabelText < Label
  padding-bottom: 5
  font: sans-bold-16px
  color: #e8c05e
  text-wrap: true
  text-auto-resize: true

OptionButton < UIButton
  image-source: /images/ui/buttondialog
  image-repeated: true
  text-offset: 0 1
  change-cursor-image: true
  cursor: pointer

  $pressed:
    image-color: #dfdfdf44

  $disabled:
    image-color: #dfdfdf55
    change-cursor-image: false

UIWindow
  id: npcWindowDialog
  size: 690 381
  visible: false
  focusable: false
  image-source: window

  image-repeated: false
  anchors.centerIn: parent
  @onEscape: modules.game_npcdialog.offline()

  Label
    id: lblTitle
    font: sans-bold-16px
    anchors.top: parent.top
    anchors.left: parent.left
    !text: tr('Title')
    margin: 18 0 5 25
    color: #e8c05e
    text-auto-resize: true

  UICreature
    id: outfitBox
    size: 58 58
    anchors.top: prev.bottom
    anchors.left: parent.left
    margin: 20 0 5 34

  VerticalScrollBar
    id: scrollPanel
    height: 65
    anchors.top: panelMsg.top
    anchors.left: panelMsg.right
    anchors.bottom: panelMsg.bottom
    pixels-scroll: true
    step: 14
    margin-left: 5
    visible: false

  ScrollablePanel
    id: panelMsg
    size: 0 60
    anchors.top: lblTitle.bottom
    anchors.left: outfitBox.right
    anchors.right: parent.right
    margin: 8 30 10 25
    vertical-scrollbar: scrollPanel
    layout: verticalBox
    &limitText: 80

  UIItem
    id: itemBox
    size: 50 50
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: panelMsg.bottom
    layout:
      type: horizontalBox
      cell-size: 50 50
      cell-spacing: 12
      num-columns: 10
      fit-children: true

  UIScrollArea
    id: buttondialog
    anchors.top: itemBox.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin: 15 10 25 10

    layout:
      type: grid
      cell-size: 500 42
      flow: true
      fit-children: true

 

 

Editado Julho 22, 2023 por Mutio (veja o histórico de edições)

[Mutio 0]

UP.