Aseprite: Como fazer um tema

Olá e bem-vindo ao meu guia sobre como ajustar um tema em aseprite. Em Temas Aseprite determine a aparência do programa usando este tutorial, você poderá personalizar o Aseprite para o seu estilo. Os temas não afetam as cores usadas na tela, como o xadrez que indica o fundo transparente e a grade, que podem ser ajustadas em suas próprias seções no menu Preferências. Você precisará de um programa como o Winrar para fazer arquivos Zip. Eu sou um manequim em qualquer tipo de codificação, então isso é principalmente apenas um tipo de tutorial “substituir este número por um número diferente para esse efeito” nada muito maluco.
------------------------

De qualquer forma, primeiro para criar seu próprio tema, simplesmente faremos uma cópia do tema aseprite padrão. A maneira mais fácil de fazer isso é navegar até o menu Temas (Editar->Preferências->Temas), então você seleciona “padrão” e clica em Abrir pasta.
------------------------

Copie todos os arquivos e navegue para algum lugar acessível como documentos/downloads/imagens. Lá você fará sua própria pasta, você pode nomeá-la como quiser, embora eu recomendo aderir ao esquema de nomenclatura que aseprite parece ter (“nameoftheme-theme”).
------------------------

Os arquivos são os seguintes: o arquivo “LICENSE” é um arquivo de texto com o qual você realmente não precisa mexer, a menos que esteja planejando distribuir/vender seu tema provavelmente. O arquivo “package” é como as informações do projeto sobre o seu tema. O arquivo “sheet.aseprite-data” é um arquivo que o aseprite gera, você não precisa mexer com isso, eu acredito. O arquivo “sheet” é uma imagem de todos os ícones/elementos de interface do usuário, tudo aqui pode ser recolorido ou completamente redesenhado para o conteúdo do seu coração! Por fim, o arquivo “tema” é o que você usa para ajustar cores, tamanhos, fontes, tamanho dos ícones/elementos da interface do usuário, a localização dos ícones/elementos da interface do usuário no arquivo “folha” e seus nomes, e tenho certeza muito mais. Primeiro, devemos nos concentrar no arquivo “pacote” para começar. Selecione-o e clique com o botão direito do mouse e Abrir com o Bloco de Notas ou equivalente. (dica especial, você pode ajustar o tamanho do texto no Bloco de Notas pressionando Ctrl e rolando)
------------------------

Você será recebido com algum código, mas não muito felizmente. Ao alterar o texto, certifique-se de não excluir vírgulas e aspas. Felizmente, estamos alterando uma cópia do padrão para que o arquivo padrão real sempre esteja lá para recorrer. De qualquer forma, primeiro você vai querer renomear “aseprite-theme” para o nome da pasta em que esses arquivos estão. Então “Aseprite Default Theme” para o nome do seu tema. Você também pode ajustar o resto das coisas, mas elas só são importantes se você estiver distribuindo ou compartilhando seu tema com outras pessoas. Por fim, você verá um “padrão” ao lado das palavras “id” e “path”, isso é realmente algo que você precisa renomear, altere-o para o nome do seu tema. Em seguida, salve o arquivo e saia.
------------------------

A qualquer momento, você pode compactar a pasta do tema que você criou em um zip usando o winrar e adicioná-lo ao aseprite como uma nova extensão/tema. Eu recomendo testar seu tema com muita frequência enquanto você o cria, o que pode ser uma dor. Mas melhor do que ajustar algo errado e não saber o que era. Portanto, antes de mostrar como ajustar visualmente seu tema, mostrarei como adicionar seu tema ao aseprite para que você possa ver como ele fica mais tarde. Primeiro você precisa transformá-lo em um ZIP, para comprimi-lo basta clicar com o botão direito do mouse na pasta com o winrar instalado e clicar em “Adicionar ao arquivo…” tudo o que você precisa fazer é selecionar ZIP no formato de arquivo. Isso deve fazer uma cópia ZIP do seu projeto. Você não precisa se preocupar com o nome do ZIP, então mesmo que ele se chame mytheme(19645), tudo ficará bem por causa do que ajustamos no arquivo “package”.
------------------------

Depois disso, para instalar um tema em aseprite, navegue até o menu Extensões (Edit->Preferences-> Extensions) e clique em adicionar extensão. Em seguida, navegue até a pasta fácil de localizar em que você colocou sua pasta zip/project e clique duas vezes em seu ZIP para adicioná-lo como uma extensão. Então, para aplicar seu tema, você muda para o menu “Tema” e clica duas vezes na lista (o clique duplo é muito importante se você selecionar o tema e pressionar ok ou aplicá-lo não mudará o tema, essa pequena peculiaridade me fez acho que não estava fazendo meu próprio tema corretamente por uma hora). Em seguida, lembre-se de voltar ao menu de extensões e desinstalar seu tema se não estiver pronto.
------------------------

Agora você deve estar pronto para realmente mudar as coisas para o seu tema. Volte para a versão descompactada do seu projeto. Primeiro o arquivo “sheet”, não abra este arquivo no MS paint pois o ms paint não suporta transparência. Você vai querer ajustar este arquivo de forma adequada, é claro! Primeiro, você notará muitas linhas que indicam fatias (se você não quiser vê-las, vá para view->show->Slices). O criador do aseprite incluiu isso para nós e eles estão mostrando o tamanho dos sprites para cada ícone/9splice/ect. Tente ficar dentro das caixas indicadas por eles para temas simples de recolorir. Você também pode fazer sua própria folha de sprite e quando chegarmos ao arquivo “tema” você pode redirecionar os locais do que você está substituindo para essa imagem em vez desta. Você provavelmente reconhecerá a maioria dos ícones aqui se tiver usado muito aseprite, procure por qualquer coisa com bordas arredondadas na interface do usuário Se tiver bordas arredondadas, é provável que seja uma emenda 9 e indicada nesta folha. Observe que algumas das cores têm transparência para elas que podem não aparecer bem no tabuleiro de xadrez cinza padrão do aseprite.
------------------------

Aqui estão algumas imagens incluídas para ter uma ideia de onde algumas das 9 emendas na folha podem estar localizadas. Há um 9splice para botões nos estados não pressionado, pairado sobre e pressionado, portanto, lembre-se disso. Barras de rolagem, seleções em menus suspensos e caixas de entrada também têm suas próprias cores. O que exatamente cada emenda é usada está no arquivo “tema” se você deseja ajustar as cores de uma direção mais estilo programador.
------------------------

 

Pode ser difícil adivinhar o que vai para onde na folha de sprite, então fazer as coisas com uma cor que estilhaça os olhos pode ajudar a solucionar um pouco o problema. Você também pode olhar para a seção Partes do arquivo “Tema” para encontrar os nomes e as coordenadas x/y do canto superior esquerdo de cada sprite, mas os nomes nem sempre são muito claros sobre o que vai onde em aseprite.
------------------------

O arquivo “tema” é aberto de forma semelhante ao arquivo “pacote”. Você seleciona e abre no Bloco de Notas. Este arquivo é onde você faz todos os outros ajustes e pode ser muito trabalhoso. Eu farei o meu melhor para derrubá-lo. Primeiro, você pode ajustar o nome do seu tema (para fins organizacionais) e o dimensionamento da tela e o dimensionamento da interface do usuário. O dimensionamento da tela ajusta o Canvas, acredito, e o dimensionamento da interface do usuário ajusta a janela da interface do usuário. O que você coloca aqui é armazenado apenas como valores inteiros e é então multiplicado para a escala original... exemplo: A escala de tela 1 seria traduzida em 100% de ampliação, a escala de tela 1.9 seria traduzida em 100% de ampliação, a escala de tela 2 seria traduzida em 200% de ampliação . Não é excepcionalmente útil para o monitor médio, mas provavelmente útil se você estiver usando um projetor enquanto está deitado na cama e outros enfeites. Em seguida, outro local para colocar em seu nome como crédito por fazer este tema.
------------------------

Em seguida, a opção de alterar a fonte usada no aseprite. As opções de fonte padrão para inserir aqui são limitadas, se você quiser alterar a fonte navegue até a pasta de fontes na pasta de dados do aseprite (Aseprite\data\fonts) Lá você verá 2 imagens que exibem a fonte padrão personalizada do aseprite e um arquivo chamado "fontes". Abrir o arquivo “fontes” com o bloco de notas mostrará suas opções padrão para as quais você pode alterar a fonte. Se não estiver nesta lista, você não pode usá-lo em aseprite. Se você está decidido a criar sua própria fonte, provavelmente pode fazer uma cópia das spritesheets para a fonte personalizada da aseprite e usá-las como guia para criar uma nova fonte. Eu não sei muito sobre como fazer fontes personalizadas, desculpe. Para adicionar uma fonte instalada existente a esta lista simplesmente copie e cole a entrada Arial e substitua “Arial” pelo nome do arquivo da fonte instalada no arquivo “fontes” do seu sistema operacional e escreva o nome da fonte no arquivo “tema”. Certifique-se de reiniciar o aseprite se você instalou a fonte com o aseprite aberto.
------------------------

Em seguida, estão as dimensões dos elementos da interface do usuário no que acredito serem pixels. Os elementos da interface do usuário são todos muito bem rotulados, portanto, devem ser muito fáceis de descobrir.
------------------------

Depois disso, Cores. Serei honesto, é muito difícil dizer o que vai para onde para mim. Provavelmente levará muito tempo para ajustar isso. O que você vê aqui é uma lista de seções da interface do usuário que estão sendo atribuídas a um código de cor hexadecimal.
------------------------

Você pode facilmente descobrir os códigos de cores hexadecimais para cores em aseprite e copiar os códigos hexadecimais de lá para o seu arquivo.
------------------------

Aqui está uma lista das cores padrão no arquivo para ajudar a visualizar quais cores você pode trocar. Uma coisa útil que encontrei foi pressionar ctrl + F para abrir o menu localizar no bloco de notas e pesquisar cores hexadecimais exatas se eu quisesse dizer mudar todas as coisas que são brancas para pretas e todas as coisas que são pretas para brancas. Por fim, há obviamente um esquema de nomenclatura e áreas da interface do usuário parecem estar agrupadas. Os rostos são como a cor de fundo para as seções da interface do usuário e os rostos quentes são partes clicáveis? Texto quente é texto clicável, rádio refere-se a menus de rádio, acredito, "selecionados" são obviamente elementos de interface do usuário selecionados, passe o mouse para cor quando o mouse estiver sobre o mouse e assim por diante.
------------------------

Partes são todos os elementos ícones/ui no arquivo “sheet”. Primeiro, ele fornecerá suas coordenadas x e y na spritesheet onde o ícone começa e, em seguida, fornecerá uma altura e largura em pixels para esse ícone. Isso você mudaria se fizesse ícones maiores/menores. Os que têm várias larguras e alturas são ícones/elementos emendados (como 9 emendas) você é o comprimento de identificação de cada seção.
------------------------

Por último é a seção de estilo. Isso é decidir quais elementos vão para onde a partir do que você definiu em todas as outras seções. Pode ser útil para descobrir para onde uma cor ou peça está indo. Você também pode ajustar o preenchimento, o comprimento da margem e o alinhamento do texto aqui.