Início rápido
Crie a sua primeira interface e exporte-a como um recurso MTA:SA em poucos minutos.
Bem-vindo ao Easelt Builder — um designer visual baseado em navegador para GUIs dx do MTA:SA, da Easelt · C4. Este início rápido acompanha-o desde uma tela em branco até um recurso MTA executável: vai escolher uma resolução, adicionar o seu primeiro elemento, estilizá-lo, ligar um pouco de lógica, testá-lo ao vivo e exportar um .zip pronto a usar.
A visão geral em 60 segundos
Aqui está toda a jornada num relance. Cada passo abaixo é detalhado na sua própria secção, mas esta é a forma de um primeiro projeto:
- Escolha uma ResoluçãoEscolha a sua resolução alvo (por exemplo
1920x1080) na barra superior para que as posições permaneçam corretas em todo o lado. - Adicione um elementoClique numa ferramenta da Caixa de ferramentas — experimente
Button— e ela cai na tela. - Estilize-oUse o Inspetor para definir a cor de preenchimento, cantos, texto, contorno e sombra.
- OrganizeAdicione mais elementos e alinhe-os com as guias de alinhamento e a grelha/ajuste.
- Adicione lógicaOpcionalmente, abra o Blueprint e ligue um clique para abrir uma janela, alternar a visibilidade ou alterar o texto.
- TestePressione ▶ Testar no Blueprint para experimentá-lo ao vivo e, depois, Esc para parar.
- GuardePressione Ctrl S — o Easelt também guarda automaticamente enquanto trabalha.
- ExporteVá a Ficheiro → Exportar recurso MTA para obter um
.zipque pode colocar no seu servidor.
Passo 1 — Escolha a sua Resolução alvo
Antes de colocar seja o que for, defina a Resolução alvo na barra superior — por exemplo 1920x1080. Isto diz ao Easelt Builder para qual ecrã está a desenhar, para que o layout na tela corresponda ao que um jogador nessa resolução verá.
Como o Easelt dispõe os elementos de forma responsiva, as posições permanecem corretas noutras resoluções também — escolha a resolução na qual desenha, e a sua GUI ajusta-se de forma limpa para todos os outros.
Passo 2 — Adicione o seu primeiro elemento
Abra a Caixa de ferramentas e clique numa ferramenta para adicionar o seu elemento — comece com Button. O elemento cai diretamente na tela, pronto a ser posicionado e moldado. Todos os elementos suportam os mesmos três gestos de manipulação direta:
Passo 3 — Estilize-o no Inspetor
Com o seu elemento selecionado, o Inspetor mostra tudo o que pode estilizar. Percorra cada controlo para dar ao seu Button o aspeto que deseja:
| Controlo | O que faz |
|---|---|
| Cor de preenchimento | Define a cor de fundo do elemento usando o seletor de cores. |
| Cantos | Arredonda os cantos do elemento ao seu gosto. |
| Texto | Edita a etiqueta e a aparência do seu texto. |
| Contorno | Adiciona uma borda/traço ao redor do elemento. |
| Sombra | Lança uma sombra atrás do elemento para dar profundidade. |
Clique no seletor de cores ao lado de Cor de preenchimento para escolher qualquer cor — é a forma mais rápida de fazer um elemento combinar com o tema do seu servidor.
Passo 4 — Adicione mais elementos e organize-os
As GUIs reais são feitas de vários elementos. Adicione mais a partir da Caixa de ferramentas e, depois, alinhe-os com precisão usando os dois auxiliares de posicionamento do Easelt:
- Guias de alinhamento — linhas inteligentes aparecem enquanto arrasta, para que as bordas e os centros se ajustem em harmonia com os elementos próximos.
- Grelha / ajuste — os elementos ajustam-se à grelha para um espaçamento arrumado e uniforme, sem ter de medir píxeis a olho.
Passo 5 — Adicione lógica no Blueprint (opcional)
Quer que a sua GUI realmente *faça* algo? Abra o Blueprint e ligue o comportamento visualmente — sem necessidade de Lua. A partir de um único clique, pode, por exemplo:
- Abrir uma janela
- Alternar a visibilidade de um elemento
- Alterar o texto de um elemento
O Blueprint é opcional — um layout puramente visual exporta e é executado perfeitamente sem qualquer lógica ligada.
Passo 6 — Teste-o ao vivo
No Blueprint, pressione ▶ Testar para executar a sua GUI ao vivo e experimentar as interações que ligou — clique no seu botão, veja a janela abrir-se, veja o texto mudar. Pressione Esc para parar o teste e regressar à edição.
Passo 7 — Guarde o seu trabalho
Pressione Ctrl S para guardar. O Easelt Builder também guarda automaticamente enquanto trabalha, por isso o seu projeto está protegido mesmo que se esqueça — mas guardar manualmente é um bom hábito antes de exportar.
Passo 8 — Exporte o seu recurso MTA
Quando estiver satisfeito, transforme o seu design num recurso real. Vá a Ficheiro → Exportar recurso MTA para transferir um .zip. Esse arquivo é um recurso MTA:SA completo e pronto a usar, contendo:
| Ficheiro | O que é |
|---|---|
gui.lua | A sua GUI gerada: os elementos que desenhou e o seu layout. |
lib.lua | A biblioteca de suporte da qual o código gerado depende. |
meta.xml | O manifesto do recurso que diz ao MTA:SA o que carregar. |
| ativos | Quaisquer imagens e outros ficheiros que o seu design use. |
Descompacte o .zip para a pasta de recursos do seu servidor e, depois, inicie-o como qualquer outro recurso MTA — sem necessidade de edição manual.
Útil: pré-visualizar sem a interface do editor
A qualquer momento, pressione P para pré-visualizar o seu design — isto oculta a interface do editor (Caixa de ferramentas, Inspetor e painéis) para que veja apenas a GUI como um jogador a veria. Pressione P novamente para trazer o editor de volta.
Próximos passos
Criou e exportou a sua primeira GUI — bom trabalho. Siga para estas páginas a seguir para aprofundar: