Idioma

HashLips e Orion Art Engine: comunidade, camadas e animação

Minha trajetória na comunidade HashLips e o desenvolvimento de uma engine própria para combinar camadas complexas e gerar coleções animadas.

Código do projeto ↗

5 min de leitura

Minha participação na HashLips começou pelo Discord. Entrei na comunidade bem no início, quando Daniel estava criando o servidor, e me ofereci para ajudar a construí-lo. Eu usava o Discord desde 2016 e já tinha experiência com a plataforma. Aquela foi a primeira forma que encontrei de contribuir.

Com o tempo, passei também a ajudar a pensar e executar melhorias no Art Engine. Mais tarde, desenvolvi minha própria versão, o Orion Art Engine (abre em uma nova aba), com recursos adicionais para trabalhar com combinações de camadas mais complexas e coleções animadas.

Essa história reúne duas partes importantes da minha experiência: construir ferramentas e participar de uma comunidade em que as pessoas aprendiam e trabalhavam juntas.

Uma comunidade que ia além do código

O trabalho na HashLips envolvia muito mais que gerar imagens. Ajudávamos pessoas a estudar, encontrar oportunidades de trabalho no mundo Web3 e se conectar com desenvolvedores comprometidos. Também apoiávamos entusiastas que tinham uma ideia, mas precisavam encontrar quem pudesse construí-la.

Houve ainda situações em que ajudamos pessoas a recuperar fundos perdidos. Esse tipo de apoio fazia parte de uma atuação coletiva mais ampla, que não cabe apenas na lista de funcionalidades de um repositório.

Compartilhar código aberto e incentivar o estudo eram partes centrais desse trabalho. Foi nesse ambiente que minha participação técnica cresceu: entre conversas, dúvidas e necessidades de quem estava tentando criar alguma coisa.

Da composição de imagens a regras de combinação

O HashLips Art Engine original (abre em uma nova aba) é a base do meu fork. Seu fluxo de geração combina imagens organizadas em camadas, escolhe características conforme a configuração e produz as artes com seus metadados.

Uma composição pode reunir fundo, corpo, roupa e acessórios. Ao variar as escolhas, a engine produz diferentes personagens a partir de um conjunto de elementos desenhados previamente.

Mas algumas coleções exigem relações mais complexas. Uma camada pode precisar mudar de aparência conforme a pele escolhida; outra pode depender tanto da pele quanto da roupa. Apenas sortear uma imagem de cada pasta deixa de ser suficiente para representar essas relações.

O gerenciamento avançado de camadas foi uma das partes mais importantes da minha versão.

Camadas que dependem de outras escolhas

Na minha implementação, a opção conditionalOn permite definir uma ou várias camadas anteriores como condições para uma camada posterior.

Imagine um personagem com três escolhas: pele, roupa e ação. A ação precisa manter a aparência da pele e da roupa que já foram selecionadas. Para isso, a engine procura a variante visual correspondente àquela combinação.

A configuração expressa essa dependência:

JavaScript
layersOrder: [
  { name: "Skin" },
  { name: "Outfit" },
  {
    name: "Action",
    options: {
      conditionalOn: ["Skin", "Outfit"],
    },
  },
]

As variantes ficam organizadas em uma estrutura de pastas que representa as condições. Isso separa a característica escolhida da imagem usada para desenhá-la naquele contexto: uma mesma ação pode ter representações diferentes conforme as outras partes do personagem.

Captura da documentação do Orion Art Engine: variantes de Action organizadas para a combinação Skin 1 e Blue Tee.

Exemplo da documentação do Orion Art Engine: captura original (abre em uma nova aba).

Esse controle permitia construir combinações muito mais complexas do que as que eu conseguia representar com o fluxo original. A arte continuava sendo composta por camadas, mas as relações entre elas passavam a fazer parte da configuração.

No GridTurnWorld, essa atenção às relações entre regras aparece em outro contexto: percepção, movimento e turnos precisam funcionar juntos para produzir o comportamento das criaturas.

Compor animações em vez de apenas imagens estáticas

O outro recurso que considero especialmente importante é a geração de GIFs. Cada camada podia ser um GIF diferente, permitindo combinar animações independentes no resultado final.

Como exemplo ilustrativo, olhos piscando, uma roupa em movimento e um fundo animado podem ser preparados separadamente. A engine reúne essas partes em uma composição, em vez de exigir uma animação completa desenhada para cada combinação possível.

Isso amplia o problema de composição: além de escolher e sobrepor as características, é necessário combinar seus quadros ao longo da animação. A versão disponível no repositório também permite misturar camadas PNG e GIF.

A quantidade de quadros da saída é definida por numberOfFrames. Os quadros de cada GIF são distribuídos ao longo desse total. Por exemplo, em uma saída configurada com 60 quadros, uma camada GIF com apenas dois quadros mantém o primeiro nos 30 quadros iniciais e o segundo nos 30 finais. Assim, animações com quantidades diferentes de quadros se ajustam à mesma sequência de saída.

Junto das camadas condicionais, esse recurso abriu espaço para trabalhar com personagens cuja aparência e animação variam conforme as características selecionadas.

GIF de demonstração preservado no repositório público do Orion Art Engine.

Veja o GIF original (abre em uma nova aba) e as características separadas (abre em uma nova aba) na documentação pública do projeto.

Ferramentas ao redor da geração

O Orion Art Engine também reúne controles de raridade, regras de incompatibilidade, combinações obrigatórias e utilitários para metadados e recuperação de coleções.

Uma parte desse fluxo é separar a geração dos metadados da renderização das imagens. Assim, é possível revisar as combinações e sua distribuição antes de renderizar a coleção inteira. Os dados de geração também podem ser reaproveitados para gerar novamente as imagens.

Esses recursos estão documentados no repositório. Neste relato, porém, o destaque fica com o gerenciamento de camadas e os GIFs: são as partes que melhor representam o que eu queria acrescentar à ferramenta.

Um projeto dentro de uma história coletiva

Minha versão preserva a atribuição ao HashLips Art Engine, que continua sendo sua base. As extensões representam o trabalho que desenvolvi em torno dela e as possibilidades que quis explorar.

Quando penso nessa experiência, lembro tanto das soluções técnicas quanto das pessoas que se aproximaram da comunidade para aprender, encontrar colaboradores ou começar a trabalhar com desenvolvimento.

O código do Orion Art Engine está disponível no GitHub (abre em uma nova aba), com a configuração, os utilitários e exemplos de organização das camadas.

generative-artjavascriptnftferramentascomunidade