OtClient - Tutorial Básico #2

Aula 2: Editando mod/Modules Parte 2

Hoje estarei me especificando mais com as janelas matrizes ou raízes como preferirem.

Passo 1: Conhecendo as matrizes

Irei mostrar 2 matrizes para vocês que são as únicas que vi até agora dentro dos códigos do OtClient (Isso não quer dizer que não possam existir novos modelos)

Modelo 1 : MainWindowModelo 2: MiniWindow

Cada um desses 2 modelos tem um jeito diferente para ler o código.

No Modelo 1, ele é mais simples, Pois você só precisa mostrar a janela que irá ser criada dentro dele, como no exemplo:

MainWindowid: tutorialWindow!text: tr('Tutorial')size: 150 150Buttonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.right

Como podem ver é um jeito mais simples e pratico de fazer os códigos, Porem, esse tipo de janela não "Gruda" nos painéis direitos e nem esquerdos.

Já no Modelo 2, as coisas ficam um pouco mais complicadas como por exemplo, o código tem que ser escrito de uma maneira diferente para que funcione corretamente, Mais também tem as suas vantagens, como, botão de fechar e minimizar automático icones ao lado do titulo entre outros, agora vamos ver alguns exemplos:

1° vou dar um exemplo de codigo '.lua', para se usar com a matriz MiniWindow

tutorialPanel = niltutorialButton = nilfunction init()tutorialButton = modules.client_topmenu.addRightGameToggleButton('tutorialButton', tr('tutorial'), '/images/topbuttons/skills', toggle)tutorialButton:setOn(false)tutorialWindow = g_ui.loadUI('tutorial', modules.game_interface.getRightPanel())tutorialWindow:disableResize()tutorialWindow:setup()endfunction terminate()tutorialButton:destroy()endfunction toggle()if tutorialButton:isOn() thentutorialWindow:close()tutorialButton:setOn(false)elsetutorialWindow:open()tutorialButton:setOn(true)endendfunction onMiniWindowClose()tutorialButton:setOn(false)end

E agora 1 exemplo de código .otui usando MiniWindow de forma errada

MiniWindowid: tutorialWindow!text: tr('Tutorial')size: 150 120@onClose: onMiniWindowClose()&save: trueButtonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.right

E agora 1 exemplo de cósigo .otui usando MiniWindow escrito certo

TutorialButton < Buttonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.rightMiniWindowid: tutorialWindow!text: tr('Tutorial')height: 150@onClose: onMiniWindowClose()&save: trueMiniWindowContentsTutorialButton

Agora vamos intender o porque dessa forma mais complicada.

1° para que o MiniWindow funcione corretamente ele precisa da função 'MiniWindowContents' dentro dele, dentro dessa função existem duas formas de adicionarmos itens, que são elas:

1°

TutorialButton < Buttonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.rightMiniWindowid: tutorialWindow!text: tr('Tutorial')height: 150@onClose: onMiniWindowClose()&save: trueMiniWindowContentsTutorialButton

2°

MiniWindowid: tutorialWindow!text: tr('Tutorial')height: 150@onClose: onMiniWindowClose()&save: trueMiniWindowContentsButtonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.right

Dos dois modos estão certos, mais é importante lembrar que você também pode usar as duas maneiras juntas como no exemplo:

TutorialButton < Buttonid: tutorialbutton!text: tr('xD')anchors.top: prev.bottomanchors.left: parent.leftanchors.right: parent.rightMiniWindowid: tutorialWindow!text: tr('Tutorial')height: 150@onClose: onMiniWindowClose()&save: trueMiniWindowContentsButtonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.rightTutorialButton

Você também pode adicionar um icone na MiniWindow, como exemplo:

MiniWindowid: tutorialWindow!text: tr('Tutorial')height: 150icon: /images/topbuttons/skills@onClose: onMiniWindowClose()&save: true

Lembre-se que '/images/topbuttons/' é o diretório onde o ícone tá, e 'skills' é a imagem.

Bom, esse é um tutorial mais básico só para apresentar as 2 Janelas matrizes ( Eu só conheço esses 2 modelos "Main, Mini" e não sei se existem outros.) e ensinar um pouco da diferença e das vantagens entre usar uma e outra.

Passo 2: Adicionando funções aos botoes

Bom até agora eu só mostrei os botoes mais ainda não ensinei a fazer eles executarem outra funções, e é isso que eu estarei ensinando agora.

Existem diversas formas de um botão executar uma função, Você pode criar essa função no arquivo.lua caso ela seja mais complexa ou pode fazer elas direto no arquivo.otui.

Tenha em mente, que não irei ensinar a criar funções, só estarei ensinando a como fazer um botão executar ela.

Vamos pegar nosso botão

Buttonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.right

Aqui nesse exemplo, o botão é criado mais não tem nem uma função pre definida, ou seja, mesmo que clicando nele nada irá acontecer.

Agora vamos fazer uma função dento do arquivo.lua para que o botão execute

function sendBottom()return g_game.talk('Nossa Funcionou')end

Quando a função sendBottom for executada o jogador vai falar "Nossa Funcionou"

Agora vamos fazer o botão executar ela usando esta função

@onClick:

a função onClick vai ser executada quando alguém clicar no nosso botão, Agora vamos adicionar ela no nosso botão e adicionar o parâmetro que ela deve executar.

Buttonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.right@onClick: sendBottom()

Pronto agora nosso botão vai executar o que lhe foi programado, Porem por ele executar uma função simples podemos simplificar ainda mais o que nosso botão deve fazer deixando assim:

Buttonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.right@onClick: g_game.talk('Nossa Funcionou')

Ele irá fazer a mesma coisa que a função sendBottom() porem não precisamos criar nada dentro do arquivo.lua

Parabens pelo tutorial carinha, mesmo sendo basico ira ajudar mts usuarios.

Atenciosamente, Stigal.

Obrigado Stigal, arrumei e dicionei algumas coisas que tinha esquecido, e caso eu lembrar de algo importante eu estarei atualizando o tópico, quais quer duvidas sobre o tutorial, ou algo que você queira saber só fazer um comentário que esterei tentando responde-los.

@Edit: Como fazer botoes executarem funções adicionada ao tutorial.

ali em cima você escreveu .tui ao invés de .otui

Bug Corrigido obrigado postador

da pra fazer um checkbox no otclient ?

bom tutorial...

eu mesmo, no fim do ano passado quando tentei mexer no otclient até desisti, pois tudo que eu fazia não funcionava kkkk..

facilitará mt a vida de mtos kkk

Postador hunter da sim, outra hora ensino a fazer,

Descupa a pergunta mais que linguagem é essa ?

Descupa a pergunta mais que linguagem é essa ?

essa linguagem e LUA a usada em otserver e os modulos tem como base uma especie de css bem simples de intender

@Darckx13 /all

Sabe onde posso encontrar tutoriais com algo mais aprofundado ?

Muito bom! =D