Otui Editor & Creator - By Lehnox

[Lehnox 181]

Fala tibianos e poketibianos...

Estou disponibilizando um pequeno projeto meu para vocês, fiz durante algumas aulas de Python e tive ajuda da I.A para algumas duvidas/projeções.

Porém, estou deixando-o no GitHub para melhoras e vou mantê-lo atualizado sempre que possível!

Façam bom uso porém ainda não está 100%.
(

This is the hidden content, please

• Entre
• ou
• Cadastre-se

)

 

📘Editor OTUI - By Lehnox

O Editor OTUI é um editor visual (GUI) desenvolvido em Python + PySide6 (Qt), projetado para criar e modificar arquivos OTUI e OTMD, amplamente utilizados em projetos como OpenTibia, OTClient e ambientes de modding similares.
Ele oferece um fluxo completo de edição visual, gerenciamento de recursos e manipulação das propriedades de widgets.

---

🎨 Visão Geral

O núcleo do editor é a classe OTUIEditor, derivada de QMainWindow, responsável por montar toda a interface:

• Barra de ferramentas de widgets: adiciona novos elementos OTUI.

• Canvas: área central de edição, com grade, zoom, pan e seleção.

• Painel direito: dividido entre

  • editor de propriedades (PropertiesEditor)

  • navegador de arquivos do módulo (.otui, .otmd, .lua).

---

🛠️ Componentes e Funcionalidades

1. 📂 Gerenciamento de Projeto (ModuleProject)

A classe ModuleProject organiza toda a estrutura de um módulo OTClient:

Estrutura do Projeto

• Root: diretório base do módulo.

• Parser de .otmod: extrai configurações, especialmente diretórios de imagens (images-dir).

• Indexação automática: localiza arquivos .otui, .otmd, .lua e diretórios de recursos.

Resolução de Recursos

O ResourceResolver converte caminhos relativos OTUI (image-source, icon-source) em caminhos absolutos no filesystem, garantindo que as texturas sejam carregadas corretamente pelo editor.

Estado do Editor

Armazena o histórico recente e o último arquivo editado em
.otui_editor_state.json.

---

2. 🎛️ Edição Visual (Canvas + WidgetItem)

Canvas

• Baseado em QGraphicsView.

• Possui grade, zoom, pan, seleção e histórico (undo/redo).

• Serializa e restaura todo o estado gráfico.

WidgetItem

Cada widget OTUI é representado visualmente por um QGraphicsObject com:

Interação

• Movimentação com snapping (grid de 10px).

• Redimensionamento com 8 handles.

• Restrição automática se o widget estiver em layouts ou ancorado.

• Menu de contexto:

  • trazer para frente / enviar para trás

  • duplicar

  • deletar

  • definir layouts (vertical / horizontal)

Renderização e Recursos

• Exibição de imagem, ícone, clipping, tinting e transformações.

• Suporte completo a nine-slice scaling (image-border) para janelas e painéis.

• Cores definidas por tipo (AppConstants.WIDGET_TYPE_COLORS).

Hierarquia e Layouts

• Widgets filhos são organizados automaticamente conforme:

  • layout: vertical

  • layout: horizontal

  • ausência de âncoras

---

3. ⚙️ Editor de Propriedades (PropertiesEditor)

Exibe e edita dinamicamente todas as propriedades OTUI do widget selecionado:

Principais Funções

• Atualização em tempo real conforme o usuário move ou redimensiona o widget.

• Campos estruturados para todas as propriedades padrão e customizadas.

• Suporte a editores específicos:

  • Imagens: abre o ImageSourceBrowser

  • Cores: QColorDialog

  • Booleanos: QComboBox

• Botão “Adicionar Propriedade”, com lista de propriedades conhecidas (AppConstants.KNOWN_PROPERTIES).

---

4. 🖼️ Navegador de Imagens (ImageSourceBrowser)

Ferramenta dedicada para navegação e seleção de imagens do módulo.

• Exibe diretórios e subpastas do images-dir.

• Mostra miniaturas em grade.

• Retorna o caminho relativo OTUI para ser aplicado ao widget.

---

5. 🧩 Parser e Serialização (OTUIParser e save_otui)

OTUIParser

Responsável por transformar texto OTUI em uma estrutura visual:

• Lê .otui e .otmd.

• Interpreta hierarquia por indentação.

• Cria widgets, propriedades, estados e eventos.

• Reconstrói automaticamente a árvore no Canvas.

save_otui

Gera o arquivo OTUI final:

• Percorre toda a hierarquia de WidgetItems.

• Escreve com indentação correta.

• Converte e copia imagens externas para o diretório do módulo.

• Usa caminhos relativos OTUI organizados e limpos.

---

🚀 Fluxo Geral de Uso

1. Carregar módulo (load_client_module).

2. Abrir um arquivo OTUI/OTMD pelo navegador lateral.

3. Edição visual no Canvas:

   • adicionar widgets

   • mover / redimensionar

   • aplicar layouts

4. Configurar propriedades via PropertiesEditor.

5. Salvar OTUI, gerando um arquivo formatado, com recursos organizados e paths relativo
   
   Seguem os prints abaixo:
   
   
   
    

[Zlemon 3]

bacana demais, só nao consegui usar, quando abro um projeto vem varios retanguilos com nomes mas sem nada no visual

[Lehnox 181]

26 minutos atrás, Zlemon disse:

bacana demais, só nao consegui usar, quando abro um projeto vem varios retanguilos com nomes mas sem nada no visual

Boa!

Mas preciso desses feedbacks para realizar as devidas modificações/atualizações.

[_m4g0_ 1]

❤️❤️

[pedrogiampietro 1]

parabéns pelo projeto, tá bem crú, diversos bugs, ainda não é funcional 😕

 

[Litchy 16]

Parabéns

[Lehnox 181]

12 horas atrás, pedrogiampietro disse:

parabéns pelo projeto, tá bem crú, diversos bugs, ainda não é funcional 😕

 

Opa, valeu!

 

Sim, de fato. Preciso de feedbacks para poder começar a corrigir tudo.

[Lehnox 181]

10 horas atrás, Litchy disse:

Parabéns

Valeu!!!