OtClient - Tutorial Básico #1

 Aula 1 : Editando mod/Modules

Bom galera, hoje eu vou ensinar vocês a como editar mod/Modules, e também como posiciona-los na janela.

 OBS: Quando eu falar Janela, estou me referindo aos objetos: MainWindow, Botton etc

Passo 1 entendendo os arquivos

Dentro da maioria das pasta no OtClient existirão 3 arquivos com as seguintes extensões:

.lua.otmod.otui

Cada uma dessas extensões executam um papel EXTREMAMENTE importante dentro do mod/module que você pretende criar, Mais será explicado mais para a frente, Nessa aula vamos mexer apenas no arquivo ".otui".

Passo 2 Indentação

Uma das coisas mais importante dentro dos arquivos ".otui" é a indentação, pois se você errar um espaçamento qualquer você pode estar 'bugando' todo o funcionamento da sua mod/module.

Vou ensinar a vocês o modo certo de indentar seus códigos para que não tenham erros.

MainWindowid: tutorialWindowsize: 80 80&save: true

Dentro dos arquivos '.otui' só é permitido a indentação com a tecla "Espaço", Caso você tente usar "Tab" para indentar seu código ele vai dar erro e não irá funcionar. A indentação deve ser feita com apenas 2 espaços, e sempre seguindo a ordem do item que você ta criando.

Exemplo:

MainWindowid: tutorialWindowsize: 80 80&save: trueButtonid: Button1anchors.top: parent.topanchors.right: parent.rightmargin-left: 5

Como o Botão 'Button1' vai ficar dentro da janela ' tutorialWindow', ele tem que ficar a uma distancia de 2 espaços da janela 'MainWindow', Caso eu quebre esse espaçamento provavelmente poderei ter bugs na hora de abrir esse mod/module dentro do client. Outra coisa para tomar cuidado é quando for dar linha para adicionar outra janela, nessa linha em que separa uma janela não pode conter nem um espaço e nenhum comando.

Exemplo:

Certo

MainWindowid: tutorialWindowsize: 80 80&save: trueButtonid: Button1anchors.top: parent.topanchors.right: parent.rightmargin-left: 5

Errado

MainWindowid: tutorialWindowsize: 80 80&save: trueButtonid: Button1anchors.top: parent.topanchors.right: parent.rightmargin-left: 5

Vocês não conseguem ver a diferença, mais tente selecionar os dois códigos que vão entender melhor, o que eu falei.

Agora a organização e edição de cada janela dentro do arquivo '.otui' deve seguir o mesmo principio de 2 espaços de distancia.

Exemplo:

Certo

MainWindowid: tutorialWindowsize: 80 80&save: trueButtonid: Button1anchors.top: parent.topanchors.right: parent.rightmargin-left: 5

Errado

MainWindowid: tutorialWindowsize: 80 80&save: trueButtonid: Button1anchors.top: parent.topanchors.right: parent.rightmargin-left: 5

E também esta Errado desta forma

MainWindowid: tutorialWindowsize: 80 80&save: trueButtonid: Button1anchors.top: parent.topanchors.right: parent.rightmargin-left: 5

Como o botão vai aparecer dentro da janela 'MainWindow' ele tem que ficar a 2 espaçamento dela pois se eu deixar os 2 na mesma posição é como se eu estivesse dizendo ao script que são duas janelas separadas e o botton vai aparecer por conta própria quando eu executar o mod/module.

Passo 3 conhecendo as janelas

Existem diversos modos de se criar uma janela onde vai aparecer vários botoes textos e etc, Mais sempre vai ter uma janela que será a matriz de todos, onde todos deverão aparecer, que no nosso exemplo é :

MainWindowid: tutorialWindowsize: 80 80&save: true

Esse código é nossa janela principal, É nela que vai aparecer tudo que queremos mostrar com no script, Agora vou mostrar o que cada função que tem dentro de MainWindow faz.

MainWindowid: esse é o ID do MainWindow, Supondo que tenham 2 MainWindow, é com esse id que vamos diferencia-lassize: aqui é onde configuramos a largura e altura da janela, nessesariamente nessa ordem&save: isso fica para as próximas aulas

Não precisamos usar necessariamente size para mostrar o tamanho ou largura da janela, podemos utilizar por exemplo :

width: 80height: 80

Esses 2 códigos podem ser utilizados no lugar de size e farão exatamente a mesma coisa.

Caso você tenha editado ou criado algum mod/modules para testar esses códigos que mostrei acima, percebeu que na janela não aparece nome e nem nada do gênero e é isso que irei mostrar agora.

!text: tr('Texto') - Essa função adiciona o texto na janela em que você adicionar esta linhaicon: img.png - Esta função pega a sua imagem e usa ela de icone para a janela ( neste caso a imagem tem que estar na mesma pasta que o arquivo '.otui', e isso só irá funcionar dependendo do tipo da janela matriz, veremos em outros tutoriais.)

Com esses dois Código você consegue personalizar a janela onde irão aparecer os botoes, textos etc que você pretende fazer.

Exemplo:

MainWindowid: tutorialWindow!text: tr('Tutorial Window')size: 80 80&save: true

Agora vamos começar a criar botoes, escrever textos e etc.

Vamos começar adicionando uma Label que vai mostrar o texto 'Olá Xtibia'.

MainWindowid: tutorialWindow!text: tr('Tutorial Window')size: 80 80&save: trueLabelid: Label1!text: tr('Olá Xtibia')anchors.top: parent.topanchors.left: parent.leftmargin-top: 5margin-left: 5

Como vocês podem ver apareceram algumas funções novas, que são elas :

anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.rightanchors.bottom: parent.bottomanchors.top: prev.topanchors.left: prev.leftanchors.right: prev.rightanchors.bottom: prev.bottommargin-top: 5margin-left: 5margin-right: 5margin-bottom: 5

Com essas funões nós determinamos onde cada item da nossa janela vai ficar.

Entendendo as novas funções

anchors.top: parent.top

Com a linha 'anchors.top:' estamos dizendo que a posição do meu item vai ser definida para cima, agora adicionando 'parent.top' estamos dizendo que a posição do meu item deve se Colada com começo da Janela, e isso segue para left, right, bottom também.

agora se no lugar de 'parent.top' eu usar 'prev.top' eu estou dizendo que meu item vai ficar colado com a parte de cima do item que tem encima, Confuso eu sei mais vou dar um exemplo:

MainWindowid: tutorialWindow!text: tr('Tutorial Window')size: 80 80&save: trueLabelid: Label1!text: tr('Olá Xtibia')anchors.top: parent.topanchors.left: parent.leftLabelid: Label2!text: tr('Xtibia o melhor')anchors.top: prev.topanchors.left: parent.left

Ali no script acima eu estou mandando a Label1 ficar colada com a borda de cima da janela principal, e a esquerda, Já na Label2, eu estou mando ela ficar colada com a Label1 ( pois a label1 que esta encima ) e também ficar colada com a borda da janela principal.

Isso se aplica a todos os lados, se eu usar prev.left, eu vou estar dizendo que a label2 tem que ficar exatamente do lado esquerdo da label1.

As funções 'margin-top: 5' vão fazer com que meu item fique com a distancia de 5 pixel ( Não tenho certeza se são pixels ) do item que esta acima

MainWindowid: tutorialWindow!text: tr('Tutorial Window')size: 80 80&save: trueLabelid: Label1!text: tr('Olá Xtibia')anchors.top: parent.topanchors.left: parent.leftLabelid: Label2!text: tr('Xtibia o melhor')anchors.top: prev.topanchors.left: parent.leftmargin-top: 5

Nesse Exemplo eu fiz a label2 ficar a 5 pixel abaixo da Label1, e isso é a mesma coisa se eu ultilizar left, right, bottom eu vou pegar uma distancia do que estiver do lado do meu item ou embaixo etc.

Mais agora nós não precisamos nos prender a ficar somente com parent, e prev na hora de criar um item. podemos utilizar o id de um item como referencia de onde deve ficar meu item, como no exemplo :

MainWindowid: tutorialWindow!text: tr('Tutorial Window')size: 80 80&save: trueLabelid: Label1!text: tr('Olá Xtibia')anchors.top: parent.topanchors.left: parent.leftLabelid: Label2!text: tr('Xtibia o melhor')anchors.top: prev.topanchors.left: parent.leftmargin-top: 5Labelid: Label3!text: tr('Xtibia OtClient')anchors.top: parent.topanchors.left: Label1.left

Nesse Exemplo eu fiz com que a Label3 ficasse a esquerda da Label1, e grudada a margem da janela principal, mais eu também poderia fazer ela ficar embaixo da Label1, e grudada ao lado direito da margem da janela principal.

MainWindowid: tutorialWindow!text: tr('Tutorial Window')size: 80 80&save: trueLabelid: Label1!text: tr('Olá Xtibia')anchors.top: parent.topanchors.left: parent.leftLabelid: Label2!text: tr('Xtibia o melhor')anchors.top: prev.topanchors.left: parent.leftmargin-top: 5Labelid: Label3!text: tr('Xtibia OtClient')anchors.top: Label1.topanchors.right: parent.right

Mais caso você for testar isso vai perceber que o Label2 vai ficar encima do Label1 e ao invés do Label3 ficar embaixo do Label1 ele vai ficar do lado, Para corrigir esses pequenos erros você pode juntar códigos como no exemplo :

MainWindowid: tutorialWindow!text: tr('Tutorial Window')size: 80 80&save: trueLabelid: Label1!text: tr('Olá Xtibia')anchors.top: parent.topanchors.left: parent.leftLabelid: Label2!text: tr('Xtibia o melhor')anchors.top: prev.bottomanchors.left: parent.leftmargin-top: 5Labelid: Label3!text: tr('Xtibia OtClient')anchors.top: Label1.bottomanchors.right: parent.right

