Ir para conteúdo

OtClient - Tutorial Básico #2


BananaFight

Posts Recomendados

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:



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




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

Link para o comentário
Compartilhar em outros sites

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.

Editado por BananaFight
Link para o comentário
Compartilhar em outros sites

  • 4 weeks later...
  • Quem Está Navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...