Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Usando o editor de tema

Este artigo explica como criar e gerenciar temas de UI usando o editor Godot e sua ferramenta de editor de temas. Recomendamos familiarizar-se com o básico por trás da estilização/temas de GUI lendo Introdução ao skinning GUI antes de começar.

O editor de temas é uma ferramenta do painel inferior que é ativada automaticamente, quando um recurso Theme é selecionado para edição. Ele contém a interface do usuário necessária para adicionar, remover e ajustar tipos de tema e itens de tema. Ele apresenta uma seção de visualização para testar suas alterações ao vivo, bem como uma janela de diálogo para fazer operações em massa dos itens do tema.

Criando um tema

Como qualquer outro recurso, os temas podem ser criados diretamente no dock do sistema de arquivos clicando com o botão direito do mouse e selecionando Novo recurso..., selecionando Tema e clicando em Criar. Isso é especialmente útil para criar temas para todo o projeto.

Os temas também podem ser criados a partir de qualquer nó Control. Selecione um nó Control na hierarquia da cena, então no inspetor vá para a propriedade theme. A partir daí, você pode selecionar Novo tema.

Isso criará um tema vazio e abrirá o editor de temas. Lembre-se de que os recursos criados dessa maneira são agrupados com a cena por padrão. Use o menu de contexto para salvar o novo tema em um arquivo.

Embora o editor de temas forneça as ferramentas para gerenciar tipos e itens de tema, os temas também incluem a fonte padrão de fallback, que você pode editar apenas usando a doca Inspetor. O mesmo se aplica ao conteúdo de tipos de recursos complexos, como StyleBoxes e ícones — eles abrem para edição no Inspetor.

Visão geral do editor de temas

O editor de temas tem duas partes principais. O editor de temas principal, localizado na parte inferior do editor Godot, visa fornecer aos usuários ferramentas para criar, editar e excluir rapidamente itens e tipos de temas. Ele fornece ferramentas visuais para escolher e alterar controles, abstraindo os conceitos subjacentes do tema. A caixa de diálogo Gerenciar itens de tema, por outro lado, tenta atender às necessidades daqueles que desejam alterar os temas manualmente. Também é útil para criar um novo tema de editor.

Pré-visualizações de tema

O lado esquerdo do editor principal possui um conjunto de guias de visualização. A guia Visualização padrão fica visível imediatamente e contém a maioria dos controles usados com frequência em vários estados. As visualizações são interativas, portanto, os estados intermediários (por exemplo, passar o mouse) também podem ser visualizados.

Abas adicionais podem ser criadas a partir de cenas arbitrárias em seu projeto. A cena deve ter um nó de controle como raiz para funcionar como uma visualização. Para adicionar uma nova guia, clique no botão Adicionar visualização e selecione a cena salva em seu sistema de arquivos.

Se você fizer alterações na cena, elas não serão refletidas na visualização automaticamente. Para atualizar a visualização, clique no botão recarregar na barra de ferramentas.

As pré-visualizações também podem ser usadas para selecionar rapidamente o tipo de tema a ser editado. Selecione a ferramenta seletora na barra de ferramentas e passe o mouse sobre a área de pré-visualização para destacar nós de controle. Nós de controle destacados exibem seu nome de classe ou variação de tipo, se disponível. Clicar no controle destacado o abre para edição no lado direito.

Tipos de tema e itens

The right-hand side of the theme editor provides a list of theme types available in the edited theme resource, and the contents of the selected type. The list of type's items is divided into several tabs, corresponding to each data type available in the theme (colors, constants, styles, etc.). If the Show Default option is enabled, then for each built-in type its default theme values are displayed, grayed out. If the option is disabled, only the items available in the edited theme itself are displayed.

Itens individuais do tema padrão podem ser adicionados ao tema atual clicando no botão Substituir ao lado do item. Você também pode substituir todos os itens padrão do tipo de tema selecionado clicando no botão Substituir tudo. As propriedades substituídas podem ser removidas com o botão Remover Item. As propriedades também podem ser renomeadas usando o botão Renomear Item e propriedades completamente personalizadas podem ser adicionadas à lista usando o campo de texto abaixo dele.

Os itens de tema substituídos podem ser editados diretamente no painel direito, a menos que sejam recursos. Os recursos têm controles rudimentares disponíveis para eles, mas devem ser editados no painel do Inspetor.

Styleboxes têm um recurso exclusivo disponível, onde você pode fixar uma stylebox individual da lista. A stylebox fixada atua como o líder do grupo, e todas as styleboxes do mesmo tipo são atualizadas junto com ela quando você altera suas propriedades. Isso permite que você edite propriedades de várias styleboxes ao mesmo tempo.

Embora os tipos de tema possam ser escolhidos em uma visualização, eles também podem ser adicionados manualmente. Clicar no botão de adição ao lado da lista de tipos abre o menu Adicionar tipo de item. Nesse menu, você pode selecionar um tipo da lista ou inserir um nome arbitrário para criar um tipo personalizado. O campo de texto também filtra a lista de nós de controle.

Gerenciar e importar itens

Clicar no botão Manage Items abre a janela de diálogo Manage Theme Items.

Na aba Editar Itens, você pode visualizar e adicionar tipos de tema, bem como visualizar e editar os itens de tema do tipo selecionado.

Você pode criar, renomear e remover itens de tema individuais aqui clicando no correspondente Adicionar X Item e especificando seu nome. Você também pode excluir itens de tema em massa por tipo de dados (usando o ícone de pincel na lista) ou por qualidade. Remover itens de classe removerá todos os itens de tema embutidos que você personalizou para um tipo de nó de controle. Remover itens personalizados removerá todos os itens de tema personalizados para o tipo selecionado. Por fim, Remover todos Items removerá tudo do tipo.

A partir da aba Importar Itens, você pode importar itens de tema de outros temas. Você pode importar itens do tema padrão do Godot, do tema do editor Godot ou de outro tema personalizado. Você pode importar itens individuais ou múltiplos, e pode decidir se deseja copiar ou omitir seus dados também. Existem várias maneiras de selecionar e desmarcar os itens, incluindo manualmente, por hierarquia, por tipo de dado e tudo. Optar por incluir os dados copiará todos os itens de tema como estão para o seu tema. Omitir os dados criará os itens do tipo de dado e nome correspondentes, mas os deixará vazios, criando um modelo de tema de certa forma.