Pelo Simples fato de eu ter trocado top por bottom agora o script sabe que a Label2 tem que ficar no fim da Label1 e o mesmo para a Label3, e por isso usamos margin, para deixa uma distancia entre cada item, e para ficar mais organizado.

Bom acho que é isso, Caso eu lembre de algo relevante estarei editando e adicionando mais coisas, Espero que gostem e quais quer DUVIDAS relacionadas AO TÓPICO é só fazer um comentário aqui embaixo que estarei respondendo.

@Edit, Infelizmente o Xtibia Quebrou a indentação, mais lembre-se é sempre 2 espaços.

*-*, falta tutoriais desse tipo aqui no ékixtibia, usuário reputado, perfeito conteudo *-*

Muito Bom Tutorial !!

Bem organizado explicado e detalhado ;D

Muito Bom Mesmo ^^

Dentro dos arquivos '.otui' só é permitido a indentação com a tecla "Espaço", Caso você tente usar "Tab" para indentar seu código ele vai dar erro e não irá funcionar.

levei 1 semana pra descobrir isso na marra ¬¬

achu q o CODE do xtibia eh uma bota ms ;x sera q com 'quote' a indenizaçao fica correta? '--'

anchors.left: Label1.left

vlw pela dica!

uma duvida, sabes como mover uma janela? ja tentei todas as 'funçoes' q eu achei e nd ate agora... -ex: setPosition(pos)-

e otimo tutorial, na espera dos proximos ^^

Slicer, como assim mover uma janela ?

@Edit: Quando abrir a janela, aparecer em um determinado lugar, Se for isso, eu ainda não conheço nem um modo de fazer isso, pois acho que elas aparecem no meio da tela por padrão, Mais você pode tentar usar no lugar de MainWindow tente com MiniWindow ( Essa janela é aquelas que grudam nos panels, skill, inventory etc) porem pode acontecer alguns bugs pois elas tem um modo diferente de se configurar, outra hora estarei ensinando a usar elas.

sim mas para a minha barra de skills da pxg usar miniWindow n eh muito bom... -foi o 1* q eu tentei ^^-

eh tb achu q eh padrao aquilo, mas enxe o saco kkk -e a pxg conseguiu fazer elas aparecerem no canto mas blz-

vlw ae...

não duvido da veracidade do conteúdo mais antes de fazer tutoriais do tipo, você deveria explicar o que é OtClient, pra que serve e qual a vantagem...

Não tenho a minima ideia do que seja.

Logo mais estarei mostrando o que o OtClient é e o que ele pode fazer.

Bem legal o tutorial.

MainWIndow, Bottom etc!

MainWindow e Button? Cuidado com as letras maiúsculas e minúsculas.

Acho que uma imagem para ajudar na explicação dos anchors seria uma boa ideia. O pessoal costuma ter dificuldade em entendê-los.

Nesse item; Passo 3 conhecendo as janelas;

Ficaria bem legal colocar algumas imagens, mostrando o que é um MiniWindow, um Button, um Label, etc.

Passou despercebido mais ja foi corrigido. Obrigado por reportar Baxnie.

Dentro dos arquivos '.otui' só é permitido a indentação com a tecla "Espaço", Caso você tente usar "Tab" para indentar seu código ele vai dar erro e não irá funcionar.

levei 1 semana pra descobrir isso na marra ¬¬

 

achu q o CODE do xtibia eh uma bota ms ;x sera q com 'quote' a indenizaçao fica correta? '--'

 

anchors.left: Label1.left

vlw pela dica!

 

uma duvida, sabes como mover uma janela? ja tentei todas as 'funçoes' q eu achei e nd ate agora... -ex: setPosition(pos)-

 

e otimo tutorial, na espera dos proximos ^^

local mw = g_ui.createWidget('MiniWindow')
mw:move(0, 0)

E quanto a aparecer no canto é só setar o parent

-- root
mw:setParent(modules.game_interface.getRootPanel())
-- right
mw:setParent(modules.game_interface.getRightPanel())
--left
mw:setParent(modules.game_interface.getLeftPanel())
--etc

@dalv

eh usando o modules.game_interface.getRootPanel() a janela foi pro canto '--' vlw ae mano xD

To dano uma estudada nos códigos do que já ta feito e talz, mas ainda n entendi como ele chama os arquivos...por exemplo a cdbar

onde diabos ela e puxada pro cliente ler? > < e se eu criar alguma nova janela onde devo declarar ela pro cliente ler ela também? xD

to a 2 horas lendo os arquivos e não achei nada =/

@Tópico

Tuto muito bom, rep++ xD

Tutorial simples Facil , de entender Muito bom parabéns vai ajuda muitas pessoas que querem aprender algumas funções.

@jeffe

oq faz o otclient ler os mods eh o cdBar.otmod ...

autoload: true
autoload-priority: 1000